簡單地來理解Vue，把mvvm什么的都撇開～

0. 大小寫不敏感

由于js和html之間要進行溝通，而vue讀取到的html中定義的變量/函數/方法為小寫，所以請盡量用純小寫/下劃線/連詞符代替。

1. 為什么是new Vue({el:'#myApp'.....})

這是對應網頁中id為myApp的對象

<div id='myApp'.......

而如果網頁中tag的class為myApp要記住靈活運用，把new Vue({el:'#myApp'.....})改為new Vue({el:'.myApp'....."), 易可寫成new Vue({el:'div.myApp'.....")

參考jquery查詢元素方式

2.只能存在一個Vue對象么？

只存在一個vue?？蓜摻ǘ鄠€，官方不建議，且在3.x會報錯。

3.設計網頁中的變量怎么實現的數據鏈接呢？

通過網頁中查找{{.*}}特征對象，也是為了兼容瀏覽器的妥協

4.特征值查詢

條件v-if，邏輯v-for，插件，綁定參數v-bind:.*，事件v-on:click 等也都是通過解析網頁達到二次處理的

4.1. 補充 Vue的結構

el
獲取網頁模版對象，可以通過類似jquery方式查詢到，比如<div id='abc' class='xyz'>，那么可以寫成new Vue({el:'#abc'}) 或者 new Vue({el:'.xyz'})或者new Vue({el:'div#abc'}) 或者 new Vue({el:'div.xyz'})。 這些都是靈活的，并非刻板，只要能找到網頁中對應的DOM對象標簽就可以。

_data
傳遞的值（必須小寫），可以是變量定義，數組定義，也可以是字典，靈活運用數據結構，這里data不加s，本身數據就是一個結合。

components
組件群的定義，記住這是個容器。

watch
監控data中對應值的變化。

methods
@click等事件處理

computed
對變量的靈活處理，可以把存取變量分離開來，包括對變量的get/set處理

filters
過濾函數，相當于便捷化的處理函數，在{{}}中就能進行調用，缺點是格式固定，一個變量可進行多個過濾函數處理

5.值的自動變更

當更改變量值時，引用的{{}}對象也會自動變更，這是MVVM機制，簡單來講，{{}}并不只被渲染為固定值，而是將原始結構作為模版，達到刷新替換的效果

6.過濾器 filter

{{}}中可以對值進行過濾，結構是{{變量1，變量2，變量3... | 過濾器1 | 過濾器2 | 過濾器3 ...}}，過濾器可以是多個，參數也可以是多個
比如設計器中寫入 {{ "你好, 世界! " , 3 | doChange | doChange2}}
開發代碼中插入過濾器

filters:{
  doChange: function(p1,p2) {
    var p="";
    for(let i=0;i<p2;i++){
      p+=p1;
    }
    return [p,p2];
  },
  doChange2: function(p1) {
    for(let i=0;i<p1[1];i++){
      p1[0] = p1[0].replace('世界', ' 中國' );
    }
    return p1[0];
  }
}

輸出

你好, 中國! 你好, 中國! 你好, 中國!

進入第二個過濾器時無法傳遞多個參數，通過數組方式傳遞進去，這時候如果不傳遞過濾器則只替換了第一個世界，這里只是舉個例子，repace使用RegEx過濾可以進行全局過濾 p1[0] = p1[0].replace(/世界/g, ' 中國' );

7.變量和計算函數重名？

首先會報錯，但不影響運行，運行時優先讀取變量值。

8. 解析{{}}優先級

變量/屬性property > 計算函數computed > 數值/字符串計算 > 過濾器filter（直接被識別為空）
過濾器filter不在優先級中，因為過濾器在|識別符后，直接寫filter是無效的（雖然filter傳參并不會報錯）

9. 觀察和死循環

當進行觀察watch時小心邏輯卡死
寫這樣一個結構

<div id='div'>
<p>{{a}}//{}</p>
<button v-on:click="click1()">按鈕</button>

code：

var div = new Vue({
    el: #div,
    data: {
        a: 1,
        b: 2,
    },
    watch: {
        a: function() {
            this.b++
            console.log(b, this.b);
        },
        b: function() {
            this.a++
            console.log(a, this.a);
        }
    },
}

當a/b任意一個值變動時，網頁會進入假死狀態，其實不用兩個值，只要watch的時候更改自己的值就會導致假死

注意不要在watch中更改屬性變量本身的值

10. 計算Computed的setter和getter

computed:{
    var_b: {
        get: function(){
            //讀變量處理
        },
        set: function(){
            //設置變量處理邏輯
        }
    }
}

11. 箭頭函數 ？

貌似在Vue內部是不能定義箭頭函數的，但是在整個代碼環境下是可以使用箭頭函數的，Vue對象內部可以調用箭頭函數

let output = (str)=>{return console.log(str)}

調用

cCount: {
  get:function () {
    strange(this.count)
    return this.count * 100
  },
  set:function (val) {
    this.count = val/100
  }
}

這里可以成功使用箭頭函數創建的方法

12. 多條件處理 v-if v-else v-elseif

這里我寫了個假枚舉，用來支持開關變量

<div id="div">
<h1 v-if="type==Type.Type_1">類型1</h1>
<h1 v-else-if="type==Type.Type_2">類型2</h1>
<h1 v-else-if="type==Type.Type_3">類型3</h1>
<h1 v-else>類型type={{type}}</h1>
</div>

代碼

var div = new Vue({
    el:'#div',
    data:{
    Type:{
        Type_None:0,
        Type_1:1,
        Type_2:2,
        Type_3:3,
    },
    type:null,
])

div.type = div.Type.Type_2;

條件判斷內不支持位操作符號（|，&，^，～），使用后結果會不正確，|被解析成了過濾器

13. v-model

雙向綁定，相當于增加了對變量屬性的設置功能，強化版的{{}}，但他并沒有{{}}靈活。

14. 什么時候需要{{}} ？

當需要在和普通內容混編多時候需要{{}}，當在特殊關鍵字下不需要，比如v-if，v-for，v-on，v-model，這些關鍵字都明確說明了之后的處理和vue有關，就不需要{{}}了

15.當checkbox和radio遇上v-for

錯誤寫法：

<input v-for="(item, index) in radios" :key="index" name="1" type="radio" v-bind:value="item" v-model="radioxx">{{item}}

這樣的循環無法得到{{item}}值
解決方式

<label v-for="(item, index) in radios" :key="index">
   <input name="1" type="radio" v-bind:value="item" v-model="radioxx">{{item}}
</label>

本身input不包含額外標簽，即便后面跟著item和</>結束符，得到的值也只是input自己在循環，這時候只需要在外嵌套一個不影響排版的標簽就可以令按鈕橫排顯示

16. 組件（component）的內部結構

組件既可以單獨創建，也可以在vue中創建，區別在于直接在對象下創建的組件直接對應字典數據表
Vue.component('組件名稱'，{組件結構})
Vue({ compenents:{ '組件名稱':{組件結構} } })
組件結構：

templete
重中之重，一個組件可以沒有props傳參，可以沒有data數據，也可以沒有computed處理，但必須有模版本身的內容。

props
props，數組/字典。
傳遞數組時，可接收的參數格式為 v-bind:變量名='值/其他變量名' 或 :變量名='值/其他變量名'格式, 可以傳遞多個變量值。
傳遞字典時，每個key對應的數據結構{ type:數據類型(String/Number/Boolean/Object),default:默認返回處理函數,required:是否必須,validator:驗證函數返回真假}，如果數據為Object結構，則變量傳遞不全會丟失數據，而不會傳遞缺省的值.String類型使用key="value"方式傳遞，其他類型使用:key="value"方式傳遞。

data
數據，和Vue直接定義的data不同，這里是需要創建一個返回函數，data:function(){return {data結構} }, 寫起來有些拗。

computed
計算，獲得的變量通過一定方式處理獲得computed:{ name: function(){ return 'abc' } } 或者經過get/set處理。

methods
同vue的methods，事件處理

記住定義的變量名必須為全小寫，如果html結構中進行了大寫操作，在傳遞后會強制轉換為小寫，但Vue的語法又對大小寫敏感，你會拿不到任何值，比如:valFromMajor='value', 那么獲得的變量名為valfrommajor，不寫成小寫會拿不到值。這個問題同樣出現在Vue的data定義中。需要綁定的數據鏈必須是在html中，而不能是在templete模版中，否則會當成普通字符串處理。

17. 事件的發送 / 發射器 / $emit