vue 知識總結（vue基礎知識）
2023-05-26 20:18:08 1
vue 知識總結?listArray:['a','b','c']，今天小編就來說說關於vue 知識總結?下面更多詳細答案一起來看看吧!
vue 知識總結
基礎認識變量模板中使用變量用 {{}}，也叫字面量或者插值表達式數組類似python裡的列表listArray:['a','b','c']
對象類似python裡的字典listObject:{ GirlOne:'a', GirlTwo:'b', GirlThree:'c' }
'{{counter}}'
mounted頁面加載渲染完成，自動執行的方法mounted { console.log('頁面加載完成後-自動執行')},
v-on綁定事件簡寫就是@v-if，v-else判斷，它的作用是如果值為真，就顯示這個DOM元素，如果為假，就不顯示這個元素判斷可以用三元運算符:class="message=='jspang.com'?'one':'two'" template: ` {{message}} {{message}} `
v-for循環數組循環為了提高循環時性能，在數組其中一項變化後，整個數組不進行全部重新渲染，Vue提供了綁定key值的使用方法，目的就是增加渲染性能，避免重複渲染。加唯一性key值，增加後vue就會辨認出哪些內容被渲染後並沒有變化，而只渲染新變化的內容。[{{index}}]{{item}}
對象循環data{ return{ listObject:{ GirlOne:'a', GirlTwo:'b', GirlThree:'c' } }} [{{index}}]{{value}}-{{key}}
數字循環{{count}},
v-for中使用v-if要用template標籤，一個空的佔位符。比如有三個值，只要其中兩個，不用template的話，html裡還是會出來三個。[{{index}}]{{item}}
Demo佳麗列表 Vue.createApp({ data { return { inputValue: '', list: ['1號', '2號', '3號'] , setMeal: 'china america', isShowMeal: false , } }, methods: { handleAddItem { this.list.push(this.inputValue) this.inputValue = '' }, welcomeBtnClick{ // alert('111') this.content = 'huanying' }, byeBtnClick{ // alert('222') this.content = 'baibai' }, showOrHideBtnClick{ this.isShowMeal = !this.isShowMeal // 將操作者取反 false變成true } }, template: ` laila zoula {{setMeal}} show/not show 增加佳麗 {{item}} ` }).mount("#app")
v-html,v-bind,v-oncev-html 可以將變量返回htmlv-once data中的數據如何變化，模板也不會再次重新渲染v-bind 綁定屬性，不綁定的話就是字符串，不會隨數據變化，簡寫就是直接一個冒號{{message2}}{{message2}}
const app = Vue.createApp({ data { return { message: 'jspang.com', count: 5, message2: 'xxxxxx' } }, methods: { handleItemClick { this.message = this.message == 'jspang.com' ? "技術胖" : "jspang.com" } }, template: ` {{count>2?'大':'小'}} # 三元表達式 在模板中可以使用js的表達式 {{message2}} # 不用v-bind title就是message2字符串 ` }) const vm = app.mount("#app")
v-showv-show是單個判斷，true就顯示，false就不顯示。控制的是css樣式,也就是display:none。如果顯示和隱藏的狀態切換比較頻繁，並且沒有什麼多餘複雜的業務邏輯，建議使用v-show,因為他不會一直渲染你的頁面DOM元素，這或多或少對性能和穩定性有點提升。const app=Vue.createApp({ data{ return{ show: true, } }, template:` JSPang.com ` }) const vm=app.mount("#app")
vue的方法createApp創建一個vue應用const app = Vue.createApp{}
mount掛載到html的dom上app.mount("#app")
根組件vm在使用mount方法時，會返回根組件。返回的是proxy形式的對象mvvmmvvm解釋: 第一個m代表model數據，第一個v代表view視圖，最後兩個字幕vm代表viewModel視圖數據連接層。const app = Vue.createApp({ data { return { message: 'jspang.com' //1.在這裡定義了數據，也就是`model`數據 } }, template: "{{message}}" //2.在這裡定義了模板，也就是`view`， //定義後的自動關聯，就叫做`vm`，viewModel數據視圖連接層。 }) app.mount("#app")
生命周期函數在某一時間會自動執行的函數被動執行的函數，需要手動去點一下，才會執行methods: { handleItemClick { alert('jspang.com') } }, template: "{{message}}"
自動執行函數，mounted，沒有任何操作,就會自動執行8個生命周期函數beforeCreate：在實例生成之前會自動執行的函數created: 在實例生成之後會自動執行的函數beforeMount: 在模板渲染完成之前執行的函數mounted: 在模板渲染完成之後執行的函數beforeUpdate ：當data中的數據變化時， 會立即自動執行的函數updated：當data中的數據發生變化，頁面重新渲染完後，會自動執行的函數beforeUnmount :當Vue應用失效時，會自動執行的函數unmounted : 當Vue應用失效時，且DOM完全銷毀之後，會自動執行
vue2和3生命周期函數對比setup :開始創建組件之前，在beforeCreate和created之前執行。創建的是data和methodonBeforeMount : 組件掛載到節點上之前執行的函數。onMounted : 組件掛載完成後執行的函數。onBeforeUpdate: 組件更新之前執行的函數。onUpdated: 組件更新完成之後執行的函數。onBeforeUnmount: 組件卸載之前執行的函數。onUnmounted: 組件卸載完成後執行的函數onActivated: 被包含在中的組件，會多出兩個生命周期鉤子函數。被激活時執行。onDeactivated: 比如從 A 組件，切換到 B 組件，A 組件消失時執行。onErrorCaptured: 當捕獲一個來自子孫組件的異常時激活鉤子函數（以後用到再講，不好展現）。Vue2--------------vue3beforeCreate -> setupcreated -> setupbeforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountedactivated -> onActivateddeactivated -> onDeactivatederrorCaptured -> onErrorCaptured
模板的動態參數用[xxx] xxx表示變量名 這樣就是動態參數const app = Vue.createApp({ data { return { message: 'xxxx', name: 'title', event: 'click' } }, methods: { hanldClick{ alert('歡迎光臨紅浪漫') } }, template:` {{message}} ` }) const vm = app.mount("#app")
阻止默認事件prevent默認提交
computed計算屬性，watch監聽器方法methods：只要頁面重新渲染，就會重新執行方法，隨便哪裡更新了，就會更新計算屬性computed:當計算屬性依賴的內容發生變更時，才會重新執行計算。就是和他相關的東西變了，這個值才會變。必須要返回一個值，而且在頁面渲染的同時就會執行裡邊的業務邏輯。computed擅長處理的場景：一個數據受多個數據影響watch 偵聽器的作用就是偵聽一個data中的值的變化，變化後可以寫一個方法，就是執行業務邏輯。watch擅長處理的場景：一個數據影響多個數據。界面渲染的時候不會執行，要等相關的數據變化後才執行。computed 和 method都能實現的功能，建議使用computed,因為有緩存，不用渲染頁面就刷新。computed 和 watch 都能實現的功能，建議使用 computed，因為更加簡潔。const app=Vue.createApp({ data{ return{ message:'jspang.com' , price: 10, count: 2, } }, methods:{ getTotal{ // return this.price * (this.count ); return Date.now }, addCount{ this.count }, }, watch:{ count(current, prev){ console.log('count changed watch') console.log('現在的值watch：',current) console.log('變化前的值watch：',prev) } }, computed:{ total{ return this.price * this.count; }, getTime{ return Date.now; }, countComputed(current, prev){ console.log('count changed computed') console.log('現在的值computed：',current) console.log('變化前的值computed：',prev) } }, template:` {{getTime}} {{getTotal}} {{total}} more {{countComputed}} ` }) const vm=app.mount("#app")
模板綁定樣式用普通字符串進行綁定使用樣式就是用v-bind綁定變量，變量就是定義好的樣式名字用數組進行綁定，true代表綁定，false表示不綁定Demo14 .red {color:red} .green {color: green} .background {background-color: yellow} .redImport {color: red !important;} const app=Vue.createApp({ data{ return { classString:'red', classObject:{red:true,background:true}, classArray1:['green','background',{redImport:true}], classArray2:['green','background',{red:true}], } }, template:` 1 2 ` }) const vm=app.mount("#app")
組件,component來生成一個組件，可以在模板中直接調用app.component('sonCom',{ template:` SonCom `})template:` JSPang.com `
區分父子組件，被調用的是子組件，主動調用的就是父組件行內樣式data{ return{ //..... styleString:'color:orange;', styleObject:{ color:'red', background:'yellow' } }},template:` JSPang.com JSPang.com`
綁定事件方法和參數用methods實現用表達式實現event事件，沒參數就直接方法裡用event，有參數的情況下，在使用的時候要穿$event調用兩個方法要加上括號,中間用逗號隔開const app=Vue.createApp({ data{ return{ count:0 } }, methods:{ addCountClick(event){ this.count ; console.log(event) console.log(event.target) }, addCountClick2(num,event){ this.count = num console.log(event.target) }, handleBtnClick1{ alert(1) }, handleBtnClick2{ alert(2) },}, template:` 目前已點佳麗數量{{count}}. 增加一位佳麗 增加一位佳麗2 增加一位佳麗3 增加一位佳麗4 ` }) const vm=app.mount("#app")
事件修飾符冒泡事件，點add按鈕，上面的handleBtnClick1方法也會觸發，就是冒泡methods:{ addCountClick{ this.count }, handleBtnClick1{ alert(1) }, }, template:` number is{{count}}. add `
stop 阻止冒泡事件 addself 只有點擊道自己的時候才會觸發template:` 點我 目前已點佳麗數量{{count}}. 增加一位佳麗 `
preevent 阻止默認行為，如form提交表單capture 默認的冒泡都是從下到上，用了capture之後就是從上到下template:` //修改了此處 我是最外層的DIV文字 目前已點佳麗數量{{count}}. 增加一位佳麗 `
once 只執行一次增加一位佳麗
passive 解決滾動時性能的修飾符每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作。一般用在滾動監聽，@scoll，@touchmove 。因為滾動監聽過程中，移動每個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。我們通過passive將內核線程查詢跳過，可以大大提升滑動的流暢度passive和prevent衝突，不能同時綁定在一個監聽器上按鍵，滑鼠修飾符按鍵修飾keydown表示按鍵，響應所有按鍵enter 、tab、delete、esc、up 、down、left、right 這些加上之後，表示響應單獨的按鍵const app=Vue.createApp({ data{ return{} }, methods:{ handleKeyDown{ console.log('keydown') } }, template:` ` }) const vm=app.mount("#app")
滑鼠修飾符常用的就是 left、right、middleconst app=Vue.createApp({ data{ return{} }, methods:{ handleClick{ alert('click') } }, template:` xxxxxx ` }) const vm=app.mount("#app")
數據雙向綁定v-modelinput 雙向綁定textarea 雙向綁定vue中只要寫單標籤就行了，html還是要寫雙標籤checkbox 雙向綁定一個選項，設置一個布爾值來表示多個選項直接可以直接用數組來表示true-value，false-value。true的時候顯示的值，和false的時候顯示的值radio 雙向綁定直接定義一個str字面量修飾符lazy，失去焦點再進行改變，比如按了enter，才會更新number 輸入的是數字，也會變成字符串trim 自動刪除前後的空格，字符中間的不會刪除const app=Vue.createApp({ data{ return{ name: '', list: [], checked:false, str: '', testAreaName: '' } }, methods:{ }, template:` {{name}} {{checked}} {{testAreaName}} {{list}} a b c {{str}} a b c ` }) const vm=app.mount("#app")
[toc]
基礎認識變量模板中使用變量用 {{}}，也叫字面量或者插值表達式數組類似python裡的列表listArray:['a','b','c']
對象類似python裡的字典listObject:{ GirlOne:'a', GirlTwo:'b', GirlThree:'c' }
'{{counter}}'
mounted頁面加載渲染完成，自動執行的方法mounted { console.log('頁面加載完成後-自動執行')},
v-on綁定事件簡寫就是@v-if，v-else判斷，它的作用是如果值為真，就顯示這個DOM元素，如果為假，就不顯示這個元素判斷可以用三元運算符:class="message=='jspang.com'?'one':'two'" template: ` {{message}} {{message}} `
v-for循環數組循環為了提高循環時性能，在數組其中一項變化後，整個數組不進行全部重新渲染，Vue提供了綁定key值的使用方法，目的就是增加渲染性能，避免重複渲染。加唯一性key值，增加後vue就會辨認出哪些內容被渲染後並沒有變化，而只渲染新變化的內容。[{{index}}]{{item}}
對象循環data{ return{ listObject:{ GirlOne:'a', GirlTwo:'b', GirlThree:'c' } }} [{{index}}]{{value}}-{{key}}
數字循環{{count}},
v-for中使用v-if要用template標籤，一個空的佔位符。比如有三個值，只要其中兩個，不用template的話，html裡還是會出來三個。[{{index}}]{{item}}
Demo佳麗列表 Vue.createApp({ data { return { inputValue: '', list: ['1號', '2號', '3號'] , setMeal: 'china america', isShowMeal: false , } }, methods: { handleAddItem { this.list.push(this.inputValue) this.inputValue = '' }, welcomeBtnClick{ // alert('111') this.content = 'huanying' }, byeBtnClick{ // alert('222') this.content = 'baibai' }, showOrHideBtnClick{ this.isShowMeal = !this.isShowMeal // 將操作者取反 false變成true } }, template: ` laila zoula {{setMeal}} show/not show 增加佳麗 {{item}} ` }).mount("#app")
v-html,v-bind,v-oncev-html 可以將變量返回htmlv-once data中的數據如何變化，模板也不會再次重新渲染v-bind 綁定屬性，不綁定的話就是字符串，不會隨數據變化，簡寫就是直接一個冒號{{message2}}{{message2}}
const app = Vue.createApp({ data { return { message: 'jspang.com', count: 5, message2: 'xxxxxx' } }, methods: { handleItemClick { this.message = this.message == 'jspang.com' ? "技術胖" : "jspang.com" } }, template: ` {{count>2?'大':'小'}} # 三元表達式 在模板中可以使用js的表達式 {{message2}} # 不用v-bind title就是message2字符串 ` }) const vm = app.mount("#app")
v-showv-show是單個判斷，true就顯示，false就不顯示。控制的是css樣式,也就是display:none。如果顯示和隱藏的狀態切換比較頻繁，並且沒有什麼多餘複雜的業務邏輯，建議使用v-show,因為他不會一直渲染你的頁面DOM元素，這或多或少對性能和穩定性有點提升。const app=Vue.createApp({ data{ return{ show: true, } }, template:` JSPang.com ` }) const vm=app.mount("#app")
vue的方法createApp創建一個vue應用const app = Vue.createApp{}
mount掛載到html的dom上app.mount("#app")
根組件vm在使用mount方法時，會返回根組件。返回的是proxy形式的對象mvvmmvvm解釋: 第一個m代表model數據，第一個v代表view視圖，最後兩個字幕vm代表viewModel視圖數據連接層。const app = Vue.createApp({ data { return { message: 'jspang.com' //1.在這裡定義了數據，也就是`model`數據 } }, template: "{{message}}" //2.在這裡定義了模板，也就是`view`， //定義後的自動關聯，就叫做`vm`，viewModel數據視圖連接層。 }) app.mount("#app")
生命周期函數在某一時間會自動執行的函數被動執行的函數，需要手動去點一下，才會執行methods: { handleItemClick { alert('jspang.com') } }, template: "{{message}}"
自動執行函數，mounted，沒有任何操作,就會自動執行8個生命周期函數beforeCreate：在實例生成之前會自動執行的函數created: 在實例生成之後會自動執行的函數beforeMount: 在模板渲染完成之前執行的函數mounted: 在模板渲染完成之後執行的函數beforeUpdate ：當data中的數據變化時， 會立即自動執行的函數updated：當data中的數據發生變化，頁面重新渲染完後，會自動執行的函數beforeUnmount :當Vue應用失效時，會自動執行的函數unmounted : 當Vue應用失效時，且DOM完全銷毀之後，會自動執行
vue2和3生命周期函數對比setup :開始創建組件之前，在beforeCreate和created之前執行。創建的是data和methodonBeforeMount : 組件掛載到節點上之前執行的函數。onMounted : 組件掛載完成後執行的函數。onBeforeUpdate: 組件更新之前執行的函數。onUpdated: 組件更新完成之後執行的函數。onBeforeUnmount: 組件卸載之前執行的函數。onUnmounted: 組件卸載完成後執行的函數onActivated: 被包含在中的組件，會多出兩個生命周期鉤子函數。被激活時執行。onDeactivated: 比如從 A 組件，切換到 B 組件，A 組件消失時執行。onErrorCaptured: 當捕獲一個來自子孫組件的異常時激活鉤子函數（以後用到再講，不好展現）。Vue2--------------vue3beforeCreate -> setupcreated -> setupbeforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmountedactivated -> onActivateddeactivated -> onDeactivatederrorCaptured -> onErrorCaptured
模板的動態參數用[xxx] xxx表示變量名 這樣就是動態參數const app = Vue.createApp({ data { return { message: 'xxxx', name: 'title', event: 'click' } }, methods: { hanldClick{ alert('歡迎光臨紅浪漫') } }, template:` {{message}} ` }) const vm = app.mount("#app")
阻止默認事件prevent默認提交
computed計算屬性，watch監聽器方法methods：只要頁面重新渲染，就會重新執行方法，隨便哪裡更新了，就會更新計算屬性computed:當計算屬性依賴的內容發生變更時，才會重新執行計算。就是和他相關的東西變了，這個值才會變。必須要返回一個值，而且在頁面渲染的同時就會執行裡邊的業務邏輯。computed擅長處理的場景：一個數據受多個數據影響watch 偵聽器的作用就是偵聽一個data中的值的變化，變化後可以寫一個方法，就是執行業務邏輯。watch擅長處理的場景：一個數據影響多個數據。界面渲染的時候不會執行，要等相關的數據變化後才執行。computed 和 method都能實現的功能，建議使用computed,因為有緩存，不用渲染頁面就刷新。computed 和 watch 都能實現的功能，建議使用 computed，因為更加簡潔。const app=Vue.createApp({ data{ return{ message:'jspang.com' , price: 10, count: 2, } }, methods:{ getTotal{ // return this.price * (this.count ); return Date.now }, addCount{ this.count }, }, watch:{ count(current, prev){ console.log('count changed watch') console.log('現在的值watch：',current) console.log('變化前的值watch：',prev) } }, computed:{ total{ return this.price * this.count; }, getTime{ return Date.now; }, countComputed(current, prev){ console.log('count changed computed') console.log('現在的值computed：',current) console.log('變化前的值computed：',prev) } }, template:` {{getTime}} {{getTotal}} {{total}} more {{countComputed}} ` }) const vm=app.mount("#app")
模板綁定樣式用普通字符串進行綁定使用樣式就是用v-bind綁定變量，變量就是定義好的樣式名字用數組進行綁定，true代表綁定，false表示不綁定Demo14 .red {color:red} .green {color: green} .background {background-color: yellow} .redImport {color: red !important;} const app=Vue.createApp({ data{ return { classString:'red', classObject:{red:true,background:true}, classArray1:['green','background',{redImport:true}], classArray2:['green','background',{red:true}], } }, template:` 1 2 ` }) const vm=app.mount("#app")
組件,component來生成一個組件，可以在模板中直接調用app.component('sonCom',{ template:` SonCom `})template:` JSPang.com `
區分父子組件，被調用的是子組件，主動調用的就是父組件行內樣式data{ return{ //..... styleString:'color:orange;', styleObject:{ color:'red', background:'yellow' } }},template:` JSPang.com JSPang.com`
綁定事件方法和參數用methods實現用表達式實現event事件，沒參數就直接方法裡用event，有參數的情況下，在使用的時候要穿$event調用兩個方法要加上括號,中間用逗號隔開const app=Vue.createApp({ data{ return{ count:0 } }, methods:{ addCountClick(event){ this.count ; console.log(event) console.log(event.target) }, addCountClick2(num,event){ this.count = num console.log(event.target) }, handleBtnClick1{ alert(1) }, handleBtnClick2{ alert(2) },}, template:` 目前已點佳麗數量{{count}}. 增加一位佳麗 增加一位佳麗2 增加一位佳麗3 增加一位佳麗4 ` }) const vm=app.mount("#app")
事件修飾符冒泡事件，點add按鈕，上面的handleBtnClick1方法也會觸發，就是冒泡methods:{ addCountClick{ this.count }, handleBtnClick1{ alert(1) }, }, template:` number is{{count}}. add `
stop 阻止冒泡事件 addself 只有點擊道自己的時候才會觸發template:` 點我 目前已點佳麗數量{{count}}. 增加一位佳麗 `
preevent 阻止默認行為，如form提交表單capture 默認的冒泡都是從下到上，用了capture之後就是從上到下template:` //修改了此處 我是最外層的DIV文字 目前已點佳麗數量{{count}}. 增加一位佳麗 `
once 只執行一次增加一位佳麗
passive 解決滾動時性能的修飾符每次事件產生，瀏覽器都會去查詢一下是否有preventDefault阻止該次事件的默認動作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認動作。一般用在滾動監聽，@scoll，@touchmove 。因為滾動監聽過程中，移動每個像素都會產生一次事件，每次都使用內核線程查詢prevent會使滑動卡頓。我們通過passive將內核線程查詢跳過，可以大大提升滑動的流暢度passive和prevent衝突，不能同時綁定在一個監聽器上按鍵，滑鼠修飾符按鍵修飾keydown表示按鍵，響應所有按鍵enter 、tab、delete、esc、up 、down、left、right 這些加上之後，表示響應單獨的按鍵const app=Vue.createApp({ data{ return{} }, methods:{ handleKeyDown{ console.log('keydown') } }, template:` ` }) const vm=app.mount("#app")
滑鼠修飾符常用的就是 left、right、middleconst app=Vue.createApp({ data{ return{} }, methods:{ handleClick{ alert('click') } }, template:` xxxxxx ` }) const vm=app.mount("#app")
數據雙向綁定v-modelinput 雙向綁定textarea 雙向綁定vue中只要寫單標籤就行了，html還是要寫雙標籤checkbox 雙向綁定一個選項，設置一個布爾值來表示多個選項直接可以直接用數組來表示true-value，false-value。true的時候顯示的值，和false的時候顯示的值radio 雙向綁定直接定義一個str字面量修飾符lazy，失去焦點再進行改變，比如按了enter，才會更新number 輸入的是數字，也會變成字符串trim 自動刪除前後的空格，字符中間的不會刪除const app=Vue.createApp({ data{ return{ name: '', list: [], checked:false, str: '', testAreaName: '' } }, methods:{ }, template:` {{name}} {{checked}} {{testAreaName}} {{list}} a b c {{str}} a b c ` }) const vm=app.mount("#app")
,
![2022愛方向和生日是在[質量個性]中](http://img.xinsiji.cc/20220215/1604989894118215680.jpg)
