摘要:第二個是其值是或,確認是否深入監(jiān)聽。一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的,數(shù)組的值變化可以聽到第三個是其值是或,確認是否以當(dāng)前的初始值執(zhí)行的函數(shù)。混合定義來分發(fā)組件中的可復(fù)用功能結(jié)束,撒花文章已同步我的筆記,歡迎大家加,加后人生更加美好
vue.js記錄
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……vue實例 生命周期
beforeCreate:不能訪問this.$el和this.$data用于初始化非響應(yīng)式變量
created:可以訪問this.$data,不能訪問到this.$el屬性,this.$refs內(nèi)容,用于ajax請求,created定義this變量,data沒有定義不能雙向綁定,data沒有定義對象的子對象也是不能雙向綁定
beforeMount:this.$el和this.$data都初始化了,掛載前this.$el的值為"虛擬"的元素節(jié)點,比較少使用
mounted:"虛擬"的Dom節(jié)點被真實的Dom節(jié)點替換,用于獲取VNode信息和操作,this.$refs可以訪問
beforeupdate:響應(yīng)式數(shù)據(jù)更新時調(diào)用,發(fā)生在虛擬DOM打補丁之前
updated:虛擬 DOM 重新渲染和打補丁之后調(diào)用,組件DOM已經(jīng)更新,data數(shù)據(jù)變化時只會觸發(fā)update
beforeDestroy:實例銷毀之前調(diào)用。這一步,實例仍然完全可用,this仍能獲取到實例,用于銷毀定時器、解綁全局事件、銷毀插件對象等操作
destroyed:實例銷毀后調(diào)用,調(diào)用后,Vue 實例指示的所有東西都會解綁定,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀
指令帶有 v- 前綴的特殊屬性
v-html解釋:更新DOM對象的textContent,為了輸出真正的 HTML
還有v-on、v-bind、v-model、v-for、v-if、v-else、v-else-if不展開說明
注意:v-if 與 v-for 一起使用時,v-for 具有比 v-if 更高的優(yōu)先級
v-if和v-show的區(qū)別:v-show適合非常頻繁地切換
事件修飾符:
.stop 阻止冒泡,調(diào)用 event.stopPropagation() .prevent 阻止默認行為,調(diào)用 event.preventDefault() .once事件只觸發(fā)一次
按鍵修飾符:
@keyup.enter……
表單修飾符:
.lazy、.number、.trim
推薦:使用 v-for 的時候提供 key 屬性,以獲得性能提升
說明:使用 key,VUE會基于 key 的變化重新排列元素順序,并且會移除 key 不存在的元素,vue會復(fù)用已有元素,使用兩個input切換會共用,需要使用key讓其獨立
相同類型的元素之間切換,需要加入key防止出現(xiàn)問題
表達式的類型:字符串、數(shù)組、對象(重點)
//1 ===> 解析后 //2 ===>解析后組件
規(guī)范:定義組件名和組件文件名使用camelCase (駝峰命名法),通用組件可以加上base,父組件標(biāo)簽使用kebab-case命名
props規(guī)范:要定義類型要詳細,命名使用camelCase (駝峰命名法)
實戰(zhàn)注意點:如果設(shè)置默認值,不進行自定義傳參,需要直接定義為:default: () => {return xxx},否則會報錯,原因:props default 數(shù)組/對象的默認值應(yīng)當(dāng)由一個工廠函數(shù)返回
//使用prop來傳值: //子組件html{{title}} //js props:["content","value"] 進行驗證,type類型有:Number、String、Boolean、Array、Object propA: { type: Number, default: 100 } //父組件html
注意:父級組件
推薦始終使用 kebab-case 的事件名
$emit方法并傳入事件的名字,來向父級組件觸發(fā)一個事件
//子級動態(tài)組件-is點擊我//父級
//currentTabComponent改變,組件也隨之改變插槽-slot
說明:vue2.6,父組件使用插槽的v-bind能夠訪問子組件中的數(shù)據(jù)
注意:v-slot只能添加在一個 上
//子級定義keep-alive//父級{{data.user.name}}
主要用于保留組件狀態(tài)或避免重新渲染,include(只有名稱匹配的組件會被緩存),exclude(任何名稱匹配的組件都不會被緩存)
:max="10"(最多可以緩存多少組件實例)
相對應(yīng)的周期函數(shù)為:activated(keep-alive 組件激活時調(diào)用),deactivated(組件停用時調(diào)用)
更便利的方式為:路由設(shè)置元信息keepAlive: true,進行設(shè)置自定義指令
作用:進行DOM操作
//全局定義 Vue.directive("focus", { inserted: function (el) { el.focus() } }
鉤子函數(shù)
bind:指令第一次綁定到元素時調(diào)用
inserted:被綁定元素插入父節(jié)點時調(diào)用
unbind:只調(diào)用一次,指令與元素解綁時調(diào)用
鉤子函數(shù)參數(shù)
el:指令所綁定的元素
第二個參數(shù)的binding的value為指令的綁定值,值可以是對象的字面量
作用:文本數(shù)據(jù)格式化
//全局過濾器監(jiān)視數(shù)據(jù)變化-watch{{ dateStr | date }}{{ dateStr | date("YYYY-MM-DD hh:mm:ss") }}//局部過濾器 filters: { filterName: function(value, format) {} }
作用:當(dāng)表達式的值發(fā)生變化后,會調(diào)用對應(yīng)的回調(diào)函數(shù)完成響應(yīng)的監(jiān)視操作
watch:{ info:function(val,oldVal){ console.log("當(dāng)前值為:" + val, "舊值為:" + oldVal) } } 選項包括有三個 第一個是handler:其值是一個回調(diào)函數(shù),即監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)。 第二個是deep:其值是true或false,確認是否深入監(jiān)聽。(一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的,數(shù)組的值變化可以聽到) 第三個是immediate:其值是true或false,確認是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)。混合(mixin)
定義:mixins:[mixin]
來分發(fā) Vue 組件中的可復(fù)用功能
結(jié)束,撒花~~~
文章已同步我的github筆記https://github.com/ymblog/blog,歡迎大家加star~~,加star后人生更加美好……
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98049.html
摘要:菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數(shù),可以通過來返回函數(shù)值。它們都有前綴,以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學(xué)習(xí)了js,取得進步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...
摘要:更多資源請文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機化排序算法實現(xiàn)學(xué)習(xí)筆記數(shù)組隨機排序個變態(tài)題解析上個變態(tài)題解析下中的數(shù)字前端開發(fā)筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛?cè)腴T的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請Star:https://github.com/maidishike... 文章轉(zhuǎn)自:https://github.com/jsfr...
摘要:官網(wǎng)地址聊天機器人插件開發(fā)實例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現(xiàn)購物車場景前端掘金本文是上篇文章的序章,一直想有機會再次實踐下。 2道面試題:輸入URL按回車&HTTP2 - 掘金通過幾輪面試,我發(fā)現(xiàn)真正那種問答的技術(shù)面,寫一堆項目真不如去刷技術(shù)文章作用大,因此刷了一段時間的博客和掘金,整理下曾經(jīng)被...
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了一般來說,差不多到了轉(zhuǎn)正的時候,會進行總結(jié)或者分享會議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準(zhǔn)備轉(zhuǎn)正了!一般來說,差不多到了轉(zhuǎn)正的時候,會進行總結(jié)或者分享會議!那么今天我就...
閱讀 1596·2023-04-25 15:50
閱讀 1314·2021-09-22 15:49
閱讀 2941·2021-09-22 15:06
閱讀 3603·2019-08-30 15:54
閱讀 2341·2019-08-29 11:33
閱讀 2126·2019-08-23 17:56
閱讀 2155·2019-08-23 17:06
閱讀 1304·2019-08-23 15:55