前言

本文主要总结 Vue.js 的基础语法，对应 Vue中文官方文档的教程-基础部分，供自己以后速查使用。
如果要深入学习建议使用 Vue.js 中文官网

第一个 Vue 实例

通过这个简单的实例我们就能明显地感受出使用 Vue.js 的好处之一就是不需要直接操作 DOM，减少了代码量。

模板语法

v-text、v-html和v-once

v-text 指令和使用“Mustache”语法 (双大括号) 的文本插值一样会将数据解释为普通文本，而非 HTML 代码。
v-html 指令则会解析html然后输出。

使用以上两种语法时都会建立起数据绑定，数据改变时会重新渲染相应DOM。
而使用 v-once 指令，你也能执行一次性地插值，取消数据改变时的更新。

v-if和v-show

v-if 是“真正”的条件渲染，如果v-if的条件为假该元素的DOM就不会被渲染。
而 v-show 不管条件的真假，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

用 key 管理可复用的元素

Vue官网 - 用 key 管理可复用的元素
大致就是讲可以通过给标签加key属性来避免Vue对元素的复用造成的bug

缩写

v-bind 缩写为 :，v-on缩写为 @

计算属性和侦听器

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter，具体见Vue官网 - 计算属性的 setter 实例

计算属性缓存 vs 方法

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖值还没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch（写出不必要的复杂代码）。通常更好的做法是使用计算属性而不是命令式的 watch 回调。

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
Vue官网 - 侦听器实例

Class 与 Style 绑定

Vue官网 - Class 与 Style 绑定

列表渲染

Vue官网 - 列表渲染

事件处理

Vue官网 - 事件处理

表单输入绑定

Vue官网 - 表单输入绑定

组件基础

全局组件

局部组件

子组件向父组件传值

父组件向子组件传值在前面已经用到了，下面来写一个子组件向父组件传值的例子

一些细节

最好不要使用箭头函数

Vue的data和methods中最好不要使用箭头函数，因为在箭头函数中this不会指向这个组件的实例

特殊元素的DOM解析

有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

1
2
3

<table>
    <blog-post-row></blog-post-row>
</table>

这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：

1
2
3

<table>
    <tr is="blog-post-row"></tr>
</table>

需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')
单文件组件 (.vue)
<script type="text/x-template">

使用驼峰命名法定义组件名时要注意

PascalCase(首字母大写命名) 其实就是驼峰命名法。当你使用此命名法时，在html中必须转化成kebab-case(短横线分隔命名) 来使用，在其他地方两种命名方法都可以使用。

使用$开头的数据名时要注意

以 _ 或 $ 开头的属性不会被 Vue 实例代理，因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。

组件data必须定义为函数

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

Vue.component("TodoItem", {     
    data() {
        return {
            content: 'something',
        }
    },
});

Vue数据绑定的局限性

由于Javascript中的数组和对象都是引用形式，所以用绑定了数组和对象无法像其他类型的绑定那样直接实现实时更新，但有一些解决方案。

通过赋值的方法给一个全新的对象或者用splice、unshift等变异方法的返回值（本质是使引用发生改变）
使用Vue.set()方法

Tags: Vue.js

Vue学习笔记01-基础部分

前言