vue-11 vue内置指令总结
程序员文章站
2022-05-16 18:35:29
...
参考：
https://cn.vuejs.org/v2/api/#
指令
- v-html 内容按普通 HTML 插入，可防止 XSS 攻击
- v-show 根据表达式的真假值，切换元素的 display CSS 属性来显示隐藏元素
- v-if 根据表达式的真假值，来渲染元素
- v-else 前面必须有 v-if 或 v-else-if
- v-else-if 前面必须有 v-if 或 v-else-if
- v-for 遍历的数组或对象
- v-on 绑定事件监听器
- v-bind 用于绑定元素属性
- v-model 在表单控件或者组件上创建双向绑定
- v-once 一次性插值，当后面数据更新后视图数据不会更新
- v-pre 可以用来显示原始插入值标签 {{}} 。并跳过这个元素和它的子元素的编译过程。加快编译。
例如
：网页中的一篇文章，文章内容不需要被
Vue
管理渲染，则可以在此元素上添加
v-pre
忽略文章编译提
高性能。
- v-text
等价于 {{}} 用于显示内容，但区别在于:
{{}} 会造成闪烁问题， v-text 不会闪烁
- 如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理
- v-cloak
如果想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理，步骤如下：
1. 在被 Vue 管理的模板入口节点上作用 v-cloak 指令
1.
添加一个属性选择器
[v-cloak]
的
CSS
隐藏样式：
[v-cloak] {display: none;}
原理：默认一开始被
Vue
管理的模板是隐藏着的，当
Vue
解析处理完
DOM
模板之后，会自动把这个样式去
除，然后就显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- 1、{{}} 会造成闪烁现象，v-text不会 -->
<!-- 2、{{}} 若还想使用，又不想有闪烁效果，使用v-cloak处理 -->
<h3>{{message}}</h3>
<h3>{{message}}</h3>
<h3>{{message}}</h3>
<h3 v-text="message"></h3>
<h3 v-text="message"></h3>
<h3 v-text="message"></h3>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: "hello,Cyz"
}
})
</script>
</body>
</html>