vue2.0基础知识点（一）

本文针对自己学习官方文档时，总结一些易容易混淆的知识点做一下记录。欢迎指正或学习交流。

（一）常用基础知识点

1. v-on:click=''、@click=''、:click='' 三种写法；
   注意函数调用：直接使用双花括号调用函数是要使用函数名+括号，其他直接使用函数名即可，或使用函数名+括号（click事件中）注意传参的函数必须带括号，可以不带参数，不然会报错对象空值；

2. v-if='' 条件渲染与v-show='' 的区别：v-if 条件：不存在不会占位空间不会被渲染挂载；v-show为真时，去掉display：none，为假时显示display：none。默认会占用空间，会被渲染挂载。

3. v-for='' 可以通过两组方式遍历数组（也可以遍历对象）：一种是通过数组下标；另一种是循环遍历；
   v-for='user in users' 或 v-for='(user,index) in users' 第二个参数是数组索引值；

          <p>v-for还可以渲染div</p>
       <div v-for='(user,index) in users'>
           <h3>{{index+1}}</h3>
           <span>{{user.name}}---{{user.age}}</span>
   
       </div>
   
       <p>v-for使用template标签，这个标签不像div一样会被渲染出来，只渲染template里面的标签</p>
       <template v-for='(user,index) in users'>
           <h3>{{index+1}}</h3>
           <span>{{user.name}}---{{user.age}}</span>
       </template>
   
       <p>遍历数组里面的对象，遍历两次</p>
       <template v-for='(user,index) in users'>
           <div v-for="(item,key) in user" >
               <h5>{{item}}---{{key}}</h5>
           </div>
       </template>

4. 数据双向绑定的两种方法：

          <p>双向数据绑定ref/$refs示例：input/select/textarea</p>
       <label for="">姓名</label>
       <!-- ref属性标记值，可获取 -->
       <input type="text" v-on:keyup="logName" ref='refName'>
       <span>您输入的名字为：{{name}}</span><br>
       <label for="age">年龄</label>
       <input type="text" v-on:keyup='logAge' id="age" ref="refAge">
       <span>您输入的年龄为：{{age}}</span>
   
       <p>双向数据绑定v-model示例：input/select/textarea</p>
       <label for="">姓名</label>
       <!-- ref属性标记值，可获取 -->
       <input type="text" v-model='name'>
       <span>您输入的名字为：{{name}}</span><br>
       <label for="age">年龄</label>
       <input type="text" v-model="age">
       <span>您输入的年龄为：{{age}}</span>

   js部分：

   new Vue({
   el:'#vue-app',
   data:{
       name:'',
       age:''
   },
   methods:{
       logName:function(){
           // console.log("您正在输入名字~");
           // $refs获取标记的值，后面接命名值+value
           // console.log(this.$refs.refName.value);
           this.name=this.$refs.refName.value;
       },
       logAge:function(){
           // console.log("您正在输入年龄~");
           this.age=this.$refs.refAge.value;
       }
   }
   })

5. computed 和 methods 方法：只要methods方法之一被调用，其他所有方法都会被渲染执行，很耗费性能；计算属性，只会调用相应的方法体，是应用于搜索，调用比较多的方法体。