Vue2 指令

Vue About 2,779 words

指令

  • 内容渲染指令
    • 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-ifv-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>
Views: 1,123 · Posted: 2022-12-21

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh