新建立的了一個交流群，歡迎在工作的開發者，尤其是VUE和小程序的同志們 771402271
好久沒更新博客，確實是自己已經懶癌晚期，最近畢業剛工作3個月，公司開發一直在用Vue，自己個人也比較喜歡這個框架，今天就對自己學習到和用到的知識點作一些總結，希望能幫到大家。
Vue
知道Vue也一定聽說過react 和 angular ，相對於這兩個框架來說，Vue很輕量，打包后體積只有20K+，同時學習起來也比較簡單，Vue借鑒了兩個框架的很多優點。當然框架沒有說最好，只有最適合，建議多學習嘗試。
眾所周知Vue是一個MVVM框架，這里的MVVM指的僅僅是前端，和后端無關。在MVVM框架中，視圖和數據不能直接通信，而是通過中間人ViewModel，ViewModel它可以監聽到數據的變化，然后通知視圖做更新。同時它也可以監聽到視圖在改變，使數據改變。我們看下面的例子就大概懂了。
舉例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> // 這是我們的View 視圖
<p id="app">{{ message }}</p>
<input type="text" v-model="message"/> //輸入框，綁定了數據message
</body> <script src="js/vue.js"></script> // 引入vue 自行下載 <script> // 這是我們的Model var obj = { message: 'Hello World!' } // 聲明一個 Vue 實例 ，即 "ViewModel"，實例中傳入一個對象，用來連接 View 與 Model new Vue( el: '#app', // 將id為app的dom節點放進來，即建立了與視圖view的連接。 data: obj // 將obj放入到實例的data屬性中, 此時建立與數據model的連接。
})
// 這樣就可以同時監聽view和model了， 當更改message的時候，view會自動改變，同時當我們更改文本框的值的時候，會發現P標簽里的值也在同時改變，這個時候就是view被監聽使model改變。 這就實現了數據的雙向綁定。
</script>
</html>
常用語法
# 文本插值
// 綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。 <span>Message: {{ msg }}</span> <span v-text="msg"></span> // 也可以用指令的方式
#常用指令
指令 (Directives) 是帶有 v- 前綴的特殊屬性。其實就是一種命令，或者是規則。
v-if v-else-if v-else: 滿足某個條件的時候顯示。
<body> <div id="app"> <h1 v-if="age > 50">Yes!</h1> //當年齡大於50的時候才渲染這個標簽 <h1 v-else-if="age > 20 && age < 50">{{age}}</h1> // 當年齡大於20且小於50的時候渲染當前標簽 <h1 v-else>Yes!</h1> // 其他的情況渲染此標簽 </div> </body> <script> var vm = new Vue({ el: '#app', data: { age: 80 } }) </script>
// v-if 可單獨使用，也可和v-else-if v-else 一起使用，來控制不同情況下的視圖。
v-show：簡單的切換 display:block 和 none, 和 v-if不同。帶有v-show的元素始終會被渲染
<h1 v-show="yes">Yes!</h1> // 如果yes為真就顯示，為假就不顯示 var vm = new Vue({ el: '#app', data: { yes: true } })
總結： v-show適用於兩種狀態的切換，v-if適用於條件判斷。
v-for指令：用於循環
<div id="app"> <todo-item v-for="item in groceryList" >{{item.text }}</todo-item> </div> var app7 = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其他什么人吃的東西' } ] } })
v-bind指令
v-bind指令可以在后面帶一個參數，中間用冒號隔開，這個參數一般是HTML的屬性，比如v-bind:class ,可縮寫為:class，這個class和原來的class 並不沖突。
.show{
display: block;
}
<h1 class="center" v-bind:class="yes ? show : off">Yes!</h1> // 如果yes為真就添加名為show的class，反之添加off var vm = new Vue({ el: '#app', data: { yes: true } })
v-on指令
專門用於綁定事件的指令，用法和v-blind差不多，比如添加點擊事件< a v-on:click="方法名 / 執行語句"> ，可直接縮寫為@click，可直接綁定一個方法，也可以直接使用內聯語句
#修飾符
修飾符 修飾符 (Modifiers) 是以半角句號 . 指明的特殊后綴，指明一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件的時候阻止默認事件：
<form v-on:submit.prevent="onSubmit"></form>
#計算屬性computed：在正常情況下，代碼中可以直接進行簡單的運算，但是如果太多就顯得難以維護。而計算屬性就是將這個邏輯提取出來，專門來維護。如下例子：
<div id="example"> {{ message.split('').reverse().join('') }} </div>
<div id="example"> <p>{{ message }}"</p> <p>{{ reversedMessage}}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } })
#方法methods：可實現和計算屬性一樣的功能
<div id="example"> <p>{{ message }}"</p> <p>{{ reversedMessage}}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } })
方法和計算屬性區別：
計算屬性存在緩存，只有依賴的變量發現改變的時候才會重新求值，如上，只有message發生改變才會重新求值，而methods每次渲染都會重新執行。所以要根據業務來選擇。
#觀察watch
只有一個一個監聽數據，只要這個數據發生變化，就會在返回兩個參數，第一個是當前的值，第二個是變化前的值，每當變化的時候，則會觸發函數體的里的邏輯行為，來進邏輯后續操作
watch: { 監聽message的變化，若改變執行以下語句
message(new,old) {
//要執行的語句
}
}
#過濾器
過濾器在開發中會經常用到，比如我們要顯示一個日期，但是后端給我們的數據是像這樣的3463782000時間戳，我們就必須做以下轉換。例如：
{{ message | date}} // date在這里就是個過濾器。實際上就是一個函數，函數的第一個參數就是 | 前面的message，也就是說message會被當做參數傳入到date函數中進行處理，返回的結果就是最終顯示的結果，注意過濾器函數都必須有返回值。
new Vue({
filters: {
date: function (date, fmt) {
if (!date) {
return 'timestamp can not be null or undefined';
}
date = new Date(date);
if (isNaN(date.getFullYear())) {
return 'dateError';
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
const o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (const k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
const str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
}
})
// 過濾器也可以串聯.如 {{message | filterA | filterB}} message會當做參數傳給filterA，處理完返回的結果又會當做參數傳入filterB，處理完返回的就是最終結果了
過濾器分全局和局部。全局就是整個項目都可以用到，具體自行百度。
#混合mixins：
我們知道vue實例中會傳入一個對象，里面有方法，計算屬性等，假如有兩個vue實例，他們有很多公用的東西，那么就可以用到混合了，混合可以當做一個Vue實例，同時它又可以和任何一個
對象進行組合。如下： am 和 vm 都需要使用方法foo,這個時候就可以聲明一個混合來復用。
var mixin = { // 聲明一個混合
methods: {
foo: function () {
console.log('foo')
}
}
}
var vm = new Vue({
mixins: [mixin], // 引用混合
methods: {
bar: function () {
console.log('bar')
}
}
})
var am = new Vue({
mixins: [mixin],
methods: {
conflicting: function () {
console.log('from self')
}
}
})
#組件之間的通信
組件的基礎就暫且不說了，看官方也能懂，直接說下通信，組件之間，有時候需要傳遞數據或者數據的狀態，比如我這邊點了按鈕，需要父組件得到並且做出一定的改變。所以組件之間需要通信。
這個時候就分三種情況：父組件傳遞消息給子組件， 子組件傳遞消息給父組件，兄弟組件之間通信
1 父組件傳遞數據給子組件：props
父組件 <child message="hello!"></child> // 子組件在父組件內被調用，message是來自於父組件的數據，直接以屬性的形式傳遞
子組件 需要聲明props屬性來接收數據，數據可以和data里的數據一樣使用 Vue.component('child', { // 聲明 props props: ['message'], })
2 子組件傳遞信息給父組件：例：當點擊按鈕時，通知父組件
父組件
<div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> // 子組件調用被監聽派發出的時間increment,監聽到后調用incrementTotal方法 <button-counter v-on:increment="incrementTotal"></button-counter> </div> new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { //若傳遞過來有數據，可以直接接收incrementTotal(value) this.total += 1 } } })
子組件：
Vue.component('button-counter', { template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') // 派發事件increment，第二個參數可以是想傳遞的數據 比如 this.$emit('increment', 1) } }, })
注意： 在子組件中不要直接更改props的值，不推薦也不支持，想要用可以直接賦值給一個變量，或者用計算屬性，如果需要改變父組件這個值怎么辦呢，就可以利用watch監聽傳來的props數據，然后把這個數據賦給一個變量，
這樣我們就可以操作這個變量，再$emit派發事件把想要改變的數據傳給父組件，父組件再監聽。
3 兄弟組件通信
var bus = new Vue() 聲明Vue實例
bus.$emit('id-selected', 1) // 派發事件和數據
bus.$on('id-selected', function (id) { // 監聽事件，並在回調函數中，接受傳來的數據。
// ...
})
先說到這里。。。。。