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開發中，除了可以使用這些內置指令外，我們還可以使用Vue.directive() 或directives選項來自定義指令，宣告式變數的特點
當宣告式變數時，它所對應的視圖節點自動更新，
vue選項
const app = new Vue({ el:'#app', data:{}, methods:{
}, computed:{
}, })
-
- el：把vue組件（回應式系統）掛載到真實DOM
- data：專門用于定義宣告式變數的
- methods：是專門用于定義函式方法的地方
- computed（計算屬性）：
- watch：偵聽器(監聽器)
computed
語法：在computed選項中，定義計算屬性方法，在方法體使用宣告式變數進行若干計算， 使用：在視圖模板中把計算屬性直接當作變數直接使用，在vue邏輯代碼使用this訪問計算屬性，默認只有get功能， 計算屬性可以系結在v-model上，computed作用:
-
當指令的運算式比較復雜時，我們建議使用計算屬性來優化，提升視圖模板中代碼的可閱讀性、可維護性，
- 用于快取一個復雜的運算，避免組件更新時產生沒有必要的性能損耗，計算屬性本質上是一個函式，Vue會分析函式體中使用到了哪些宣告式變數，有且僅有這些宣告式變數發生變化時，計算屬性才會重新執行，
-
在Vue中，計算屬性能計算哪些性質的變數
data，vuex資料，$route，計算一切__ob__的資料，
如何讓計算屬性同時支持get/set功能
計算屬性默認是一個函式，表示get功能，為了支持set，要把計算屬性寫物件結構 {get, set}const app = new Vue({ el:'#app', computed:{ he：{ get(){
}, set(){
}, }, }, })
watch
作用：用于監聽一個變數的變化，然后去做另一件事兒，
特點：當偵聽器監聽參考資料型別時，默認只能監聽參考資料型別的第一層，
監聽深度越深，Vue在背后要做的事兒越多，這是一種性能損耗，所以一般不要對一個參考型別的變數進行深度監聽， 如何監聽參考資料型別的每一層（深度監聽）
const app = new Vue({console.log('---age變了', newAge, oldAge) },
el:'#app', watch：{ info：{ deep：true, handler(newInfo,oldInfo){
const.log(this.info)
} },
//推薦寫法
'info.child.age' (newAge, oldAge) {
},
})
在Vue中，偵聽器能夠監聽哪些性質的變數變化
能夠監聽data、計算屬性、vuex資料、$route等，凡是那些帶有__ob__變數都能被監聽到
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498907.html
標籤：其他