Vue實踐 指令和事件

2021-08-11 07:56:18 字數 547 閱讀 9244

vue思想是資料驅動dom,所以你只需要把主要精力放在資料和邏輯上即可,dom的事情交給vue就行了;

指令的作用是當表示式的值發生變化的時候,將某些行為應用到dom上:

vuejs中的一些指令:

1.v-bind:動態更新dom元素的屬性(通常用來繫結dom屬性),例如:

}

//給該元素繫結href屬性,屬性的值是對應vue資料url

v-on:事件***,主要給dom繫結事件的,事件寫在methods選項裡,在函式體內的this指

向當前的vue例項,可以像訪問vue資料(data裡面的資料)那樣訪問函式:

el:"#container",

data:,

filters:,

strclip:function(val,index)

},methods:

else if(!this.datas)}},

computed:}})

v-on:事件名= 「函式名",這裡的事件名可以是(click,dbclick,mouseup等)

Vue實踐 V for指令

當需要將乙個陣列或者物件迴圈遍歷顯示的時候可以使用v for指令,其值類似於item in items 其中items是陣列或者物件,item自然就是其中的一項,in 也可使用 of。當遍歷陣列的時候有乙個可選項index,是當前項的索引 類似與 v for item,index in items ...

Vue 指令與事件

v if v else v else if都是用於邏輯判斷。當值為true的時候元素會被插入,當值為false的時候,元素會被刪除。doctype html html lang en head meta charset utf 8 title title title script src vue.m...

Vue指令之事件修飾符

stop 阻止冒泡 prevent 阻止預設事件 capture 新增事件偵聽器時使用事件捕獲模式 self 只當事件在該元素本身 比如不是子元素 觸發時觸發 once 事件只觸發一次 div class box click divhandler input type button value 戳他...