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>