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 插值，绝不要对用户提供的内容使用插值)