Vue指令大全

vue 的常见指令

1. v-text 解析文本
   数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；
2. v-html 解析html标签
   类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHTML属性；
3. v-on 绑定事件 函数必须写在methods里面 ,@click (简写方式)
   v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。方法必须写在methods里面
4. v-model 双向数据绑定
   作用：在表单元素上创建双向数据绑定
   说明：监听用户的输入事件以更新数据
   v-model指令是数据的双向绑定,该指令绑定的是value值，v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
5. v-for 循环 格式 v-for="字段名 in(of) 数组json"
   用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
   有下面两种遍历形式
   //使用in，index是一个可选参数，表示当前项的索引
   //使用of 注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
6. v-bind 动态绑定 作用： 及时对页面的数据进行更改 简写方式":"
   v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
7. v-bind:class 三种绑定方法
   对象型 ‘{red:isred}’ 2、三目型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
8. v-show 显示 隐藏 传递的值为布尔值 true false 默认为false
   v-show指令主要用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。
   但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。
   注意：v-if有更高的切换开销，v-show有更高的初始渲染开销。
   因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
9. v-if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为false
   v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
   yes
   如果属性值show为true，则显示。否则，不会渲染这个元素。
10. v-else-if 必须和v-if连用
11. v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

    	yes
    	No
    

12. v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
13. v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
14. v-cloak 防止闪烁
    这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
    防止刷新页面，网速慢的情况下出现{{ message }}等数据格式
15. v-pre 把标签内部的元素原位输出
    跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

vue指令修饰符

2. v-on指令修饰符

   1. .stop - 调用 event.stopPropagation()，阻止事件继续传播 也就是阻止冒泡事件
      

   2. .prevent - 调用 event.preventDefault()，.prevent阻止默认事件
      element

   3. .capture - 添加事件侦听器时使用 capture 模式。
      使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
      添加事件监听器时使用事件捕获模式
      即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

      ...
       
      

   4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

   5. .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
      滚动事件的默认行为 (即滚动行为) 将会立即触发
      而不会等待 onScroll 完成 -->
      这其中包含 event.preventDefault() 的情况

      ...
      

      注意：不要把 .passive 和 .prevent 一起使用，
      因为 .prevent 将会被忽略，
      同时浏览器可能会向你展示一个警告。
      请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

   6. .once - 只触发一次回调，也就是说这个函数只触发一次
      点击事件将只会触发一次

3. v-model修饰符
   1.Lazy修饰符
   lazy：在改变后才触发,也就是说只有光标离开input输入框的时候值才会改变
   lazy：在改变后才触发（也就是说只有光标离开input输入框的时候值才会改变）
   2. Number
      number：将输出字符串转为Number类型·,虽然type类型定义了是number类型，但是如果输入字符串，输出的是string
   3. Trim自动过滤用户输入的首尾空格