vue指令-蒲公英云

vue指令

电玩女神 2023-02-22 13:56 135阅读 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 是一个循环指令如果循环的是数组则会有两个属性例如

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

    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 } 模式添加侦听器

    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绑定的标签只渲染一次