Vue基本使用

指令

• {{ msg }} 、v-text（會覆蓋子文字）
• v-html 會有xss風險，會覆蓋子元件
• 設定動態屬性 v-bind: (簡寫:)
  <button v-bind:disabled="isButtonDisabled">Button</button>
• 表示式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

• v-on:（簡寫@）監聽DOM事件
• 修飾符 . 用於指出一個指令應該以特殊方式繫結

<form v-on:submit.prevent="onSubmit">...</form>
<input @keyup.enter="onCheck" />
 

• v-if
• v-show
• v-if和v-show的區別
  1.v-if是通過控制dom節點的存在與否來控制元素的顯隱；v-show是通過設定DOM元素的display樣式，block為顯示，none為隱藏；
  2.效能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗
  3.使用場景：如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。
• v-for
  v-for和v-if不能一起使用
• v-model

計算屬性和監聽屬性

• computed
  對於任何複雜邏輯，你都應當使用計算屬性。computed有快取，data不變不會重新計算。
  
• watch
  當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。
  1.當需要監聽引用型別時，普通的watch方法無法監聽到物件內部屬性的改變，此時就需要deep屬性對物件進行深度監聽。
  2.watch監聽引用型別，拿不到oldVal，
  

元件通訊

父子元件傳值

任何元件的通訊，包括父子，兄弟，跨級

元件通訊

Vue生命週期

1.created和mounted區別
created完成了vue例項的初始化，頁面還沒開始渲染，mounted完成了頁面的渲染

Vue高階特性

Vue原理