1. 1. Document
      1. 介绍
      2. 应用实例
      3. 模版语法
      4. 计算属性和侦听器
      5. Class 与 Style 绑定
      6. 条件渲染
      7. 列表渲染
      8. 事件处理
      9. 表单输入绑定
      10. 组件
      11. 可复用性&混合
   2. Vuex Document
      1. Modules
   3. ほしのかけら

这是一篇我对 Vue3 中文文档等学习资料的复述，其中是对信息的提取和整理，正在完善中。

Document

介绍

带有前缀“v-”的属性被称为指令，这是 Vue 提供的特殊属性。

“v-bind”，如“v-bind:title=”message””，表示将 title 属性和当前活跃的 message property 保持一致。

“v-on”指令添加事件监听器，如“v-on:click=”reverseMessage””，其中 reverseMessage 是在其它地方定义的方法。

“v-model”指令双向绑定，表单状态和应用状态之间的双向绑定，如“v-model=”message””。

“v-if”条件指令，“v-for”循环指令，如“v-if=”seen””，“v-for=”todo in todos””。

应用实例

模版语法

“v-html”输出真正的 HTML，比如：<span v-html="rawHtml"></span>。

“v-bind”作用 HTML attribute，比如：<button v-bind:disabled="isButtonDisabled">按钮</button>。

指令：这是带有v-前缀的特殊 attribute，除了v-for和v-on，指令的预期值是单个 JavaScript 表达式；

• 有的指令接受参数，指令中它从冒号开始，比如，<a v-bind:href="url"> website </a>；利用方括号设置动态参数，比如，<a v-bind:[attributeName]="url"> website </a>；
• 修饰符在指令中从半角句号开始，比如，<form v-on:submit.prevent="onSubmit"> </form>。

使用:href="url"缩写v-bind:href="url"，使用@click="doSth"缩写v-on:click="doSth"；缩写里的参数可以是动态参数。

计算属性和侦听器

模版里包含响应式数据的复杂逻辑，模版显得不再是简单的和声明性的，这时使用“计算属性”，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
	export default {
		name: 'IsBooked',
		data() {
			return {
				arrived: 3
			}
		},
		computed: {
			book() {
				return this.arrived > 2 ? 'Yes' : 'No';
			}
		},
		methods: {
			calculateBook() {
				return this.arrived > 2 ? 'Yes' : 'No';
			}
		}
	}
</script>

上例中，“方法”的效果和计算属性一样，但是每次重新渲染，方法都会重新执行，而计算属性会根据依赖关系不变来缓存。

计算属性默认只有 getter，在需要的时候添加 setter：

1
2
3
4
5
6
7
8
9
10

computed: {
		book{
			get() {
				return this.arrived > 2 ? 'Yes' : 'No';
			},
			set() {
				this.arrived = 0;
			}
		}
}

“侦听器”在执行异步或开销大的时候使用，默认浅监听，deep: true开启深度监听。

Class 与 Style 绑定

绑定 class 可以使用“对象语法”，指令:class和属性class共存，后者高优先级，对象语法包括返回对象的计算属性，此外也能用“数组语法”绑定 class；如果在组件上添加 class，模版里如果是单个最外层节点，这个节点的 class 会继承，如果并行存在多个最外层节点，使用$attrs.class指定节点继承。

绑定 style 和上述绑定 class 类似，可以使用“对象语法”、“数组语法”，Vue 会自动添加浏览器前缀，还可以给 property 用数组提供多重值，会得到最后一个被浏览器支持的值。

条件渲染

v-if、v-else-if、v-else惰性渲染，v-if可以在<template>上使用。v-show也用于条件渲染，但是它使元素切换display。

列表渲染

使用“v-for”进行item in items形式的循环渲染，items 可以是数组或对象，对象的时候 item 可以有 3 个参数，value, name, index。

需要显示过滤后的结果的时候，配合 filter 使用计算属性或者方法。

v-for和v-if一同使用，v-for的优先级更高。

事件处理

监听事件：“监听事件”用指令v-on，比如，v-on:click="methodName"，也可以缩写成@click="methodName"。

事件处理方法：JavaScript 代码可以写在v-on中，比如，@click="counter += 1"，但是事件处理的逻辑复杂，那么用v-on接收一个“事件处理方法”，比如<button @click="greet">Greet</button>。

内联处理器中的方法：使用“内联处理器中的方法”，比如，<button @click="say('hi')">Say hi</button>，如果要在方法里访问原始 DOM 事件，要传递特殊变量$event，比如<button @click="warn('warn', $event)"> Submit </button>。

多事件处理器：处理多个方法，用逗号分隔。

修饰符：有事件修饰符、按键修饰符和系统修饰符，形如<div @scroll.passive="onScroll">...</div>。

• 传递的特殊变量$event的 event 是原生的；
  • console.log(event, event.__proto__.constructor) 查看圆形和构造函数；
• 事件被挂载在当前元素；
  • console.log(event.target)查看事件的挂载点，console.log(event.currentTarget)查看事件的触发点。

表单输入绑定

为v-model添加修饰符，.lazy、.number、.trim。

组件

Props：

• “传递静态或动态 Prop”，以 HTML attribute 的形式传递静态值（字符串），以v-bind带参数的形式传递动态 prop（字符串，数字，布尔，数组，对象，函数）；v-bind不带参数，对于对象，会把它的所有 property 都作为 prop 传入；
• Props 是“单向数据流”，初始化成 data 或 computed；
• “Prop 验证”不使用字符串数组，使用对象，它有特殊属性type, required, default, validator。

非 Prop 的 Attribute：

• “Attribute 继承”；
• inheritAttrs: false，“禁用 Attribute 继承”，在要把 prop 应用到其它元素上时使用v-bind="$attrs"；
• 使用v-bind="$attrs"完成“多个根节点上的 Attribute 继承”。

插槽：

• 基本使用；
• 具名插槽；
• 作用于插槽；
• 动态插槽名。

提供/注入：

动态组件 & 异步组件：

• export default { components: { AsyncDemo: () => import('./AsyncDemo') }, ... }

可复用性&混合

mixin 的问题：

• 变量来源不明确，不利于阅读；
• 多 mixin 可能会造成命名冲突；
• mixin 和组件可能出现多对多的关系，复杂度较高。

Vuex Document

Vuex 基本概念：state, getters, action, mutation；

• dispatch, commit, mapState, mapGetters, mapActions, mapMutations；

Modules

ほしのかけら

nextTick：由于异步渲染，data 改变之后，直接获取 DOM 都不是最新的，可以通过$nextTick渲染后回调获取最新 DOM。