[鼠年全马] W21 - Vue心得笔记 - 指令篇(后)

Hi, there
端午连假每日一篇Day2来啰~

昨天提到的指令都是基础的喔~闭着眼睛都要知道怎么写的那种!!
忘记的赶快回去複习-[鼠年全马] W20 - Vue心得笔记 - 指令篇(前)

再来接续昨天最后提到的v-for迴圈中有用到的v-bind指令

#v-for接续

<div v-for="(item,index) in 10" v-bind:key="index">{{ item }}</div>

昨天在这里写了一个v-bind:key, 这是甚么意思呢? 为什么要加这个在迴圈中?

要加入这个的原因我们可以看看Vue官网关于v-for的部分下方

意思就是说, 当阵列的资料有做更动时, 与以往的整个页面资料重新渲染的做法不同
Vue只要去渲染与目前呈现的画面资料不同之处就好, 而要找不同之处就需要有个对应key值来对应其内容是否有改变
如此这般, 各位客官是否能理解呢

#v-bind

v-bind顾名思义是拿来绑的, 绑甚么呢? 绑你
可以看看Vue官网用途说明

是用来动态绑定attribute的~
例如img的src

<img v-bind:src="yourSrc" />

或是a的href

<a v-bind:href="yourHref"></a>

或是v-for里面用到的key
任何attribute都可以拿来绑定, 这个指令可说是第一重要的!!!

另外, v-bind可以简写, 只加上冒号就可以了, 例如:

<img :src="yourSrc" /><a :href="yourHref"></a><div v-for="(item,index) in 10" :key="index">{{ item }}</div>

#v-model

如果刚刚v-bind是第一重要, v-model大概就是第二了!!
有了v-model就可以无痛使用出资料双向绑定的功能
在[鼠年全马] W19 - Vue心得笔记 - MVVM篇也有用到过
用途是将表单元件输入的资料绑定到Vue元件的data
写法就直接参考MVVM篇吧~(偷懒)

#v-on

v-on指令就等于原生js的onXXX事件
这边就举例最常用到的事件: click

<button v-on:click="clickMe">小力点我</button>

clickMe事件的部分就会连结到Vue元件中的 methods -> clickMe(){}

var app = new Vue({    el: '.app',    ...,    methods: {        clickMe(){            // do something        },    }    })

其他常用的事件还有例如 keyup, 也是相同写法

<input v-on:keyup="keyUpMe" />

另外, v-on也可以简写成@, 例如:

<button @click="clickMe">小力点我</button><input @keyup="keyUpMe" />

#v-on修饰符

在v-on指令中, 还多了一项有趣的东西 - 修饰符
可以看到Vue官网介绍修饰符的部分

像在原生js就很常用到的stopPropagation以及preventDefault也在其中

那修饰符怎么使用呢?
很简单~直接用.串联起来就好, 例如:

//阻止小力点我产生冒泡事件<button @click.stop="clickMe">小力点我</button>

最后, 在官网上还有四个指令没有提到

这四个说实话我没有用过也很少用, 六角课程中也没提到xD
待我日后研究后, 再来出一篇 指令篇(外传) 吧