模板中的 Directive 指令 (下)

指令 Directive

表单绑定

使用 v-model 建立表单的双向资料绑定,ex: inputtextareaselect元素。对於不同的 input 类型,v-model会有对应监听的属性和事件,例如....

类型 使用属性 监听事件
texttextarea value input
checkboxesradiobuttons checked change
select value change

例如: text 或 textarea 会监听元素 value 的 input 事件

ex:

<!-- 单一文字框 -->
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

<!-- 文字方块 -->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- 复选框 (绑定给同一个阵列)-->
<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

<!-- 单选框 -->
<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

<!-- 下拉选项 -->
<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

v-model 修饰符 Modifiers

  • .lazy
    • 将 input 事件改为 change 事件,避免更新次数过於频繁
  • .number
    • 将使用者输入的值强制转为 Number
  • .trim
    • 过滤掉前後的空白字字元

事件绑定

使用 v-on directive 监听 DOM 的事件,并执行相关的 function,例如: v-on:click="methodName" 也可缩写为 @click="methodName"

也可以有多个事件处理
ex:

<!-- both one() and two() will execute on button click -->
<button @click="one($event), two($event)">
  Submit
</button>
// ...
methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...
  }
}

v-on 修饰符

v-model 一样,事件的 v-on 也有修饰符可以使用。在处理事件时,很常使用 event.preventDefault()event.stopPropagation() ,虽然可以把这些 DOM 事件相关的部分写入 methods中,但尽可能 methods 单纯的包含资料逻辑就好。

  • .stop 阻挡事件冒泡
  • .prevent 阻挡预设行为
  • .capture 以捕获形式触发事件
  • .self 只触发元素自己的事件
  • .once 指定事件只触发一次
  • .passive 执行预设行为

ex:

<form v-on:submit.prevent="onSubmit">...</form>

.prevent修饰符告诉v-on这个 directive 在触发事件时,要去呼叫 event.preventDefault()

<!-- click 事件只会被触发一次 --> 
<a @click.once="doThis"></a>

补充 passive

常用在手机装置的效能优化,每次事件发生,浏览器会去查询是否有 preventDefault 阻止此事件的预设行为;而使用 passive 是告诉浏览器,不用查了,我没使用 preventDefault 阻挡预设行为

下篇预告

  • 元件

每日一句:
周休三日,恰到好处 /images/emoticon/emoticon07.gif


<<:  【Day9】[资料结构]-杂凑表Hash Table

>>:  Day05 - [丰收款] 继续把加密这件事看下去

[ Day 26 ] 实作一个 React.js 网站 2/5

延续昨天的内容,我们 React.js 专案的基本设定都已经完成了,今天就要来实作 Navbar ...

[Day 16] 从头开始-从入门到 Swift 语法梳理

开发必须的设备以及相关的设定 入门开发的几个必要条件:一台 Mac , 苹果帐号 ,以及一个一般人智...

29 - 有效的使用 Observability 的资料 (3) - 资料的生命周期管理

有效的使用 Observability 的资料 系列文章 (1/4) - 透过 Machine Le...

DAY 28- BIP32- HD wallet

「BIP BIP BIP 」 BIP 由於区块链没有一个中心系统,在协议上没有办法由中心统一更新, ...

LeetCode 双刀流: 1. Two Sum

1. Two Sum 我们挑选 LeetCode 中的 1. Two Sum 作为我们实作练习的第...