VUE - 基础语法（文本、标签、属性）

Mustache语法：

{{msg}} 将被替代为数据对象上的msg属性值，数据对象中的msg属性更新，插值处的内容就更新：

<p id="test1">{{msg}}</p>
<!--解析结果 - START-->
<p>显示一行字</p><!--初始-->
<p>改一下吧</p><!--一秒后-->
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj1 = new Vue({
　　　　el : "#test1",
　　　　data : {
　　　　　　msg : "显示一行字"
　　　　}
　　});
　　setTimeout("obj1.msg='改一下吧'",1000);
</script>

{{msg}} 中的msg可以是表达式，但只能是单个语句：（所有参数都要遵照这一条）

<div id="test2">
　　<p>{{msg}}</p>
　　<p>{{msg.concat("加个尾巴")}}</p>
　　<p>{{msg?"有值哦":"没有值"}}</p>
　　<p>{{var msg = "哇塞"}}</p>
　　<p>{{if(msg){console.log("啦啦啦")}}}</p>
</div>
<!--因为后两句报错，整个标签不被显示，但我们还是看一下解析结果吧-->
<!--解析结果 - START-->
<div>
　　<p>写一行字</p>
　　<p>写一行字加个尾巴</p>
　　<p>有值哦</p>
　　<!--后面两句错啦-->
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj2 = new Vue({
　　　　el : "#test2",
　　　　data : {
　　　　　　msg:"写一行字"
　　　　}
　　});
</script>

{{msg}} 中的msg可以是对象的形式： 

<div id="test3">
　　<p>姓名：{{student.name}}</p>
　　<p>年龄：{{student.age}}</p>
</div>
<!--解析结果 - START-->
<div>
　　<p>姓名：傻屌</p>
　　<p>年龄：24</p>
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj3 = new Vue({
　　　　el : "#test3",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　age : 24
　　　　　　}
　　　　}
　　});
</script>

注意：这种插值方法只能用于纯文本，不能用于属性（属性用v-bind，后面说）。

 

v-text指令，传递文本：

{{msg}}在网速慢或者JS报错时，会直接在页面上被显示出来。

v-text和{{}}的作用相同，且在网速慢或JS报错时v-text直接不显示，可以避免尴尬😳。

<p id="test" v-text="'我叫'+student.name+'，今年'+student.age+'岁啦'"></p>
<!--解析结果 - START-->
<p>我叫傻屌，今年24岁啦</p>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　age : 24
　　　　　　}
　　　　}
　　});
</script>

 

v-html指令，传递HTML标签：

<div id="test">
　　<p v-text="student.name"></p>
　　<p v-text="student.image"></p>
　　<p v-html="student.name"></p>
　　<p v-html="student.image"></p>
</div>
<!--解析结果 - START-->
<div>
　　<p>傻屌</p>
　　<p><img src='shadiao.jpg'/></p><!--原样输出了文字-->
　　<p>傻屌</p>
　　<p>图片</p><!--正确显示了图片-->
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　image : "<img src='shadiao.jpg'/>"
　　　　　　}
　　　　}
　　});
</script>

 

v-bind指令，传递属性值：

列举几个常用的属性：

<div id="test">
　　<p><img v-bind:src="s.image"/></p>
　　<p><a v-bind:href="s.webhref">我想跳到{{s.webname}}</a></p>
　　<p><input type="button" v-bind:disabled="s.canNot" v-bind:value="s.canNotText"/></p>
　　<p><input type="button" v-bind:disabled="s.canCli" v-bind:value="s.canCliText"/></p>
</div>
<!--解析结果 - START-->
<div>
　　<p>正确显示图片</p>
　　<p><a href="http://www.baidu.com">我想跳到百度</a></p>
　　<p><input type="button" disabled value="我不能被点击"/></p>
　　<p><input type="button" value="我可以被点击"/></p>
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　s : {
　　　　　　　　image : "shadiao.jpg",
　　　　　　　　webhref : "http://www.baidu.com",
　　　　　　　　webname : "百度",
　　　　　　　　canNot : true,
　　　　　　　　canNotText : "我不能被点击",
　　　　　　　　canCli : false,
　　　　　　　　canCliText : "我可以被点击",
　　　　　　}
　　　　}
　　});
　　//注意：disabled传入true为不可点击，传入false为可以点击
</script>

比较值得注意的class属性值和style属性值：

<style>
　　.setFont{font-size:20px;color:green;}
　　.setBorder{padding:20px;border:1px solid black;}
</style>
<div id="test">
　　<p v-bind:style="styleObj">我是小号红字</p>
　　<p v-bind:style="{color:mycolor,fontSize:myfontSize}">我是大号蓝字</p>
　　<p v-bind:class="[classA,classB]">我既有字号，又有边框</p>
　　<p v-bind:class="hasFont?classA:classB">我只有字号</p>
　　<p v-bind:class="hasBorder?classB:classA">我只有边框</p>
</div>
<!--解析结果 - START-->
<div>
　　<p style="color:red;font-size:14px;">我是小号红字</p>
　　<p style="color:blue;font-size:20px;">我是大号蓝字</p>
　　<p class="setFont setBorder">我既有字号，又有边框</p>
　　<p class="setFont">我只有字号</p>
　　<p class="setBorder">我只有边框</p>
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　styleObj : {
　　　　　　　　color : "red",
　　　　　　　　fontSize : "14px"
　　　　　　},
　　　　　　mycolor : "blue",
　　　　　　myfontSize : "20px",
　　　　　　classA : "setFont",
　　　　　　classB : "setBorder",
　　　　　　hasFont : true,
　　　　　　hasBorder : true
　　　　}
　　});
</script>

v-bind还可以被缩写成":"： 

<div id="test">
　　<p :style="styleObj">我是小号红字</p>
　　<p :style="{color:mycolor,fontSize:myfontSize}">我是大号蓝字</p>
</div>
<!--解析结果 - START-->
<div>
　　<p style="color:red;font-size:14px;">我是小号红字</p>
　　<p style="color:blue;font-size:20px;">我是大号蓝字</p>
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　el : "#test",
　　data : {
　　　　styleObj : {
　　　　　　color : "red",
　　　　　　fontSize : "14px"
　　　　},
　　　　mycolor : "blue",
　　　　myfontSize : "20px"
　　}
});
</script>

 

另外几个与页面渲染相关的指令：

v-pre指令：跳过某元素和他的子元素的编译，可以用来显示原始Mustache标签。

v-cloak指令：使某元素保持某种指定行为，直到与该元素相关的实例编译结束。

v-once指令：只渲染元素和组件一次，之后重新渲染，该元素和组件均会被视作静态内容跳过。

<style type="text/css">
　　[v-cloak]{display:none;}
</style>
<div id="test">
　　<p v-pre>{{one}}</p><!--直接显示：{{one}}-->
　　<p v-cloak>{{two}}</p><!--obj编译完成后才显示：二号-->
　　<p v-once>{{three}}</p><!--始终显示：三号-->
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　one : "一号",
　　　　　　two : "二号",
　　　　　　three : "三号"
　　　　}
　　});
　　setTimeout("obj.three = '变一下'",1000);
</script>