認識vue

1. 想要vue工作，就必須建立一個vue例項，且傳入一個配置物件
   2.{xxx}中的資料要寫js表示式，，且xxx可以自動讀取到data最中的資料
   3.data中用於儲存資料，資料供el所指定的容器去使用，data中的值我們可以寫成物件形式
   4.在head中引入vue.js檔案
   `

<div id="demo">
    <h3>Hello{{name}}</h3>
</div>
<script>
    // 建立vue例項
    new Vue({
        // el用於指定檔期那vue例項為哪個容器，往往時css選擇符
        el: "#demo",
        data: {
            name: "word"
        }
    })`
 

** vue模板渲染**
1.插值語法{{}}
2.指令語法v-bind,v-xxx等等等

資料繫結
1.單向傳遞（b-bind): 資料只能從data流向頁面
2.雙向資料（v-model）: 資料不僅能從data流向頁面，還可以從頁面流向data
3.雙向資料繫結一般用於表單元素上input等
MVVN模型
1.M：模型：data中的資料
2.v: 試圖view：模板程式碼
3.vm：檢視模型viewmodel：vue例項
4.vm身上所有的屬性及vue原型上所有屬性，在vue模板中都可以直接使用
資料代理

1. vue中的資料代理：通過v的例項物件上物件代理data物件中的操作
2. vue中資料代理的好處：更加方便操作data中的資料
   3.基本原理：通過object.defineProperty()把data物件中所有屬性新增到vm上。為每一個新增到vm上的屬性，都指定一個getter和setter去操作data中的資料
   事件處理、事件修飾符、鍵盤事件
   
   1.使用v-on:xxx 或 @xxx 繫結事件，其中xxx式事件名
   2.事件回撥的方法寫在methods物件中
   3.methods中配置的函式，不要用箭頭函式，否則this就不是v的例項物件了
   4.@click='hh' 和 @click ='hh()'的效果一致，但是或者可以傳引數
   5.事件修飾符有：prevent：阻止預設事件，stop：阻止事件冒泡，once：事件只觸發一次。。。。
3. 鍵盤事件：enter：回車，delete：刪除。。。。

• 計算屬性computer
  1.要用的屬性不存在，要通過已有的屬性計算得來
  2.計算原理：底層藉助了object.defineproperty()方法提供的getter和setter
  3.如果計算屬性要被修改，那必須寫set函式去響應修改，且set中要引起計算時依賴的資料改變發生
  事件監聽
  
  1.當事件的屬性變化時，回撥函式自動呼叫，進行相關操作
  2.事件的屬性必須存在，才能監聽
  computed和watch的區別
  1.computed能完成的功能watch也能完成
  2.watch能完成的，computed不一定能完成，例如：watch能進行非同步操作
  繫結樣式
  1.寫法:class="xxx" xxx可以是字串、物件、陣列。
  2.style樣式：:style="{fontSize: xxx}"其中xxx是動態值。:style="[a,b]"其中a、b是樣式物件。
  條件渲染
  1.v-if：用於切換頻率的場景，不展示的DOM元素直接被消除
  2.v-show：用於切換頻率較高的場景，不展示的DOM不被消除
  3.使用v-if時，元素可能無法獲取得到，而使用v-show的哪個都可以獲取的到
  key
  1.key是虛擬DOM物件的標識，當資料發生變化時，vue會根據生成新的虛擬DOM，隨後vue進行新虛擬DOM和舊虛擬DOM作比較，然後就找到與舊虛擬DOM相同的key
  2.index作為key可能會發生一些問題：若資料進行：逆序新增、逆序刪除等破壞順序操作，會產生沒有必要的真實DOM更新，頁面效果沒問題，但效率低
  3.最好使用每條資料的唯一標識作為key
  指令
  1.v-bind：單向繫結解析表示式，可以簡寫為：xx
  2.v-model：雙向資料繫結
  3.等等。。。。可以去用vue.js看看。