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 之类的错误。

vue生命周期

动态参数：

可以用方括号括起来的 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

            父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。
            作用域插槽：是一种特殊的slot，子组件设置了插槽，该插槽访问了子组件所维护的数据，在父组件中能访问到该数据

mySlotProps 是个包含所有插槽属性的对象

                            v-slot:default='mySlotProps' 可简写为v-slot=’mySlotProps‘或者#default='mySlotProps'