Vue中的常见指令以及修饰符

Vue中的常见指令：

* v-text : 不能识别带标签的内容，会将整个标签中的内容完整替换掉

* v-html : 可以识别到内容中的标签

* v-pre : 不解析该标签中的内容，以原本形式呈现

* v-cloak : 解决vue加载中显示源代码问题，只能写在vue实例绑定的标签上，没有加载完之前会有一个v-cloak属性存在，加载完之后属性消失

* v-once : 只对当前标签内的内容做一次解析，之后不管发生任何变化都不会在响应

* v-if : 条件渲染指令，根据条件的真假添加或删除对应的元素,真表示添加 假表示删除

* v-else : 不需要给任何值，只写属性名即可，但是必须配合v-if来使用

* v-else-if : 必须配合v-if来使用

* v-show : 根据条件的真假来显示和隐藏元素，利用的是css中的display属性进行的显示和隐藏

 

* 当该元素显示与隐藏切换不频繁时，使用v-if 如果需要频繁切换显示与隐藏则使用v-show

* v-if有更高的切换性能消耗，v-show有更高的初始渲染消耗

 

* v-bind : 用来动态绑定一个或者多个属性，常用绑定class，style，src等

  绑定class类的实现:

    1. 直接绑定一个数据 ： 这样会将该数据中的值作为类名绑定，值发生变化，类名会跟着变化

    2. 绑定一个数组形式 ：同时添加多个类名时语法，数组中的每一项都是数据中的名字，会将该数据的值依次作为类名显示

    3. 绑定一个对象形式： 对象的属性名就是类名，属性值是一个boolean类型的值，如果为true表示添加该类，false表示删除这个类

  v-bind可以简写成 :   语法糖

* v-on: 主要作用就是绑定一个事件 简写 @

    如果不需要传递参数，则可以省略，如果需要传递参数，则需要加小括号，在小括号中传递需要的内容

    如果不加小括号，则函数会默认传递一个参数，这个参数就是event对象

    如果加小括号，则事件对象不会自动传递，我们需要手动传递一个$event的值，才能获取到event对象

    v-on中的事件修饰符:

        .stop  阻止事件流

        .prevent  阻止默认事件

        .native  监听组件根元素的原生事件

        .once  只触发一次事件

* v-for 列表渲染

  可以遍历对象、数组、字符串以及数字 可以使用 for in 语法  也可以使用 for of 语法

  每一次遍历可以的到两个参数 item index

* v-for和v-if能同时作用于一个标签吗？

  能但是不推荐，因为v-for要比v-if有更高的优先级，这样就意味着v-if会在重复的运行在每一次v-for循环中，这样对于节点的性能消耗是有影响的，但是如果我们需要其中部分内容渲染,这样的语法又是可以使用的

* v-for使用时 还需要注意一点 就是需要为每一个v-for提供一个唯一的key值，为每一个迭代的内容设置一个唯一标识符，这样在数组数据发生变化时，vue会根据唯一的key值来进行比对渲染，只会将key值发生变化的部分进行操作，这样会大大提高页面渲染效率

* v-model : 应用于表单的双向数据绑定

   实际上就是v-bind:value 及 v-on:input 两个指令结合的语法糖

   v-model的修饰符：

   .lazy   :将双向绑定的input事件更改为change事件，也就是当表单失去焦点时才会触发响应

   .number ：将用户输入的内容转换为number类型，只对纯数字有效

   .trim   ：去除用户输入的首尾空格