Day 05:简写好用一直用-v-on、v-bind

延续上篇最後提到 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>
  • Vanilla.js - event.stopPropagation() ⇒ Vue.js - @eventType.stop
    停止事件传递
  • Vanilla.js - event.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 8 Dart语言-函数Function

>>:  [Day 07] Sass - Project Structure

[DAY 04]环境建置 : 硬体(2)

硬体选择 -- Part 2 简介 昨天已经提过了最重要的 GPU 了,那今天会着重在其他的零件上,...

Batch Processing (1) - Batch Processing with Unix Tools

Batch Processing 从去年开始写 本系列文 开始到现在,我们着墨的都是现代系统的样子,...

【在厨房想30天的演算法】Day 20 演算法 : 最小生成树 MST Kruskal、Prim

Aloha!又是我少女人妻 Uerica!终於来到第 20 天了 (欢呼),已经过了三分之二了~人说...

[Day 25] 实作 Redis Plugin 整合 Redis Coroutine Client

目前 Redis 几乎已成为後端微服务架构的必备基础设施,但是 Ktor 官方连 ORM 都没有整合...

Swift纯Code之旅 Day24. 「各个TableViewHeader下的Cell显示(1)」

前言 我们已经将TableView的Header给设置完毕了,那可以看到IPhone内建的画面: 两...