VUE常見指令
通常指令（Directives）是指帶有v-屬性的特殊屬性。在Vue給HTML元素增加了自定義屬性你，它們都是以"v-"開頭了
指令
v-text： 更新元素的textContent，如果要更新部分的textContent，需要使用{{}}
插值
v-html：更新元素的innerHTML
v-show：根據表達式的真假切換元素的display css屬性
v-if：根據表達式的真假條件渲染元素
v-else：與編程語言中的else一樣
v-else-if：與編程語言中的else-if一樣
v-for： 可循環數組，對象，字符串，數字
v-on：綁定事件監聽器。事件類型由參數決定
v-bind：動態的綁定一個或多個屬性，或者一個組件prop到表達式
v-model：表單元素或者組件上創建雙向綁定
v-pre：跳過這個元素和他子元素的編譯過程。可以用來顯示原始Mustache標簽。跳過大量沒有指令的節點會加快編譯
v-cloak：這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
v-once:只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app1">
<!-- v-text -->
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
<!--v-html，就是innerHTML-->
<div v-html="htmltag"></div>
<!--v-show：根據表達式之真假值，切換元素的 display CSS 屬性。-->
<div v-show="isShow">我是可以看見的div，使用v-show</div>
<!--v-if：根據表達式的值的真假條件渲染元素-->
<div v-if="Math.random()>0.5">
大於0.5
</div>
<div v-else>
小於0.5
</div>
循環數組：
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
循環數組：
<ul>
<li v-for="(item,index) in arr">{{index}}:{{item}}</li>
</ul>
循環對象：
<ul>
<li v-for="(val,key) in obj">{{key}}:{{val}}</li>
</ul>
循環對象：
<ul>
<li v-for="(val,key,index) in obj">{{index}}:{{key}}:{{val}}</li>
</ul>
循環字符串：
<ul>
<li v-for="(val,index) in str">{{index}}:{{val}}</li>
</ul>
循環數字：
<ul>
<li v-for="(val,index) in num">{{index}}:{{val}}</li>
</ul>
<input type="button" value="測試" v-on:click="func()" />
<img v-bind:src="imgsrc" v-bind:style="imgcss" />
<input type="text" v-model="inputtxt" />
<span>您在文本框中輸入的內容是：{{inputtxt}}</span>
<span v-pre>{{ msg }}</span>
<div v-cloak>
{{ msg }}
</div>
<span v-once>This will never change: {{msg}}</span>
</div>
</body>
</html>
<script type="text/javascript" src="vue.min.js" ></script>
<script type="text/javascript">
/*
v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
v-html：更新元素的 innerHTML
v-show：根據表達式之真假值，切換元素的 display CSS 屬性。
v-if：根據表達式的值的真假條件渲染元素（與編程語言中的if是同樣的意思）
v-else：表示否則（與編程語言中的else是同樣的意思）
v-else-if：（與編程語言中的else if是同樣的意思）
v-for：可以循環數組，對象，字符串，數字，
v-on：綁定事件監聽器。事件類型由參數指定。
v-bind：動態地綁定一個或多個屬性（特性），或一個組件 prop 到表達式。
v-model：在表單控件或者組件上創建雙向綁定
v-pre：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標簽。跳過大量沒有指令的節點會加快編譯。
v-cloak：這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。
v-once:只渲染元素和組件一次。隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。
*/
let v1 = new Vue({
el:"#app1",
data:{
msg:"hello vue",
htmltag:"<p style='background-color:red'>我是一個紅色的段落</p>",
isShow:true,
arr:[12,23,34],
obj:{
name:"張三",
age:12,
sex:"男"
},
str:"hello",
num:15,
imgsrc:"img/timg2.jpg",
imgcss:{"width":"120px","height":"80px"},
inputtxt:""
},
methods:{
func:function(){
alert('點擊了按鈕');
}
}
});
</script>