Vue2 指令

指令

• 内容渲染指令
  • v-text（会覆盖内容节点中原有的内容）
  • {{ }}（只能用在元素的内容节点中，不能用在属性节点中）
  • v-html
• 属性绑定指令
  • v-bind:（可以简写为:）
• 事件绑定指令
  • v-on:（可以简写为@）
  • 事件修饰符（@click）
    • .prevent：阻止默认行为
    • .stop：阻止事件冒泡
    • .capture：以捕获模式触发当前的事件
    • .once：绑定的事件只触发1次
    • .self：只有在event.target是当前元素自身时触发事件
  • 按键修饰符（@keyup）
    • .enter：响应Enter键
    • .esc：响应Esc键
• 双向绑定指令
  • v-model适用的标签
    • input
      • type="radio"
      • type="checkbox"
    • textarea
    • select
  • v-model指令修饰符
    • .number：将数值字符串转为数值类型（如果首次输入的是非数值类型，则无法转换；如果首次输入的是数字类型之后输入的是非数值类型，则会去掉非数值部分）
    • .trim：过滤首尾空白
    • .lazy：在change时更新，而非输入时。（当input失去焦点时，才同步model）
• 条件渲染指令
  • v-if：创建和移除元素来控制显示隐藏（默认不需要展示，之后可能也不需要展示，使用场景更佳）
  • v-show：添加或移除display:none样式来控制显示隐藏（频繁切换，v-show性能更好）
  • v-else-if：配合v-if、v-else使用，使用较少
  • v-else：配合v-if使用
• 列表渲染指令
  • v-for：配合:key使用。key只能使用字符串或数值类型，不能使用对象或布尔类型，key值不允许重复。

内容渲染

<p v-text="username"></p>
<p>{{ gender }}</p>
<p v-html="address"></p>

属性绑定

<input v-bind:placeholder="placeholderText">
<!--  v-bind: 简写为 :  -->
<input :placeholder="placeholderText">

<img v-bind:src="imgSrc">
<img :src="imgSrc">

事件绑定

绑定事件时可以通过()传递参数。

<!--  Vue 提供内置变量，名字叫 $event 它是原生 DOM 事件对象  -->
<button v-on:click="add(1, $event)">add</button>
<!--  默认不带参数，在 add2 形参上也可以接收 event 事件  -->
<button @click="add2">add2</button>

事件修饰符

<!--  @click.prevent 阻止默认事件，等同于 e.preventDefault() -->
<a href="http://www.baidu.com" @click.prevent="show">跳转</a>

<!-- @click.stop 阻止事件冒泡，等同于 e.stopPropagation() -->
<div @click="divClick" style="background-color: aqua;height: 50px">
    <button @click.stop="btnClick" style="margin: 10px">btn</button>
</div>

按键修饰符

<input type="text" @keyup="typing">

<input type="text" @keyup.enter="submit" @keyup.esc="clearText">

双向绑定

<input type="text" v-model="username">

<select v-model="address">
    <option value="0">请选择</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
</select>

指令修饰符

<input type="text" v-model.number="age">

<input type="text" v-model.trim="username">

<input type="text" v-model.lazy="username">

条件渲染

<div v-if="flag">v-if</div>

<div v-show="flag">v-show</div>

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

列表渲染

<ul>
    <li v-for="item in list">{{ item.id }} - {{ item.name }}</li>
</ul>

<ul>
    <li v-for="(item, index) in list" :key="item.id" :title="item.name + index">{{ index }} - {{ item.id }} - {{ item.name }}</li>
</ul>