Vue監聽的方法有哪些

這篇“Vue監聽的方法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue監聽的方法有哪些”文章吧。

　　Vue  是漸進式框架，自底向上增量開發，是構建數據驅動的web界面，他通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件，與angularjs，相比它小巧，運行快數據綁定都使用{{}}  ，與react相比都提供了 組件化的試圖組件，都集中在核心庫，有豐富的插件庫。

　　1. 常用標簽

　　V-model 雙向關聯

　　V-else  與 v-else在上下相近的標簽里使用，分開就會影響條件的判斷

　　V-for （a ， b）in c      遍歷c ，參數a 代表各個對象，b代表索引

　　V- text 想內部注入文本，標簽內部不再寫內容

　　V-html 內部可以注入標簽，但也是黑客突破網絡的窗口

　　V-bind 可以動態的綁定內容 例如v-bind：src= url在下方模塊的data部分寫路徑

　　如果直接寫入路徑會報錯

　　動態的綁定 component 中  ：is=“name”

　　2、監聽

　　第一種寫法

　　vm.$watch (‘’,function( newvalue , oldvalue){ } )

　　在vm=new vue外部寫的 $watch 是因為在外部調用 ，升成全局 同理 $el

　　第二種寫法

　　直接在vue初始化中通過

　　vue內部寫的

　　watch｛msg:function(newvalue,oldvalue){}

　　3、過濾器

　　（vue 1.0 有內置過濾器 vue2.0 自定義過濾器）

　　filter 是過濾器語法， 寫在 vue前

　　Vue.filter(‘過濾器名字’,function(value){

　　if(value ){

　　return //具體操作

　　}

　　if(value){

　　return //具體操作

　　}

　　})

　　調用

　　{{ 值 | 過濾器名字 }}

　　4、事件阻止冒泡

　　1）函數內部阻止事件冒泡 e.cancelBubble=true; // 在 vue 的methods 內聲明事件是添加原話

　　2）標簽內阻止事件冒泡 @click.stop=“show1()” //添加一個stop 即可，其他正常寫

　　3）鍵盤事件 keydown 函數中獲取鍵盤編碼keyCode

　　4）在標簽內直接綁定按鍵事件 （英文名或鍵盤碼）

　　@keyup.13=“functionname()” @keyup.enter=“functionname()”

　　5、生命周期 共11個

　　通俗理解是一個組件之類的加載失效的過程，類比于生命的開始與結束，這些特殊的時間節點被當做事件的觸發條件，省去了綁定事件發生的代碼量。

　　箭頭函數this指向父級 不是實例，所以不能綁定生命周期

　　常用的幾種

　　beforeMount在掛載開始之前被調用

　　Mounted  el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用

　　6、傳值

　　1）父傳子

　　（通過在子組件標簽上綁定自定義屬性式的指令，值為傳遞的數據，

　　子組件內部通過props屬性名接收（數組形式 加引號【“ name”】），子組件的模板內，

　　直接解析加載接收的屬性名。）

　　調用

　　2）子傳父

　　（通過在 子組件標簽上綁定自定義事件，子組件內部通過$emit進行數據推送

　　父組件通過事件調用函數參數進行數據接收）

　　子組件script中

　　父組件body中

　　父組件的方法中將收到的數據賦予data

　　3）平行組件傳值（非父子組件 之間 傳值—空vue對象$emit(‘’,數據) 發送 $on 接收）

　　可看做將$emit升為全局

以上就是關于“Vue監聽的方法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。