最开始学习Vue的时候我是直接通过视频学习，然后再通过一些练习，虽然偶尔遇到一些问题会去翻一翻官方文档，但是从来都没有仔细读过官方文档，于是这段时间决定抽空读一读官方文档。

读文档的时候发现了很多我曾经不知道的东西，所以这里决定将它记录下来。

注：本文的代码是运行在Vue3.0的基础上。

基础

因为在HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名。

即在HTML模板部分，虽然使用驼峰命名是能够正确解析的，但还是推荐短横线分割命名。

动态绑定Class

说起来也惭愧，我居然不知道Vue官方推荐的动态绑定Class的方法，平时都是我自己瞎写。

我之前的写法：

<div :class="isActive ? 'active' : ''">test</div>

官方的写法：

<div :class="{ active: isActive }">test</div>

这比我上面写的三元表达式简单多了。

如果一个元素还有其它的类：

我之前的写法：

<div class="otherClass" :class="isActive ? 'active' : ''">test</div>

官方的写法：

<div :class="[isActive ? 'active' : '', 'otherClass']">test</div>

<!-- 官方推荐的写法 -->
<div :class="[{ active: isActive }, 'otherClass']">test</div>

真的是…这种最基础的东西我居然没有注意到应该怎么写。

Input key

v-for遍历对象

在一般的情况下，使用v-for一般是用来遍历数组，但是v-for其实也可以用来遍历对象。

<ul id="v-for-object" class="demo">
  <li v-for="value in object" :key="value">
    {{ value }}
  </li>
</ul>
setup() {
  const object = reactive({
    title: "How to do lists in Vue",
    author: "Jane Doe",
    publishedAt: "2016-04-10"
  });
  return { object };
}

在遍历对象的时候，可以提供三个参数，分别是：键的值、键名、索引。即v-for="(value, name, index) in object"。

但是官方也有提示：在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

所以如果考虑到兼容性问题的话，还是要慎用v-for遍历对象。

事件处理

在编写页面的过程中，往往会有一些需要进行交互的元素，所以需要给这些元素绑定事件。

event为原生DOM事件。

<button @click="test">点我</button>
setup() {
  function test(event) {
    console.log(event);
  }
  return { test };
}

如果点击事件绑定的方法需要附带参数，则可以通过$event获取到原生DOM事件。

<button @click="test(123, $event)">点我</button>
setup() {
  function test(num, event) {
    console.log(num);
    console.log(event);
  }
  return { test };
}

事件修饰符

虽然在方法中可以处理类似于事件冒泡这一类的问题，但是Vue官方希望方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。所以为v-on提供了很多事件修饰符。

  • .stop：阻止单击事件继续传播（阻止事件冒泡）。
  • .prevent：提交事件不再重载页面。
  • .capture：添加事件监听器时使用事件捕获模式。
  • .self：只当在 event.target 是当前元素自身时触发处理函数。
  • .once：点击事件将只会触发一次。
  • .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发。

按键修饰符

如果需要在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

Vue还有系统修饰键和鼠标修饰符，这里就不再重复了。

v-model修饰符

  • .lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步。
  • .number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符。
  • .trim：自动过滤用户输入的首尾空白字符。

这几个修饰符可以说是非常有用了，如果不知道这些的话，还需要写对应的方法进行处理。

data必须是一个函数

我之前只知道data必须是一个函数，但是并不知道为什么，即：

data() {
  return {};
}

这种固定写法，其原因是每个实例可以维护一份被返回对象的独立的拷贝，如果不是一个函数而直接是一个data对象的话，那复用的组件都会使用同一个对象，即更改一个所有其它相同的组件的值都一起被更改。

注：Vue3.0中已经不使用这种方式了。

Prop

传值最基本的方式，在绝大部分父子组件中，我们都是通过这种方式进行传值。

如果不仅仅是父子组件传值，或者一个值在很多个界面都会用到，我会直接选择Vuex。

读官方文档时发现了很多我没有注意到的地方。

在HTML中，浏览器会把所有大写字符解释为小写字符。所以camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

<!-- 在HTML中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

类型

v-bind: is那么就可以使用

props数组和对象传入数字布尔值单向数据流$emit

深入了解

总结

通过这次的学习，我发现学习一门技术，官方文档肯定是要阅读至少一遍的，因为根据视频学习往往会出现视频上面没有讲到的知识点，而官方文档，往往讲解的内容是非常全面的。