VUE的内置指令

**我们这里介绍的内置指令主要是这几个：v-text、v-html、v-cloak、v-once、v-pre。
1、v-text
更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

{{msg}}
作用：向其所在的节点中渲染文本内容。
v-text与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

和小明

data:{ name1:'小华' } 在这里，最后显示的是“小华”，在这里，小华会替换掉div里面的文本节点“和小明” 注意：这个指令是不能解析标签

2、v-html
作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
但是在使用的时候我们需要注意一些细节：
（1）在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
（2）在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

3、v-cloak
（1）本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
（2）使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕。
使用方式如下：
[v-cloak] {
display: none;
}

4、v-once（不需要表达式）
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

5、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>内置指令</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>

<body>
                  
                  <div id="root">
                                    <!--v-text的使用-->
                                    <h1>v-text的使用</h1>
                                    <div>{{name}}</div>
                                    <div v-text="name1">和小明</div>
                                    <div v-text="name"></div>
                                    <div v-text="str"></div>
                                    <!--v-html的使用-->
                                    <h1>v-html的使用</h1>
                                    <p>小华是一个中国人，他位于{{province}}{{city}}{{district}}!</p>
                                    <div v-html="str_p"></div>
                                    <div v-html="str_url"></div>
                                    
                  </div>
                  <script>
                                    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

                                    new Vue({
                                                      el: '#root',
                                                      data: {
                                                                        name: '我爱你中国',
                                                                        name1:'小华',
                                                                        str: '中华人民共和国万岁！
',
                                                                        province:'湖北省',
                                                                        city:'武汉',
                                                                        district:'江夏区',
                                                                        str_p:'小明是一个中国人，他也位于湖北省武汉江夏区!
',
                                                                        str_url:'同城旅行'
                                                      }
                                    })
                  </script>
</body>

</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

第二个代码：

<!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>v-cloak</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
                  <style>
                                    [v-cloak]{
                                                      display: none;
                                    }
                  </style>
</head>

<body>
                  <div id="root">
                                    <h2 v-cloak>{{name}}</h2>
                  </div>
                  <script>
                                    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
                                    new Vue({
                                                      el:'#root',
                                                      data:{
                                                                        name:'我希望世界疫情可以结束'
                                                      }
                                    })
                  </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第三个代码如下：

<!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>内置指令2</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>

<body>
                  <div id="root">
                                    <!--v-once-->
                                    <h1>v-once的使用</h1>
                                    <h2 v-once>今天是2022年9月{{n}}日</h2>
                                    <h2>每过一天,日期就会改变,那么就是2022年9月{{n}}日</h2>
                                    <button @click="n++">点我日期加1</button>
                                    <!--v-pre-->
                                    <h1>v-pre的使用</h1>
                                    <h2 v-pre>美丽的湖北</h2>
                                    <h2>小明的生日是2009-10-{{d}}</h2>
                                    <button @click="d++">d+1</button>
                  </div>
</body>
<script type="text/javascript">
                  Vue.config.productionTip = false

                  new Vue({
                                    el: '#root',
                                    data: {
                                                      n: 1,
                                                      d:1
                                    }
                  })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

相关阅读:
vue中预览zip(完整版)
C++指针解读（2）-- 指针变量
 大学生川菜网页制作教程学生HTML静态美食菜品网页设计作业成品简单网页制作代码学生美食网页作品免费设计
 作用域和作用域链
 Mybatis plus无介绍快使用，MybatisPlus3.5版本设置批量插入附源码（十一）
备忘录模式（Memento）
【微积分】算法数学基础之微积分
 远程连接服务器
 Python数据挖掘实用案例——自动售货机销售数据分析与应用
 尚硅谷MySQL学习笔记
原文地址：https://blog.csdn.net/weixin_43228946/article/details/126876416