v-bind 绑定attribute 例 v-bind:title="message" 简写:title="message" 若某个属性的值是 null、undefined （data中未定义）或 false ，则该属性不会被包含在渲染出来 【属性 不要使用驼峰命名 除非是props】
v-on 绑定事件 简写@click='reverseMess' 内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
v-once 数据只会在第一次时被渲染
v-html 渲染带html标签的内容 <p v-html="word"></p> data: {word: '<span style="color:red">内容</span>'}
v-if 条件渲染 可将大段的html代码写在template里，设置v-if ，template不会被渲染 (v-if v-else-if v-else )
v-for 列表渲染 例 v-for="(item,index) in list" :key="index" 或者将in改为of key为字符串或者数值类型 遍历对象（value,key,index) in obj
为什么要用key？
是和vue的虚拟dom和diff算法有关 主要为了高效的渲染dom
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<input type="text" v-model="mess"> 实际是:value="mess" @input="mess=$event.target.value"的语法糖
注意：不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
动态参数：
可以用方括号括起来的 JavaScript 表达式作为一个指令或事件的参数(v-bind和v-on)，动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。
v-bind:class 可以与普通的class共存
1值可以是一个对象 也可是一个返回对象的计算属性
2也可是数组、3也可用三目运算符、4也可使用 数组+对象语法
v-bind:style
1可以是js对象 2data里的对象或者返回对象的计算属性 3数组（多个样式对象）
v-if与v-show:
v-if若为false 就不会渲染到页面，v-show都会渲染到页面 为false时只是display值为none，频繁的切换用v-show，条件很少改变用v-if，v-show 不支持 <template> 元素，也不支持 v-else。
v-if与v-for:
v-for 具有比 v-if 更高的优先级。可在最外层套v-if
v-for：可遍历数组、对象 (值、键、索引)、整数 大段的代码也可用template来包裹 不会被渲染
数组的更新检测：
变异方法：调用该方法后会改变原本的数组 触发视图更新 push、pop、 shift、 unshift、 splice 、sort、 reverse
非变异方法：调用该方法不会改变原来数组 但可以新数组替换旧数组 concat、slice、map、filter
无法检测的数组变化：
1.利用索引直接设值：vm.items[0]=值
解决办法：用Vue.set(target、key、value) target：要更改的数据源（对象或数组）key：下标 value：修改后的值（多个用对象） 或者实例名.$set 或者用splice
对象的话 实例名.$set / Vue.set(this.obj,'age',1)给对象添加一个新属性并赋值 或者 this.obj=Object.assign({},this.obj,{age:1})
也可用splice(0,1,'yhx')
2.修改数组的长度：vm.items.length=1
解决办法：用splice方法 （会改变原数组）
显示过滤排序后的结果：
不改变原数据的话 采用计算属性
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 可以使用一个方法
在组件中使用v-for：
is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 <ul> 元素内只有 <li> 元素会被看作有效内容。这样做实现的效果与 <todo-item> 相同，但是可以避开一些潜在的浏览器解析错误。
事件修饰符：
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节
.stop（阻止冒泡）.prevent（阻止默认事件）.capture（使用事件捕获）.once（只触发一次）.passive（默认行为将会立即触发）.self（只在当前元素本身触发）
注意：修饰符可以串联但顺序很重要 也可只有修饰符没有事件处理函数
v-model:
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
text 和 textarea 元素使用 value 属性和 input 事件； 文本插值不会生效应用v-model
checkbox 和 radio 使用 checked 属性和 change 事件；切换时true-value="yes" false-value="no"
select 字段将 value 作为 prop 并将 change 作为事件。 推荐使用一个默认禁用未选择项
v-model修饰符：
.lazy 让事件在change上触发 而不是input
.number 将用户输入转为数值类型
.trim 自动过滤用户输入的首尾空白字符
自定义组件：
data必须是一个函数 因此每个实例可以维护一份被返回对象的独立的拷贝
template用字符串模板 若不使用babel或ts之类的工具 ie不支持，请使用折行转义字符
动态切换组件is：
<component :is="which"></component>
全局注册组件与局部注册组件：
全局： Vue.component('组件名',{template:``......})
局部：在一个实例的components对象选项里注册 ’组件名‘:{template:``,data(){}......}
props：
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名,单个单词则不需要 如：title
其次props也可指定类型，以对象的形式列出，键为prop的名称、值为prop的类型；
向子组件传递数字、布尔、数组、对象需用v-bind ，否则传递过去的是string (type of 查看)
子组件不能改变props，可以定义一个data将props赋值，也可使用计算属性；
父组件传递子组件的class和style 会合并其子组件的相关属性（使用插件的时候尤为重要），其他的attribute 将替换掉子组件的相关属性
如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false（不会影响 style 和 class 的绑定。）
props验证：
自定义事件：使用 kebab-case 的事件名。短横线命名
将原生事件绑定到组件：
.native修饰符 $listeners
.sync修饰符：子组件改变带.sync的prop值，会同步改变父组件中绑定的值 ，实现双向绑定
:foo.sync='msg' => :foo='msg',@update:foo='val=>msg=val'
this.$emit=('update:foo',参数)
自定义组件之间的通信：
父子之间：子组件上自定义一个事件@自定义事件名=’处理函数‘，内部调用该事件用$emit('自定义事件名')来调用，若传参 $emit(自定义事件名,参数)， 事件吹函数是内联可以用$event 访问到这个参数 ，事假处理函数也可以是一个methods里的方法传参
使用v-model，接收一个value的props实现双向绑定 <input type="text" :value='value' @input="$emit('input',$event.target.value)">
插槽： 组件间书写的内容要被渲染，（也可是html标签）就要在组件模板中设置插槽，也可在插槽中设置默认内容，若组件无内容，默认内容就会被渲染出来。<slot>默认内容</slot> 单个slot
具名slot：也可与单个slot共存 不带name的slot 相当于v-slot:default
父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。
作用域插槽：是一种特殊的slot，子组件设置了插槽，该插槽访问了子组件所维护的数据，在父组件中能访问到该数据
v-slot:default='mySlotProps' 可简写为v-slot=’mySlotProps‘或者#default='mySlotProps'
