003 Vue 的基本语法

[A] mustach语法

　　mustache语法，也称为插值语法

　　　　使用方法

　　　　　　1. 在{{变量名}}中加入变量，即可在界面中直接替换成变量对应的值

　　　　　　2. 在{{表达式}}中加入表达式，如：

 　　　　　　　　{{name + " " + age}}, {{counter * 2}}

 

[B] v-once

　　　　行内属性，表示该标签内的变量生产一次后, 就不会再被改变

　　该指令后面不需要跟任何表达式(如之前的v-for后面是有表达式的)

　　该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

　　　　如：<div v-once>我的名字是：{{msg}}</div>

 

[C] v-html

　　　　有时候，我们的数据是后端返回的数据，可能是一段HTML代码，这是我们可以通过v-html直接渲染出来，这是{{}}无法实现的

　　<div v-html="url"></div>    // 返回：百度一下

　　<div>{{url}}</div>          // 返回<a href="www.baidu.com">百度一下</a>

 

[D] v-text

　　行内属性，效果和mustache很相似，也是用于将数据展示在界面上

　　<h2 v-text="text"></h2>     // 改标签被替换成变量text的内容

　　不够灵活，很少用

           

[E] v-pre

　　行内属性，表示该标签内的内容不被解析，就讲标签内的内容原封不动的展示在界面上

　　<h2 v-pre>{{msg}}</h2>      // 返回{{msg}}

　　应用很少

 

[F] v-cloak

　　cloak 斗篷

                示例：

                    <div id="app">

                        {{msg}}

                    </div>

                    new Vue({

                        el: "#app",

                        data: {

                            msg: "哈哈",

                        },

                    })

　　根据从上往下的执行顺序，页面上首先会显示{{msg}},然后vue被解析之后，页面显示为"哈哈".实际上这个过程很快，我们看不到{{msg}}

　　v-cloak添加到行内之后，在vue渲染之前，会存在，vue渲染之后这个行内属性会被清除掉

　　利用这个属性，我们可以设置渲染时前的样式，渲染之后自动消失