总结
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 是一个循环指令 如果循环的是数组 则会有两个属性 例如
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绑定的标签 只渲染一次