【Vue非全解】模板、指令与修饰符

1. 三种写模板template的方式 § ⇧

1. Vue完整版，写在HTML里
2. Vue完整版，写在选项options里
3. Vue非完整版，配合*.vue文件

Vue完整版，写在HTML文件中

• Vue2.6写法

  1 2 3 4

  <div id=xxx> {{n}} <button @click="add">+1</button> </div>

  1 2 3 4 5

  new Vue({ el: '#xxx', data: {n: 0}, // data 可改写成函数 methods: {add() {...}} })

• Vue3.x写法

  1 2 3

  import { createApp } from 'vue' createApp(App).use(router).use(store).mount('#app') // el 属性不再适用，而挂载时的 mount 也无需再加上 `$`

Vue完整版，写在选项options里

1

<div id=app></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

new Vue({
    template: `
        <div>
            {{n}}
            <button @click="add">+1</button>
        </div>
    `,
    data: {n: 0}, // data 可改写成函数
    methods: {add() { this.n += 1}}
}).$mount('#app')

• 注意一个细节：div#app会被替代，即替换后，就不存在#app的div了

Vue非完整版，配合*.vue文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
    <div>
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>
<script>
    export default {
        data() {return {n: 0}}, // data 必须为函数
        methods: {add() {this.n += 1}}
    }
</script>
<style>这里写CSS</style>

• *.js中引入使用

  1 2 3 4

  import Xxx from './xxx.vue' // Xxx 是一个 options 对象 new Vue({ render: h => h(Xxx) }).$mount('#app')

2. 模板语法v-html v-on v-bind v-if v-for v-show § ⇧

1. 展示内容
2. 绑定属性
3. 绑定事件
4. 条件判断
5. 循环操作
6. 显示/隐藏

展示内容

表达式

• {{object.a}}表达式
• {{n + 1}}可以写任何运算（只支持运算，不支持条件判断 if 或循环等）
• {{fn(n)}}可以调用函数，在methods中声明fn
• 如果值为undefined或null，空值就不显示
• 另一种写法为<div v-text="表达式"></div>同{{}}

HTML 富文本内容

• 假设data.x值为<strong>hi</strong>
• <div v-html="x"></div>即可显示粗体的hi

展示源代码文本{{n}}

• <div v-pre>{{n}}</div>
• v-pre不会对模板进行编译

绑定属性

绑定src或其它任意属性

• <img v-bind:src="x" />

v-bind:可简写为:

• <img :src="x" />

绑定对象

• <div :style="{border: '1px solid red', height:100}"> 可以省略默认单位px</div>

绑定事件

v-on:事件名

• 函数名
  • <button v-on:click="add">+1</button>
  • 点击之后，Vue会运行add()
  • 在methods中定义
• 函数名加参数
  • <button v-on:click="fn(1)">xxx</button>
  • 点击之后，Vue会运行fn(1)（不会立即执行）
  • 在methods中定义
• 表达式（可执行代码不支持if..else 支持三目运算符）
  • <button v-on:click="n += 1">xxx</button>
  • 点击之后，Vue会运行n += 1
• 发现函数就加括号调用，否则就直接运行代码
• Vue不会处理运行fn(1)后返回的函数

缩写

• <button @click="add">+1</button>

条件判断

if..else

1
2
3
4
5
6
7
8
9

<div v-if="x > 0">
    x大于0
</div>
<div v-else-if="x === 0">
    x为0
</div>
<div v-else>
    x小于0
</div>

循环操作

• for(value, key) in (obj || array)对象或数组
• 先写value，再写key

• 必须绑定:key=""

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  <template> <div class="container"> <!-- 遍历数组 --> <ul> <li v-for="(value, index) in usersArray" :key="index"> 索引：{{index}} 值：{{value}} </li> </ul> <!-- 遍历对象 --> <ul> <li v-for="(value, keyName) in usersObj" :key="keyName"> 属性名：{{keyName}} 属性值：{{value}} </li> </ul> <!-- 遍历单标签 --> <div class="wrapper"> <div v-for="(value, keyName) in keys" :key="keyName"> <input type="button" v-for="(value, index) in keys[keyName]" :key="index" :value="value" /> </div> </div> </div> </template> <script> export default { data() { return { usersArray: [], usersObj: {}, keys: { 0: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], 1: ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], 2: ["A", "S", "D", "F", "G", "H", "J", "K", "L"], 3: ["Z", "X", "C", "V", "B", "N", "M"], 4: ["SPACE"], }, }; }, }; </script>

• 坑预警:key = "index"有bug

• :key一般用不会重合的值

显示/隐藏

v-show

• <div v-show="n%2 === 0"> n 是偶数</div>

近似等于

• <div :style="{display:n%2===0?'block':'none'}"> n 是偶数</div>
• 注意可以显示在页面中的元素，display不只有block
• 如table的display: table
• 如li的display: list-item
• DOM解耦，高内聚，低耦合 jQuery 虚拟DOM

模板语法小结

Vue模板主要特点有

• 使用XML语法，注意template中的不是HTML
  • XML里与有闭合标签的（更容易写编译器，体积小），如
  • <input name="userName">or<div></div>- HTML
  • <input name="userName" /> - XML or HTML
  • <div /> - XML自闭合标签
• 使用{{}}插入表达式
• 使用v-html、v-on、v-bind等指令操作DOM（Vue声明式编程代替原生 JS 的命令式编程div.innerHTML = x）
• 使用v-if、v-for等指令实现条件判断和循环

其他指令

• v-model在Vue表单里说明
• v-slot在插槽里说明
• v-cloak看文档
• v-once看文档

v-if V.S. v-show

• v-if 是否存在于 DOM 中
• v-show CSS

3. 指令Directive与修饰符.* § ⇧

同义词：命令、指示

指令

什么是指令

• <div v-text="x"></div>
• <div v-html="x"></div>
• 以v-开头的就是指令

语法

• v-指令明:参数=值，如v-on:click=add
• 如果值里没有特殊字符，则可以不加引号
• 有些指令没有参数和值，如v-pre
• 有些指令可以没有值
  • 如<a v-on:click.prevent href="https://www.baidu.com">Baidu</a>
• 也可以有值
  • 如<a v-on:click.prevent="xx" href="https://www.baidu.com">Baidu</a>
  • 点击 a 标签不会跳转链接

修饰符

什么是修饰符

• 修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
• Vue #修饰符

支持修饰符的指令

• @click.stop="add"表示阻止事件传播/冒泡
• @click.prevent="add"表示阻止默认动作
• @click.stop.prevent="add"表示以上两种操作同时执行

修饰符的种类

修饰符的种类：按指令支持分

• v-on支持的主要有 .{keycode | keyAlias}、.stop、.prevent、
  • 其他.capture、self、once、passive、native
  • 快捷键相关：.ctrl、.alt、.shift、.meta、.exact
  • 鼠标相关：.left、.right、.middle、
• v-bind支持的有.prop、.camel、.sync
• v-model支持的有 .lazy、number、trim

内置修饰符的种类：按作用分

• 事件修饰符
• 按键修饰符
• 系统修饰符
• 鼠标按钮修饰符

事件修饰符

vue 官方解释 ：在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节

• .stop 阻止事件的传播或者冒泡
• .prevent 阻止事件的默认事件
• .capture 事件为捕获方式
• .self 触发事件的是自己这个元素，而不是内部元素
• .once 事件只会触发一次
• .passive 用来告诉事件监听器，没有调用preventDefault方法，可以提高滚动、滑动性能
• .native 我们不能在组件上监听原生dom事件
• 例如在router-link上不能监听click
• 因此要加上.native修饰符，意为本地的，将他作为原来的html5标签来监听的意思

• 注意：prevent和passive不能一起使用，例如@click.prevent.passive会报错

  1 2 3 4 5

  <!--当点击提交按钮时阻止对表单的提交--> <!--提交事件不再重载页面--> <form v-on:submit.prevent="onSubmit"></form> <!--点击a标签不会跳转链接--> <a @click.prevent href="baidu.com"></a>

按键修饰符

KeyBoardEvent.key的有效按键

• 可以传入键盘上的有效按键键名（F1 等不可以，需自定义）
• 可以写ASCII码，也可以写字母等等，实际上是KeyBoardEvent.key的有效按键，已被弃用，Vue3.x不再支持
• ASCII码是keyCode的值
• Vue.config.keyCodes已弃用，将不再支持

别名（alias）

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left

• .right

  1 2	<!-- 当用户在键盘 敲下enter回车键时，会触发xxx事件 --> <input type="text" @keypress.enter="xxx">

Vue3 迁移策略 —— 按键修饰符（破坏性改动）

• vue 3 官方文档原文—— keycode modifiers

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

  new Vue({ template: ` <div> {{n}} <a v-on:click.prevent="xx" href="https://www.baidu.com">Baidu</a> <input @keypress.13="y" /> <input @keypress.enter="y" /> </div> `, data: {n: 0}, methods: { x() { console.log("xxx") }, /* y(e) { if(e.keycode === 13) { console.log("用户敲了回车") } }, */ y(e) { console.log("用户敲了回车") }, } })

系统修饰符

• .ctrl
• .alt
• .shift
• .meta

• .exact

  1 2 3 4 5 6 7 8 9

  <!-- Alt + C --> <input v-on:keyup.alt.67="clear"> <!-- Ctrl + Click --> <div v-on:click.ctrl="doSomething">Do something</div> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button v-on:click.ctrl.exact="onCtrlClick">A</button> <!-- 不加exact的话可以一起按下别的键-->

鼠标按钮修饰符

• .left
• .right
• .middle

4. .sync 修饰符 § ⇧

• .sync 修饰符文档

场景描述

• 爸爸给儿子钱，儿子要钱花，示例
• 儿子打电话（触发事件）想爸爸要钱

需求抽象

• 当一个子组件改变了一外部传入的属性时，此变化也会同步到父组件中所绑定的数据中
• 子组件要“通知”父组件，才可以改变

Vue 规则

• 子组件不可修改props外部数据，否则会出现警告，数据会被父组件的重新覆盖
• 子组件中使用发布（发出）$emit(eventName, fn | 单个 JavaScript 表达式)，可以触发事件，并传参（eventBus）
  • 即事件回传机制明确通知父组件，真正的更新还是父组件自己实现
• 注意子组件发布（发出） $emit('update:money ', money - 100)， 在事件后传入的应该是一个值，而不是一个其他表达式等，如 money = money - 100 返回的是undefined
• 父组件中在插入的子组件标签上使用$event（订阅）可以获取（监听）子组件的$emit发布（发出）的数据，重新赋值给数据，实现同步更新
• 即事件的“发布订阅”
• 事件名eventName的命名规则为'update:myPropName'，注意是有带冒号的字符串

Child.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<template>
<div class="child">
  {{money}}
  <!--
  <button @click="spendMoney">
  -->
  <button @click="$emit('update:money', money - 100)">
    <span>花钱</span>
  </button>
</div>
</template>

<script>
export default {
  props: ["money"],
  /*
  methods: {
      spendMoney() {
          this.$emit("update:money", this.money - 100)
      },
  },
  */
};
</script>

<style scoped>
.child {
  border: 3px solid yellowgreen;
}
</style>

• 子组件需要修改从实例引入的 props 数据 money，不直接改，而是使用了 $emit 将 money 处理并且传参

由于这种场景很常见

• .sync可实现以上场景，Vue内置了EventBus事件总线传值方法，.sync是EventBus的语法糖，封装为修饰符，代替了 $event 的使用
• 父组件中插入的子组件标签上使用:money.sync="total"等价于:money="total" v-on:update:money="total=$event"
• 父组件中对属性使用.sync修饰符，同步子组件中相应数据的修改

Father.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<template>
<div id="app" class="app">
  App.vue 我现在有{{total}}
  <hr />
  <Child :money.sync="total" />
  <!--
    <Child :money.sync="total" @update:money="total = $event" />
  -->
  <!--
    <Child :money="total" @update:money="total = $event" />
  -->
  <!--
    <Child :money="total" v-on:update:money="total = $event" />
  -->
  <!--
    <Child :money="total"/>
  -->
</div>
</template>

<script>
import Child from "./components/Child.vue";

export default {
  name: "App",
  components: {
    // Child: Child,
    // 简写
    Child,
  },
  data() {
    return {
      total: 10000,
    };
  },
};
</script>

<style lang="scss">
#app {
  border: 3px solid orange;
  padding: 10px;
}
</style>

• 插入的子组件标签，添加监听，事件名update:money，意图是更新赋值total = $event，即拿到捕获到的参数，也就是子组件发过来的 money - 100 的值

注意

• 带有 .sync 修饰符的 v-bind 不能和 JS 表达式一起使用
• 例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的
• 取而代之的是，只能提供要绑定的 property 名，类似 v-model
• 当子组件需要更新 myProp 的值时，可以显式地触发一个更新事件this.$emit('update:myProp', newValue)，注意是newValue
• 用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用
  • <text-document v-bind.sync="doc"></text-document>
  • 这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器
• .sync只是作为一个编译时的语法糖。它会被扩展为一个自动更新父组件属性的 v-on 监听器，实现表面的“数据双向绑定”

• .sync避免真正的“双向绑定”所带来的维护上的问题，会引起父子组件都以更改数据容易混乱，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

  <template> <div> <p>{{bar}}</p> <p> <ChildInsertToFather :foo.sync="bar"/> </p> <!-- 会被扩展为（等价、语法糖） --> <p> <ChildInsertToFather :foo="bar" @update:foo="val => bar = val"/> <p> <ChildInsertToFather :foo="bar" @update:foo="bar = $event"/> </p> </div> </template> <script> Vue.component('my-comp', { template: '<div @click="increment">+1s</div>', data() { return {copyFoo: this.foo} }, props: ['foo'], methods: { increment: function() { // 当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件 this.$emit('update:foo', ++this.copyFoo) // this.$emit('update:foo', newValue) } } }) new Vue({ data() { return { bar: 0 } } }) </script>

• 小结：vue2.x 修饰符.sync的功能是：当一个子组件改变了一个 prop 的值时，这变化也会同步到父组件中所绑定的对应属性

• 父组件中在插入的子组件标签上，绑定的属性加后缀.sync，并指向父组件中响应的数据<Child :childProp.sync="dadData" />

• 子组件发布（主动通知）给外部$emit('update:childProp', changeDadData)

Vue3.0 移除 v-bind 中的 .sync 修饰符

• vue 3.x 又去掉了 .sync ，合并到了 v-model 里

  1 2 3 4 5

  <!-- vue 2.x --> <MyComponent v-bind:title.sync="title" /> <!-- vue 3.x --> <MyComponent v-model:title="title" />

• :xxx.sync 将被 v-model:xxx 取代

总结 ⇧

四个常用修饰符

• @click.stop="xxx"
• @click.prevent="xxx"
• @keypress.enter="xxx"
• :money.sync="total"

参考文章

• Vue 模板与修饰符.pdf
• Vue #修饰符

相关文章

• 无

• 作者： Joel
• 文章链接：
• 版权声明
• 非自由转载-非商用-非衍生-保持署名
• 河 掘 思 知 简