特點：
輕量級，高效率，上手快，簡單易學，文檔簡介全面
一套構建用戶界面的漸進式框架。
功能
模板渲染，模塊化，擴展功能（路由和ajax等）
簡介
輕量級的前端界面框架，
2016.10發佈新的2.0版本，更強單，更快速
- 數據渲染/數據同步
- 組件化/模塊化
- 路由，ajax，數據流
學習資源
cn.vue.js.org
github.com/vue.js/vue
github.com/vuejs
入門
- Vue實例對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({ //構造函數
el: '#app', //構造參數
data: { //參數選項
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
= 樹形結構關係
2. Vue實例的生命週期
- Vue的組件註冊和結構
4.Vue的基本概念
- 全局api :
- 實例選項 （）
- 實例屬性/方法 （$開頭）
- 指令
- 內置組件
Vue的基本用法
- 文本渲染
變量如何渲染到屬性裏？
2.0版本下， v-bind指令（<=> :[property]）
模板渲染的方法
- {{ [變量] }}
- v-html="[變量]" //會解析標籤
- v-text="[變量]" // 原字符輸出
循環 v-for:
- 列表渲染
<div>
<ul>
<li v-for= "(item,index) in list" :class="odd:index%2">{{ item.name }} -- {{ item.price }} -- {{ index }}</li>
//list的數據格式是：list:[ { name:"apple", price: 12} {,name:"banana",price: 15} ]
// class="odd:index%2" 該項表示爲奇數增加odd類
</ul>
</div>
渲染對象 循環
//objList:{ name:‘Lebron’,price:33,rank:likers }
將屬性循環顯示出來
<div>
<ul>
<li v-for= "(value,key) in objList"> {{ key + value }} </li>
</ul>
</div>
循環渲染組件
引入組件後
將v-for寫入就行
雙向綁定（數組的動態更新）
會觸發列表更新的方法：push(),pop(),shift(),unshift(),splice(),sort(),reverse(),
不會觸發的：filter(),concat(),slice(); 爲其中某一項複製，
改變數組的長度，不會更新，如果要改變某一項的值，並更新 ，可以使用Vue.set(this.list,1,{}) 修改。
Vue 標籤屬性與條件渲染
1.綁定屬性
v-bind:href="" v-bind:title
縮寫爲 :href="" :title=""
該綁定爲動態綁定，當綁定的值被修改時，標籤的屬性也會同步更新
v-bind:class
v-bind:class 和普通的class不會衝突，會兼容顯示。
可以給class綁定一個對象，
2.條件渲染
v-if="[bool型變量]" 不顯示是真正的消失
v-show="[bool型變量]" 通過display屬性控制
v-else 與上邊兩個命令配合使用
vue事件綁定和表單
1.事件綁定
v-on:click="[方法名]" 縮寫爲 @click="[方法名]"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
事件修飾符
Vue.js 爲 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令後綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
實例
自定義事件
- 表單事件綁定
- v-model 指令在表單控件元素上創建雙向數據綁定。
<input v-model="message" placeholder="編輯我……">
<p>消息是: {{ message }}</p>
- 複選框
v-model 綁定同一個值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>單個複選框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多個複選框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>選擇的值爲: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
</html>
- 單選框
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>選中值爲: {{ picked }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
picked : 'Runoob'
}
})
</script>
- select 列表
以下實例中演示了下拉列表的雙向數據綁定：
<div id="app">
<select v-model="selected" name="fruit">
<option value="">選擇一個網站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
選擇的網站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
- 表單修改器
.lazy //完成輸入時，纔會更新值
.number //轉換類型
.trim
計算屬性和數據監聽
-計算屬性
computed: {
calculate (){
return this.myValue.replace()
}
}
原屬性不更新，計算的屬性結果就不會更新
-
監聽數據變化
watch:{
myValue: function(val,oldvalue){ //key值爲要監聽的變量，value爲要執行的方法}}