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>
