1. v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能。
2. v-text
v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样
以下两种写法效果一样
3. v-html
帮助我们绑定一些包含html代码的数据在视图上,比如:“hello,vue”,会解析html代码
否则会被当做字符串来处理
4. v-show
v-show 指令的取值为true/false,分别对应着显示/隐藏它就是用来控制元素的display css属
性的[display:none], 适用于频繁切换显示/隐藏
5. v-pre
会将html源码输出,不会解析渲染 效果等同于
6. v-if
设置为true的标签,成功渲染出来,而设置为false的标签,直接被一行注释代替了,并没有
被解析渲染出来。
v-show 和 v-if 两者的区别
如果需要频繁切换显示/隐藏的,就用 v-show ;
如果运行后不太可能切换显示/隐藏的,就用 v-if 。
v-else
两个标签:第一个使用 v-if 指令,并取值为false,第二个使用 v-esle指令,一旦第一个标签的
v-if 指令的值为true,被忽视的就是第二个
标签了。v-if 和 v-else 只有一个会被渲染出来。
v-else-if
用法同js原生中的if…elseif…elseif…else
7. v-cloak
数据延迟的时候将代码隐藏,不输出代码
8. v-for 遍历数组/对象
遍历数组
遍历对象
9. v-bind 绑定属性
绑定数组
绑定对象
10. v-on绑定事件 简写:@
v-on 修饰符
stop: 阻止事件冒泡
prevent 阻止浏览器默认行为
enter 按下enter键才会触发
once: 只触发一次回调
11. v-model 数据绑定
在文本框中输入什么 底下内容就是什么
v-model 修饰符
lazy 失去焦点后触发
.number 如果想自动将用户的输入值转为数值类型,可以将v-model添加number修饰符
.trim 如果要自动过滤用户输入的首尾空格字符,可以给v-model添加trim修饰符