iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

我的菜很有Vue味~系列 第 11

Day11 Vue directives(v-on & v-bind)

到底什麼式Vue directives

Vue directives簡單來說就是一種可以掛在HTML上的特殊指令,常見的有以下

  • v-on
  • v-bind
  • v-if
  • v-show
  • v-for
  • v-model

v-on

v-on簡單來說就是當他所綁定的事件被觸發時就會去觸發methods裡的函數,這樣說好像不好理解那就用例子來說吧

我們現在body創一個buttom,用v-on這個指令去設定當按鈕被按時會觸發message這個函數,在這裡的v-on我們也可以用@來代替使用,意思是一樣的

在methods裡我們有訂一個函數,當被觸發時就會跑出"按鈕被點擊了"這個信息

最後跑出這個信息的話表示成功了

v-bind

v-bind簡單說就是在Vue中的屬性綁定,我們知道data中的屬性Mustache呈現在template裡,但是現在我們想在Vue裡去綁定HTML的屬性時就會用到v-bind這個指令,補充說一下,因為人類是很懶惰的動物所以這裡v-bind可以用:來代替,那麼現在就來做個簡單的例子吧

在這個例子裡img中的src及class的屬性不會因為被v-bind綁定而失去原本的功能,而被綁定的資料會依data裡的imgSrc和className去更動,所以在這我們只需要去更改data的資料就不用動到原本的HTML了,在被綁定的資料除了「字串」以外也可以使用「物件」或者是「陣列」喔!!!

最後我們就可以在網頁上看到vue的logo了

今天就先到這了,明天見~


上一篇
Day10 Vue模板語法 & V-text、V-html、V-once介紹
下一篇
Day12 Vue Event Handing(v-on)
系列文
我的菜很有Vue味~30

尚未有邦友留言

立即登入留言