vue特點

• • mvvm框架
  • 響應式(聲明式)
  • 組件化(支持自定義組件)
  • 豐富的指令(Dom功能的抽象)
  • 基於選項(template，data，computed，watch，methods)
  • vue文檔集中ue
  • Vue生態豐富且簡單
  • 漸進式()

Veu和Dom開發思想

• • Dom開發思想：當我們需要在交互事件中改變視圖時，使用DOM選擇器選中目標節點、再使用DOM方法直接改變視圖。
  • Vue開發思想：當我們需要在交互事件中改變視圖時，先在data選項中聲明一個合適的變數，再在交互事件中改變這個聲明式變數即可，視圖自動更新，這是一種間接的操作。

常用的Vue指令有哪些

文本類指令：

• • {{}}文本插值：用於綁定節點的文本。{{}}這種綁定值的方式會出現一閃而過的效果，使用v-cloak來解決。
  • v-text：用於綁定節點的文本，大多數的時候，可以和{{}}替換。
  • v-once：用於指定節點的動態內容只綁定一次，當前節點中所對應的變數發生變化時視圖不更新。一般情況下，v-once只能和{{}}一起用。
  • v-once和v-cloak：都是不需要接受表達式來做為‘值’。
  • v-html：用於動態綁定的html節點，相當於DOM中的innerHTML,這個指令預設已經做了“防xss攻擊”的處理。

動態屬性指令：

v-bing：用於動態綁定節點的屬性（比如：title ，value，style等）

事件綁定指令：

v-on：用於給視圖節點綁定各種js事件（比如：click，keyup等）

v-on簡寫@　　

基本語法: <div @事件名.事件修飾符='事件處理'></div> 

 v-on事件修飾符：.stop阻止事件冒泡，.prevent阻止預設事件，.enter綁定鍵盤Enter鍵盤。

表單綁定指令：

v-model：用於表單取值(表單雙向綁定)　　比如：input，select

基本語法：<input style="text" v-model.表單修飾符='變數'> 

v-model修飾符：.trim自動去除首尾空格　　.number隱式類型轉換　　.lazy用於性能，當表單失去焦點時再進行雙向綁定。

列表渲染：

v-for：用於渲染列表，對象，Number變數等。

渲染列表語法： <div v-for='(item,index) in array'></div> 

渲染對象語法： <div v-for='(value,key,index) in obj'></div> 

渲染Number變數語法： <div v-for='(num, index) in 5'></div> 

條件渲染：

v-show：用於顯示或隱藏視圖節點，使用display:block / display:none 來實現的。

v-if，v-else-if，v-else：用於顯示或隱藏視圖節點，真正的移除或插入視圖節點。

v-show和v-if的區別

v-if是節點的插入或移除，比較耗費性能；v-show只是通過樣式來實現顯示與隱藏，性能消耗低。

註意：不建議v-if和v-for一起使用；如果一定要一起使用，在vue2中v-for優先順序更好。

其它指令

v-pre：用於調試，可以阻止vue編譯器對指令的編譯

v-slot：插槽

自定義指令

聲明式變數的特點

當聲明式變數時，它所對應的視圖節點自動更新。

 vue選項

• •  el：把vue組件（響應式系統）掛載到真實DOM
  • data：專門用於定義聲明式變數的
  • methods：是專門用於定義函數方法的地方
  • computed（計算屬性）：
  • watch：偵聽器(監聽器)

computed

computed作用:

1. 1. 當指令的表達式比較複雜時，我們建議使用計算屬性來優化，提升視圖模板中代碼的可閱讀性、可維護性。

   2. 用於緩存一個複雜的運算，避免組件更新時產生沒有必要的性能損耗。計算屬性本質上是一個函數，Vue會分析函數體中使用到了哪些聲明式變數，有且僅有這些聲明式變數發生變化時，計算屬性才會重新執行。

在Vue中，計算屬性能計算哪些性質的變數

data，vuex數據，$route，計算一切__ob__的數據。

如何讓計算屬性同時支持get/set功能

const app = new Vue({
   el:'#app',
   computed:{
        he：{
            get(){

　　　　　　　},
            set(){

　　　　　　　},
        },
    },      
})

watch

作用：用於監聽一個變數的變化，然後去做另一件事兒。

特點：當偵聽器監聽引用數據類型時，預設只能監聽引用數據類型的第一層。

const app = new Vue({    
　　 el:'#app',
    watch：{
        info：{
           deep：true,
　　　　　　　handler(newInfo,oldInfo){
　　　　　　　　const.log(this.info)
　　　　　　}
        },
　　　　//推薦寫法
　　　　　'info.child.age' (newAge, oldAge) {

    },
})