vue基础

vue.js 的学习

vue的构造器使用

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h2>site : {{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "hello world!",
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

构造器中 el用于与对应dom树的元素建立联系。（这种联系通常是相互之间影响的）
data用于定义属性
methods用于定义方法
｛｛｝｝ 用于输出对象属性和函数返回值。

配合vue使用的dom元素属性

插值 v-html

用于向dom元素中插入html语句。html语句在data中赋值。

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hello world！</h1>'
  }
})
</script>

dom元素属性动态赋值 v-bind

v-bind:需要动态决定标签的属性的时候，可以使用到v-bind
语法糖的写法: “:标签属性”。

例如：动态绑定a标签的href属性,动态绑定img的src属性
在需要动态绑定的属性前面加上v-bind就会自动去vue实例里面去找当前的属性去进行设置.

 <img id="app" v-bind:src="imageUrl"/>
 <img id="app":src="imageUrl"/>
<script>
new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://img-blog.csdnimg.cn/20200426130819754.png'
  }
})
</script>

用于class动态绑定属性,当value值为true的时候才会添加到class里面。

当然对象式语法也可以用于style的动态绑定属性。

• 对象式格式为

<h2 :class="{ key : true, key1 : false}"></h2>
<!-- 注意这是一个个键值对 -->
<!-- 举例 -->
<h2 id="app" class="class4"  :class="{ 'class1' : true, 'class2' : T,'class3': isT() }">hello world!</h2>


<script>
new Vue({
  el: '#app',
  data: {
    T :false
  },methods: {
       isT : function(){
           return true;
       }
  }
})
</script>

用于style

<h2 style="font-size:50px">hello world</h2>
<h2 :style="{'font-size':'50px'}">hello world</h2>
<h2 id="app3" :style="{'font-size':T}">hello world</h2>


<script>
    new Vue({
        el: '#app3',
        data: {
            T :'50px'
        }
    })


</script>

• 数组式语法

<h2 :class="['class1','class2']"></h2>
<!-- 举例 -->
<h2 id="app" class="class4"  :class="[c1,c2,getC()]">hello world!</h2>


<script>
new Vue({
  el: '#app',
  data: {
    c1:'class1',
    c2:'class2'

  },methods: {
    getC : function(){
        return ['class3','class5']
    }
  }
})
</script>

在style中使用

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">hello world~</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

当然vue.js都提供了完全的 JavaScript 表达式支持。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

是否创建元素 v-if v-else v-else-if

根据v-if中的表达式是否为true决定元素是否创建。

<div id="app">
    <div id="A" v-if="type === 'A'">
      A
    </div>
    <div   id="B"  v-else-if="type === 'B'">
      B
    </div>
    <div  id="C"  v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

决定是否display v-show

根据v-show表达式是否为true决定元素是否展示

<div id="app5" v-show="fg">
fg
</div>

<script>
    new Vue({
        el: '#app5',
        data: {
            fg:false
        }
    })
</script>
<!-- 渲染后display:none -->
<!-- 如果为true则元素的display属性值就是该元素默认的display方式 -->

绑定数组渲染列表 v-for

<div id="app6">
    <ol>
        <li v-for="item in sites">
            {{ item  }}
            {{ item.name  }}
        </li>
    </ol>

</div>
<script>

  var v  =   new Vue({
        el: '#app6',
        data: {
            sites: [
                { name: 'Runoob' },
                { name: 'Google' },
                { name: 'Taobao' }
            ]
        }
    })
</script>

<!-- 

1.{ "name": "Runoob" } Runoob
2.{ "name": "Google" } Google
3.{ "name": "Taobao" } Taobao
 -->

用来打印对象的每一个值

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      a1:"a",
      a2:"b",
      a3:"c"
    }
  }
})
</script>

当然对于每一项的匹配参数数量不同时，匹配的值也不相同。

v-for="(k,v) in object" # 打印对象每一个属性的 key和value v-for="(k,v,i) in object " #打印得失 key和value和index

双向数据绑定 v-model

实现dom元素与JavaScript中对象的值的 双向更新。

<div id="app">
    <p>input 元素：</p>
    <input v-model="message" placeholder="编辑我……">
    <p>消息是: {{ message }}</p>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        }
    })
</script>
<!-- 
    message存储数据，input文本框输入改变message值，{{message}} 调用message的值也随之改变。 同样更改message的值也能改变input文本框中的内容 
-->

• 绑定chechbox

<div id="app2">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>多个复选框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
    new Vue({
        el: '#app2',
        data: {
            checked :'',
            checkedNames: []
        }
    })
</script>

• 一个checkbox绑定一个属性，该属性记录CheckBox 的checkstate为true 或者 false
• 多个checkbox绑定同一个属性，该属性记录的是每一个checkbox的value值，组成一个数学组。

• 对于单选按钮 radio还是select 都是直接一项绑定一个属性，属性记录的是元素value

v-model的预处理修饰符:

• .lazy 让属性记录值得时间是 元素的"change" 而不是 “input” 事件中更新。
• .trim 记录的值处理收尾空格
• .number 对于记录的值转换为数值存储，不能够转换就记录原值。

### key管理可复用元素

在vue中为尽可能的高效率渲染元素，会复用已有的元素而不是重新渲染，比如。

<div id="app">
    <template v-if="login">
    <label>用户名:</label>
    <input placeholder="输入你的用户名">
    </template> 
    <template v-else>
    <label>email:</label>
    <input placeholder="输入你的email">
    </template>
    <p>
        <button @click="changelogintype">
            切换登录方式
        </button>
    </p>
</div>
<script>
var vm = new Vue({
    data:{
        login:false
    },methods:{
        changelogintype(){
            if(this.login===false){
                this.login=true;
            }else{
                this.login=false;
            }
        }
    }
}).amount("#app");
</script>

在input中输入内容，然后点击按钮后，切换登录方式。发现input中的内容没有改变，但是登录方式是改变的，主要原因是两个模板中使用了相同的input元素，Vue为了提高渲染效率，会复用input元素，只是更改placeholder中的内容。

实际开发中我们有时不希望这种情况发生，就引用 key属性,(key值唯一)

<template v-if="login">
 <label>用户名:</label>
 <input placeholder="输入你的用户名" key="username-input">
 </template> 
 <template v-else>
 <label>email:</label>
 <input placeholder="输入你的email" key="email-input">
 </template>