vue 细节注意

标签：one   避免   shift   new   全局变量   函数   --   user   orm   

　　*只有vm.$data这些被代理的属性是响应的,能够重新渲染视图

　　*注意，不要在实例属性或者回调函数中（如 vm.$watch(‘a‘, newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实例，而且 this.myMethod是未被定义的。

　　*常用的生命周期钩子：[before]created、mounted、updated、destroyed，钩子的 this 指向调用它的 Vue 实例。

　　*render

　　*插值：

　　　　1.文本 {{vm.$data}}  ，可以绑定data和computed， 可以使用v-once 只绑定一次不会重新渲染。

　　　　2.纯html   v-html="rawHTML"   --不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎

　　　　3.html特性 v-bind

　　　　4.javascript表达式  {{}} 和v-bind 可以且只能是单个js表达式，表达式里只能访问全局变量的一个白名单

　　　　5.指令 v-  期望所指的值是js表达式（除了v-for）,操纵DOM渲染的v-用等于号“=”，操纵特性的v-用冒号“：”

　　　　6修饰符 

　　　　7.过滤器  用在mustache 插值和 v-bind 表达式：<div v-bind:id="rawId | formatId"> 或者{{ message | filter2| filter3}}  ,可串联

　　　　　　在vm中filters属性：

　　　　　style:　　<div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>  或者一个styleObj

　　　　　　　　　　　　*组件中加key特性，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，说到底是为了提高遍历/渲染效率。详情：https://www.zhihu.com/question/61064119

　　　　　　12.数组的变异方法：example1.items.push()    会改变原始数组。

　　　　　　　　push()
　　　　　　　　pop()
　　　　　　　　shift()
　　　　　　　　unshift()
　　　　　　　　splice()
　　　　　　　　sort()
　　　　　　　　reverse()

　　　　　　　　非变异方法：filter(), concat(), slice() 返回新数组。Vue 实现了一些智能启发式方法来最大化 DOM 元素重用，，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

　　　　　　　　由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength

　　　　　　　　solution：

　　　　　　　　　　1.Vue.set(example1.items, indexOfItem, newValue)  或者example1.items.splice(indexOfItem, 1, newValue)

　　　　　　　　　　2.example1.items.splice(newLength)

　　　　　　　　特殊情况：我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。

　　　　　　　　<li v-for="n in evenNumbers">{{ n }}</li>    计算属性返回过滤后的新数组

　　　　　　　　在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：<li v-for="n in even(numbers)">{{ n }}</li>

vue 细节注意

标签：one   避免   shift   new   全局变量   函数   --   user   orm   

原文地址：http://www.cnblogs.com/alan2kat/p/7374959.html