vue学习总结（一）

html部分：
　　{{ xxx }} 插值表达式：存在闪烁问题，但不会覆盖元素中原本的内容
　　v-cloak：解决插值表达式闪烁的问题
　　v-text：没有闪烁问题且覆盖元素中原本的内容，内容当作字符串显示
　　v-html：没有闪烁问题且覆盖元素中原本的内容，内容当作html显示
　　v-bind：Vue提供的属性绑定机制  缩写是 :
　　v-on： Vue提供的事件绑定机制  缩写是 @
　　v-model：可以实现表单元素和 Model 中数据的双向绑定，只能运用再表单元素中

js部分：
　　new Vue({ })：创建一个Vue实例
　　el : '  '  ：绑定Vue的使用范围DOM
　　data : {  } ：展示的数据
　　methods : {  } ：调用的方法
　　this：如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名  或  this.方法名来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
　　filters : {  }：定义私有过滤器

Vue指令值v-for：
　　迭代数组：<p v-for="(item, i) in list">{{ i }}----{{ item }}</p>
　　迭代对象数组，i 为索引：<p v-for="(item, i) in list">{{ i }}----{{ item.id }}----{{ item.name }}</p>
　　循环对象属性，将属性打印，i 为索引：<p v-for="(value, key, i) in user">{{ key }}----{{ value }}----{{ i }}</p>
　　迭代数字，注意：如果使用v-for迭代数字的话，count从 1 开始：<p v-for="count in 10">这是第 {{ count }} 次循环</p>
　　v-if：每次都会重新删除活创建元素，有较高的切换性能消耗

　　v-show：每次不会重新进行DOM的删除和创建操作，只会切换元素的 display:none样式，有较高的初始渲染消耗

vue的其他属性：

　　创建一个vue对象  var vm = new Vue（{

　　　　el:"#app",

　　　　data:{},

}）

vm.$el：挂载vue实例
vm.$nextTick ：渲染完成以后执行

　　vm.$nextTick(function(){
　　　　console.log("渲染完成")
　　})

vm.$mount ：等同于实例中的el属性
　　必须在脚手架的情况下才能正常使用