Vue 入門
Vue.js 是一構建用戶界面的MVVM框架 ，只關註視圖層
Vue將DOM和數據綁定起來，一旦創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相應地更新。這樣就減少了不必要的DOM操作提高渲染效率，讓前端程序員只需要關心業務邏輯不再關心DOM是如何渲染的
MVC和MVVM的區別：MVC是後端分層開發概念，MVVM是前端視圖層的概念，主要關註於視圖層分離，也就是說MVVM把前端的視圖層分為了三部分Model、View、ViewModel
相關介紹、教程和下載使用關註Vue官網
示例
<!DOCTYPE html>
<html lang="en">
<
基本指令
v-bloak 這個指令保持在元素上直到關聯實例結束編譯，和CSS規則如 [v-cloak]{ display: none } 一起用時，這個指令可以隱藏未編譯的Mustache標簽
Vue實例編譯前，頁面會顯示{{ msg }}，不想它顯示，可用v-bloak配合CSS來隱藏
<div id="app" v-bloak>{{ msg }}</div>
v-text 和 {{ }} 插值表達式一樣會把數據插入到元素裏，不同的是v-text會覆蓋整個元素的內容，而插值表達式只會替換自己位置的字符
<div id="app" v-text="msg"></div>
v-html 將數據插入到元素裏，並且會識別標簽，v-text和v-html的區別就像innerText和innerHTML
<div id="app" v-html="msg"></div>
v-bind 用於綁定屬性，如想插入數據到title屬性中，使用插值表達式是不行的，此時就要用v-bind來綁定屬性，此指令可簡寫為 :
v-bind中可寫合法的js表達式，msg就相當於變量，所以可拼接字符串
<input type="button" v-bingd:title="msg" value="按鈕">
<input type="button" :title="msg" value="按鈕">
<input type="button" :title="msg+‘123‘" value="按鈕">
v-on 事件綁定機制，很像原生js在標簽中註冊事件 onclic=“show()” 的方式，只不過現在使用vue的方式來綁定事件。可簡寫為 @
事件老是無法觸發，檢查了多遍後才發現，input標簽要放在View中，也就是el指定的那個區域，否則v-on:指令無效
<div id="app">
<input type="button" value="按鈕" v-on:click="show">
</div>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {
msg: ‘123‘
},
methods: { //這個methods屬性中定義了當前Vue實例所有可用的方法
show: function () {
alert(‘Hello‘)
}
}
})
</script>
事件修飾符，綁定事件時可阻止事件冒泡、默認行為
.stop 阻止冒泡
.prevent 阻止默認行為
.capture 使用事件捕獲模式，也就是反向冒泡
.self 只有當事件在該元素本身時才觸發，隔絕其他元素對自身的冒泡，類似 jQuery中的mouseenter事件
.once 事件只觸發一次，底層可能是事件觸發後進行了事件解綁
<input type="text" value="按鈕" v-on:click.stop="show">
v-model 實現表單元素和Model中數據的雙向綁定，只能用於表單元素。v-bind只是單向綁定，如在文本框中，v-bind:value="msg" 後，msg的值會出現在文本框中，但這只是單向綁定，修改文本框中的值後msg值也跟著改變，這才是雙向綁定
註意v-model後沒有冒號也不跟屬性，直接寫等於
<input type="text" v-model="msg">
v-for 用來遍歷數組、對象甚至數字
<!--遍歷數組，list為data裏的名為list的數組-->
<p v-for="item in list">{{ item }}</p>
<!--可以加第二個參數，(元素，索引)-->
<p v-for="(item,i) in list">{{ item }}索引是{{ i }}</p>
<!--如果是遍歷對象的話，可以有三個參數，(值，鍵，索引)-->
<p v-for="(val,key,i) in obj">值是{{ val }},鍵為{{ key }},屬性索引為{{ i }}</p>
<!--如果是遍歷數字，則從1開始而不是0-->
<p v-for="n in 10">{{n}}</p>
有相同父元素的子元素必須有獨特的 key，重復的 key 會造成渲染錯誤
key屬性值只能是number或string，而且因為key是屬性所以也要用v-bind來綁定
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.name}}的id為{{item.id}}
</p>
v-if 根據表達式的真假來渲染元素
v-show 根據表達式的真假切換元素的display CSS屬性，都能實現元素的顯示隱藏，不同的是v-if是通過刪除添加DOM元素的方式，v-show是通過CSS的方式，v-if有較高的切換性能消耗，v-show有較高的初始渲染消耗
所以如果元素要頻繁地切換，最好用v-show，如果元素可能永遠都不會被顯示出來給用戶看，則推薦用v-if
<input type="button" @click="flag = !flag">
<h3 v-if="flag">v-if控制的h3</h3>
<h3 v-show="flag">v-show控制的h3</h3>
Vue操作樣式
Vue中使用class樣式，由於class也是標簽屬性，所以要用v-bind指令來綁定數據
<!--原生寫法-->
<h1 class="red thin"> </h1>
<!--傳遞一個數組，裏面是類樣式名-->
<h1 :class="[‘thin‘, ‘italic‘]"> </h1>
<!--在數組中使用三元表達式,flag為data中定義的布爾類型屬性-->
<h1 :class="[‘thin‘, ‘italic‘, flag?‘active‘:‘‘]"> </h1>
<!--在數組中使用對象來代替三元表達式，提高代碼的可讀性-->
<h1 :class="[‘thin‘, ‘italic‘, {‘active‘:flag} ]"> </h1>
<!--直接使用對象，鍵為類樣式名，值為布爾，表示是否應用這個樣式-->
<h1 :class="{red:true,italic:true,thin:true,active:true}"> </h1>
Vue中使用內聯樣式，類似jq的css方法，裏面傳入對象
<h1 :style="{‘color‘:‘red‘,‘font-size‘:‘16px‘}"></h1>
也可將對象定義到data中，再在標簽裏寫對象的引用
文字跑馬燈小案例
<div id="app">
<input type="button" value="浪起來" v-on:click="start">
<input type="button" value="淡定" v-on:click="stop">
<p>{{msg}}</p>
</div>
<script>
//VM實例中獲取data的數據或者調用methods裏的方法,必須通過this來訪問
var vm = new Vue({
el: ‘#app‘,
data: {
msg: ‘劃船不用槳全靠浪~~~‘,
timeId:null //定時器id
},
methods: { //這個methods屬性中定義了當前Vue實例所有可用的方法
start: function () {
if(this.timeId != null) return //使用節流閥防止定時器多次開啟
this.timeId = setInterval(() => {
var start = this.msg.substring(0, 1) //截取第一個字符
var end = this.msg.substring(1) //截取剩下的字符
this.msg = end.concat(start)
}, 500)
},
stop: function () {
clearInterval(this.timeId)
this.timeId = null
}
}
})
</script>
也可以使用啟動前先清除定時器的方式來防止定時器多次開啟，不過感覺這種方式相比下應該是比較耗性能的
定時器裏的this指向的是window，但用了ES6的箭頭函數，this指向仍是vm實例對象
實例化後window裏會有vm實例對象，底層會把data裏的屬性掛載到vm實例對象上作為vm的屬性，所以可以直接通this點來獲取
Vue 入門