Vue學習第一天
第一步明確了MVC和MVVM的項目結構的特點，MVC是模型，控制器，視圖三者的統一，同時也是我們經常用的結構，而MVVM，也是三個部分的結合體M, V, VM,其中V仍舊爲視圖，不過在此處，更加明確的指出了是HTML，M指的是我們所要渲染到V中的數據，VM指的是我們在數據和頁面之間的管理者
下面介紹使用VUE的步驟：
- 在HTML中引用vue.js
- 編寫vue實例，控制頁面結構
就這兩步，就是今天學習的內容，不過展開講內容還是挺多的，首先，對於一個vue實例主要有以下幾個部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="text1">
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<div v-html="msg1"></div>
<h2 v-bind:style="mycolor">{{msg}}</h2>
<input v-model="msg" />
<button v-on:click="show6">按鈕</button>
</div>
<script>
var vue = new Vue({
el:'#text1', //el是element的簡稱，用來指定，當前vue實例控制的區域
data:{ //data裏面包含需要用到的數據
msg:"我的一個道姑朋友",
msg1:"<h2>我的一個道姑朋友</h2>",
mycolor:"color: blue;"
},
methods:{ //這裏定義用到的方法，可以直接調用
show6:function(){
alert("我的一個道姑朋友");
}
}
})
</script>
</body>
</html>
首先，示例中的el對應着當前VUE實例控制的範圍，多使用選擇器指定，接下來的data則是對應需要渲染到頁面的數據，下面還有可能會有methods(這個沒寫出來，後面會有例子)，表示頁面中會用到的各種方法。
下面介紹應用於頁面的幾個常用標籤
-
{{text}}插值表達式
-
v-text
-
v-html
第一種和第二種都是像頁面渲染數據用的（插值表達式更靈活），而他們的數據來源於data， 第三個則是可以向頁面渲染html代碼段
下面再介紹幾個常用標籤 -
v-bind:用於給頁面元素綁定屬性
-
v-on：用於給頁面元素綁定方法
值得一提的是，v-on指定的方法，就寫在vue實例中的methods中，在這個方法中，我們可以調用實例中data模塊中的數據，但是要依賴於this變量，具體的演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跑馬燈</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="test1">
<button v-on:click="lang">浪起來</button>
<button v-on:click="wen">穩住</button>
<h3>{{msg}}</h3>
</div>
<script>
var vue = new Vue({
el:'#test1',
data:{
msg:"猥瑣發育，別浪",
clockid:null
},
methods:{
lang(){
if(this.clockid!=null){
return ;
}
//在vue實例內部，如果需要調用自身的data和method需要使用this關鍵字
//使用函數以後this就指向上一個function，也就無法訪問msg,所以使用箭頭函數
this.clockid = setInterval(()=>{
var head = this.msg.substring(0, 1);
var tile = this.msg.substring(1);
this.msg = tile + head;
}, 400)
},
wen(){
if(this.clockid!=null){
clearInterval(this.clockid);
this.clockid = null;
this.msg = "猥瑣發育，別浪";
}
}
}
})
</script>
</body>
</html>
值得一提的是，如果函數中在套用函數，由於作用域的問題，我們不能直接用this，而是需要使用()=>即箭頭函數，解決此問題
接下來介紹三個分支循環標籤
- v-if 如果條件成立，創建標籤，否則銷燬標籤
- v-show 如果條件成立，顯示標籤，否則隱藏標籤
- v-for 進行循環操作
下面是演示代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>判斷頁面</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="test4">
<h2 v-if="flag">我的一個道姑朋友</h2>
<h2 v-show="flag">我的一個道姑朋友</h2>
<button v-on:click="push">切換狀態</button>
</div>
<script>
//v-if每次都會刪除重建元素
//v-show只是隱藏顯示元素
var vue = new Vue({
el:'#test4',
data:{
flag:true
},
methods:{
push:function(){
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
前兩個標籤都可進行標籤的隱藏和顯示，不過遠離不太相同
