vue 细节注意

　　*只有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属性：

　　　　　　　　filters: {

　　　　　　　　　　capitalize: function (value) {

　　　　　　　　　　if (!value) return ''

　　　　　　　　　　value = value.toString()

　　　　　　　　　　return value.charAt(0).toUpperCase() + value.slice(1)

　　　　　　　　　　}

　　　　　　　　}

　　　　8.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。只要发生重新渲染，method 调用总会执行该函数。

　　　　9.v-bind用于绑定class和 style 表达式的结果类型除了字符串之外，还可以是对象或数组。

　　　　　class:　　<div class="static"   v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>   或者一个classObj

　　　　　　　　　　--------------------------------------------------------

　　　　　　　　　　<div v-bind:class="[activeClass, errorClass]">                   ===>>         <div class="active text-danger"></div>

　　　　　　　　　　data: {
　　　　　　　　　　　　activeClass: 'active',
　　　　　　　　　　　　errorClass: 'text-danger'
　　　　　　　　　　}

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

　　　　　　　　　　data: {

　　　　　　　　　　　　activeColor: 'red',

　　　　　　　　　　　　fontSize: 30

　　　　　　　　　　}

　　　　　　　　　　-------------------------------------------------------

　　　　　　　　<div v-bind:style="styleObject"></div>

　　　　　　　　　　data: {

　　　　　　　　　　　　styleObject: {

　　　　　　　　　　　　color: 'red',

　　　　　　　　　　　　fontSize: '13px'

　　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　10.条件渲染：v-if  v-else  v-else-if （有更高的切换开销）。vue中元素经常会被复用，可以加key特性避免复用<input placeholder="Enter your username" key="username-input">

　　　　　　　　　　　　v-show只是简单切换display,不支持 <template> 语法，也不支持 v-else。

　　　　　11.v-for渲染：  

　　　　　　　　　　<li v-for="(item, index) in items">

　　　　　　　　　　<div v-for="(value, key, index) in object">

　　　　　　　　　　自定义组件使用v-for：

　　　　　　　　　　<my-component
　　　　　　　　　　v-for="(item, index) in items"
　　　　　　　　　　v-bind:item="item"
　　　　　　　　　　v-bind:index="index"
　　　　　　　　　　v-bind:key="item.id"
　　　　　　　　　　></my-component>

　　　　　　　　　　　　组件有自己的作用域，所以需要v-bind将迭代数据传递给它；

　　　　　　　　　　　*2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

　　　　　　　　　　　*v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

　　　　　　　　　　　　*组件中加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>

　　　　　　13.v-on监听事件时，可以传入$event 用以访问原生事件。修饰符是为了更专注于数据逻辑：

　　　　　　　　.stop  //阻止单击事件冒泡  

　　　　　　　　.prevent　　

　　　　　　　　.capture  　　//使用事件捕获模式

　　　　　　　　.self  　　　　//只当事件在该元素本身（比如不是子元素）触发时触发回调

　　　　　　　　.once　　　　　　//事件只触发一次

　　　　　　　14.在监听键盘事件时添加关键修饰符：

　　　　　　　　v-on:keyup.keyCode  //比如13，keyCode为13时

　　　　　　　　vue提供了常用别名：　　　

　　　　　　　　.enter
　　　　　　　　.tab
　　　　　　　　.delete (捕获 “删除” 和 “退格” 键)
　　　　　　　　.esc
　　　　　　　　.space
　　　　　　　　.up
　　　　　　　　.down
　　　　　　　　.left
　　　　　　　　.right

　　　　　　　　15.修饰符：

　　　　　　　　.ctrl
　　　　　　　　.alt
　　　　　　　　.shift
　　　　　　　　.meta

　　　　　　　　*如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

　　　　　　　　　　HTML中监听事件的好处：

　　　　　　　　1.无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

　　　　　　　　2.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

　　　　　　　　16.v-model：

　　　　　　　　*v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

 　　　　　　　   *你会发现v-model不会在 ime 输入中得到更新。如果你也想实现更新，请使用 input事件。

　　　　　　　　*在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替

　　　　　　　　　　单选按钮和复选框，v-model绑定到同一个data数组

　　　　　　　　　　单选列表select>option,v-model绑定到select，在 iOS 中，这会使用户无法选择第一个选项，因为这样的情况下，iOS 不会引发 change 事件。

　　　　　　　　　　solutiuon： <option disabled value="">请选择</option>

　　　　　　17. Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。solution:使用特殊的 is 属性.

　　　　　　18.通过 Vue 构造器传入的data选项必须是函数。

　　　　　　19.不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定；v-on:click.native监听原生事件。

　　　　　　20. .sync修饰符：一个自动更新父组件属性的 v-on 侦听器

　　　　　　　　<comp :foo.sync="bar"></comp>

　　　　　　　　当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

　　　　　　　　this.$emit('update:foo', newValue)