延续上篇最後提到 Webpack 设置了别名「@」来取代路径「/src」,然而在模版语法中,「@」则是另外的用途,因此一开始先分辨清楚各自的定义,之後就能运用自如了!本篇这就来简介两个最常使用的简写代表:「@」、「:」。
v-on
:监听事件原生 JavaScript 处理监听事件,要先从 DOM querySelector()
找到目标元素,接着 addEventListener()
将监听事件注册到该元素上,当触发指定事件类型时,再执行 listener callback 函式;这一连串的过程默默缔造出好几行程序码,但在 Vue.js 则不用这般大费周章,只需要在 <template> 中直接对目标元素加上 v-on
监听事件类型及触发事件後的处理函式即可。
像是前阵子突然风靡一时的 POPCAT 点击大赛,我们也可以做个简易版的计次器。
方法一:直接在 <template> 写明表达式。
<h1>{{ clicks }}</h1>
<button type="button" @click="clicks += 1">Click it!</button>
data() {
return {
clicks: 0,
};
},
方法二:透过 methods 调用函式(适用於处理逻辑较繁复时)。
<h1>{{ clicks }}</h1>
<button type="button" @click="counter">Click it!</button>
data() {
return {
clicks: 0,
};
},
methods: {
counter() {
this.clicks += 1;
if (this.clicks % 50 === 0) {
alert(`Already ${this.clicks} clicks.`);
}
},
},
另外还可以直接在事件类型後方追加「事件修饰符」,且修饰符可被串连着使用。
<a @click.stop.prevent="linkToPage">Link</a>
.stopPropagation()
⇒ Vue.js - @eventType.stop
.preventDefault()
⇒ Vue.js - @eventType.prevent
v-bind
:绑定 attribute由於 Mustache 语法无法直接作用在 HTML attribute 上,因此需透过 v-bind
进行绑定。观察模板语法与编译结果之间的差异,便能了解绑定属性的运作方式,通则就是只要 attribute 为 true 就能被编译出来。
一般绑定
<button type="button" :disabled="isUnclickable">
Cannot click!
</button>
data() {
return {
isUnclickable: true,
};
},
编译结果:因为 isUnclickable 为 true,使得该按钮无法点击
<button type="button" disabled="disabled">
Cannot click!
</button>
Object 语法
<button
type="button"
:class="{ important: isImportant, disable: isUnclickable }"
>
Click it!
</button>
data() {
return {
isImportant: true,
isUnclickable: false,
};
},
编译结果:只有 isImportant 为 true,因此 class 不包含 isUnclickable
<button type="button" class="isImportant">
Click it!
</button>
Array 语法
<button type="button" :class="[mainClass, disableClass]">
Click it!
</button>
data() {
return {
mainClass: "important",
disableClass: "unclickable",
};
},
编译结果:依序编译出阵列中所对应的 class name
<button type="button" class="important unclickable">
Click it!
</button>
少打几个程序码累积起来的时间也是相当可观的,况且简写本身好记又好用,下次看到它们可别再搞混其对应的本尊罗!
>>: [Day 07] Sass - Project Structure
硬体选择 -- Part 2 简介 昨天已经提过了最重要的 GPU 了,那今天会着重在其他的零件上,...
Batch Processing 从去年开始写 本系列文 开始到现在,我们着墨的都是现代系统的样子,...
Aloha!又是我少女人妻 Uerica!终於来到第 20 天了 (欢呼),已经过了三分之二了~人说...
目前 Redis 几乎已成为後端微服务架构的必备基础设施,但是 Ktor 官方连 ORM 都没有整合...
前言 我们已经将TableView的Header给设置完毕了,那可以看到IPhone内建的画面: 两...