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了

今天就先到这了，明天见~