vue指令

电玩女神 2023-02-22 13:56 5阅读 0赞

## 总结 ##

*  v-text

*  v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上

*  v-html

*  v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示

*  v-show

*  v-show 是一个控制元素显示隐藏的指令 他是通过css样式（display:none）控制dom的显示隐藏

*  v-if

*  v-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom

*  v-else-if

*  v-else-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom

*  v-else 只是一个v-if取反的结果
 *  v-for

*  v-for 是一个循环指令 如果循环的是数组 则会有两个属性 例如

<div v-for="(item, index) in arr" :key="index"></div>
    
      
       
      
       
        1

*  第一个变量是数组的数组项 第二个是数组的索引值 建议在for循环的dom中绑定key
 *  v-for 如果循环的是一个对象 则会有三个属性 例如

<div v-for="(value, key, index) in obj" :key="index"></div>
    
      
       
      
       
        1
        2

*  v-on

*  v-on 是一个事件绑定的指令 这个指令可以缩写成 @ 这里以点击事件为例
 *  修饰符：

*  stop - 调用 event.stopPropagation()。
 *  prevent - 调用 event.preventDefault()。
 *  capture - 添加事件侦听器时使用 capture 模式。
 *  self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
 *  \{keyCode | keyAlias\} - 只当事件是从特定键触发时才触发回调。
 *  native - 监听组件根元素的原生事件。
 *  once - 只触发一次回调。
 *  left - (2.2.0) 只当点击鼠标左键时触发。
 *  right - (2.2.0) 只当点击鼠标右键时触发。
 *  middle - (2.2.0) 只当点击鼠标中键时触发。
 *  passive - (2.3.0) 以 \{ passive: true \} 模式添加侦听器

<button v-on:click.修饰符="fun"></button>
    <button @click.修饰符="fun"></button>
    
      
       
      
       
        1
        2

*  v-bind

*  v-bind 是一个属性的绑定指令 该指令可以绑定标签已经存在的属性 也可以绑定一个自定义属性（自定义属性不能使用驼峰命名法建议也不要写成 aa-bb 的形式）
 *  还可以通过给父组件添加自定义属性的方式将父组件的值传递给子组件
 *  v-bind可以简写成 :
 *  属性加上v-bind指令可以绑定一个变量 如果没有v-bind则值为一个字符串

*  v-model

*  v-model 是一个数据双向绑定的指令 通常会用在表单中
 *  v-model 在vue 2.0（3.0的以下版本） 通过 object.defineproperty() 实现 在object.defineproperty中有两个方法 set 和 get
 *  给变量设置值得过程就是 set的过程 而 将变量的值渲染的过程 就是 get
 *  在vue 3.0 中 通过 es6的 proxy方法进行数据劫持 proxy是对object.defineproperty的一个完善 其中也内置着 set和get方法
 *  给变量设置值得过程就是 set的过程 而 将变量的值渲染的过程 就是 get

*  v-slot

*  他的值可以是插槽的名称用来选中特定的插槽 也可以是一个对象 这个对象会包含 在子组件中的插槽中绑定的自定义属性的值

*  v-pre

*  跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

*  v-cloak

*  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 \[v-cloak\] \{ display: none \} 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

*  v-once

*  通过v-once绑定的标签 只渲染一次