vue的指令綁定、事件、冒泡


 

a標簽的屬性綁定:

 

 v-once:就是第一次渲染什么就是什么,不會隨着其他改變而改變,簡言之就是綁定他不讓他的值改變

 

防止跨站腳本攻擊

如果你覺得安全的話,可以不要讓變量的值顯示成字符串

解決方法是:v-html='變量'

 

小結總結:v-once    v-bind    v-html

 

 

5
Vue基礎語法-數據雙向綁定

事件對象的使用方法:

 

直接在定義方法時候傳參也可以,vue里傳參默認就是傳到第一個參數里面去,如果想要傳第二個參數,

 

vue方法中想同時傳兩個參數

 

 

阻止冒泡:e.stopPropagation()這是傳統的方法,但是vue給我們提供了一種新的方法,v-on:mousemove.stop=' '就可以直接防止冒泡了,這個叫做事件修飾符

就是更改孩子的時候不會觸發到爸爸

 

阻止默認:vue里面的一個取消默認的事件,比如,點擊之后會進入百度的頁面的,但是加了v-on:click.prevent=" "之后就不跳轉了

 

既阻止冒泡有阻止默認:v-on:mousemove.stop.prevent=" "就可以了

 

e.which是判斷敲的是哪個鍵盤

 

綁定回車

 

 

獲取當前輸入的值,輸入什么,下面的內容頁跟着改變,注意:v-bind只是數據的單向綁定;v-on:input="change"是監聽輸入事件

 

v-model:數據的雙向綁定,這是vue提供的數據雙向綁定;他可以代替了v-bind:value="value" v-on:input="change"

 

函數methods和計算屬性computed的區別:就是計算屬性會區分開具體的事件,用來監聽相應的數據的,當數據發生變化的時候就會執行相應的操作,而methods函數是當一個dom的數據發生改變的時候就會重新的去渲染一次,不會分析當前的count數據有沒有關系

 

computed計算屬性:vue里面提供的:第一種監聽數據屬性

與methods函數的區別:就是就是在dom傳變量的時候是跟data里面的屬性變量傳值是一樣的寫法,他會分析里面的代碼,用來監聽一個場景

 

 

第二種監聽屬性:watch,可以在里面去寫一個異步操作

watch屬性,也是在vue實例里面的,是用來監聽data里面的哪個屬性值發生的改變,就會執行相應的函數:

 

 

第二個小結:v-on:click可以簡寫成@click; 同樣v-bind:title也可以簡寫成:title

 

 Vue基礎語法-動態添加樣式

動態的去改變HTML的屬性以及css的樣式,

 

可以在vue的實例中computed屬性里面來動態的操作HTML和css的屬性

 

 動態的改變樣式

 

也可以在計算屬性computed去動態的改變:

 

也可以在綁定的時候以數組的形式多傳幾個參數。如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM