1. v-text
作用：向其所在的节点中渲染文本内容
注：v-text会替换掉节点中的内容，{{xxx}}则不会
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-bind：单向绑定，可简写为:xxx
v-model：双向数据绑定
v-for：遍历数组、对象、字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染
v-else：同理
v-show：同理
-->
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name">你好，</div>
<div v-text="str"></div>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
const vm = new Vue({
el: '#root',
data: {
name: '孙笑川',
str: '<h3>孙笑川</h3>'
}
})
</script>
</body>
</html>2. v-html
作用：向指定节点渲染包含html结构的内容
与插值语法的区别：1. v-html会替换掉节点中所有的内容，{{xxx}}不会；2. v-html可以识别html结构
注：存在安全性问题，1. 在网站上动态渲染任意html很危险，容易导致XSS攻击；2. 提交内容上不使用html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-html指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>你好，{{name}}</div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
const vm = new Vue({
el: '#root',
data: {
name: '孙笑川',
str: '<h3>孙笑川</h3>'
}
})
</script>
</body>
</html>3. v-cloak
定义：本质是一个特殊属性（没有值），Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合该指令，可以解决网速慢等原因引起的页面直接展示{{xxx}}的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloak指令</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="root">
<div v-cloak>你好，{{name}}</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '#root',
data: {
name: '孙笑川',
}
})
</script>
</body>
</html>4. v-once
定义：v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可用于性能优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-once>初始值：{{n}}</h2>
<h2>当前值：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '#root',
data: {
n: 1
}
})
</script>
</body>
</html>5. v-pre
定义：跳过其所在节点的编译过程
可以利用该指令跳过：没有使用指令语法、插值语法的节点，加快编译
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-pre指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-pre>你好，孙笑川</h2>
<h2>当前值：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
//关闭开发环境提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el: '#root',
data: {
n: 1,
}
})
</script>
</body>
</html>
评论 (0)