Vue---day01---模板语法

模板语法

文本

前面常用的{{message}}就是一种最常用的叫做“Mustache”语法 (双大括号) 的文本插值方式,此时Mustache会将当前数据对象上的message的值动态更新插值处内容。

而v-once则可以只做第一次插入数据,然后就不再更新,但是请留意该节点上其他的数据绑定

		<div id="app9_1">
            {{message}}
        </div>
        <div id="app9_2">
            <span v-once>{{message}}</span>
        </div>
        <script>
            var app1 = new Vue({
                el:"#app9_1",
                data:{
                    message:"无v-once命令"
                },
                created:function(){
                    this.message="成功修改"
                }
            })
            var app2 = new Vue({
                el:"#app9_2",
                data:{
                    message:"有v-once命令"
                },
                created:function(){
                    this.message="成功修改"
                }
            })
        </script>

在这里插入图片描述
在简单的测试使用后,发现v-once是在网页加载后再去修改数据时,才会不刷新,但是仍然可以在Vue对象实例中加入生命周期钩子函数来改变初始的property的值。

HTML

用双大括号加入的数据将会被解释成文本,而不是真正的HTML,若要插入HTML,则需要v-html指令

		<div id="app">
            <p v-html="message"></p>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    message:"<h1>这是一个一级标题</h1>"
                }
            })
        </script>

这个 p 的内容将会被替换成为 message 值 ,直接作为 HTML——会忽略解析 property 值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。(在站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值)

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值