[JavaScript知识库]从头学习Vue

有趣的互动式学习官方文档：教程 | Vue.js

1、声明式渲染：{{? ? }}

你在编辑器中看到的是一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用?.vue?后缀的文件中。

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。

我们可以使用?data?组件选项来声明响应式状态，该选项应该是一个返回对象的函数：

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

message?属性可以在模板中使用。下面展示了我们如何使用双花括号法，根据?message?的值来渲染动态文本：

<h1>{{ message }}</h1>

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

<h1>{{ message.split('').reverse().join('') }}</h1>

?2、Attribute 绑定：v-bind 或者 :

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用?v-bind?指令：

<div v-bind:id="dynamicId"></div>

指令是由?v-?开头的一种特殊 attribute。它们是 Vue 模板语法的一部分。和文本插值类似，指令的值是可以访问组件状态的 JavaScript 表达式。

冒号后面的部分 (:id) 是指令的“参数”。此处，元素的?id?attribute 将与组件状态里的?dynamicId?属性保持同步。

由于?v-bind?使用地非常频繁，它有一个专门的简写语法：

<div :id="dynamicId"></div>

3、事件监听：v-on 或 @

我们可以使用?v-on?指令监听 DOM 事件：

<button v-on:click="increment">{{ count }}</button>

因为其经常使用，v-on?也有一个简写语法：

<button @click="increment">{{ count }}</button>

此处，increment?引用了一个使用?methods?选项声明的函数：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      // 更新组件状态
      this.count++
    }
  }
}

在方法中，我们可以使用?this?来访问组件示例。组件实例会暴露?data?中声明的数据属性。我们可以通过改变这些属性的值来更新组件状态。

事件处理函数也可以使用内置表达式，并且可以使用修饰符简化常见任务。

4、表单绑定：v-bind + v-on 或 v-model

我们可以同时使用?v-bind?和?v-on?来在表单的输入元素上创建双向绑定：

<input :value="text" @input="onInput">

methods: {
  onInput(e) {
    // v-on 处理函数会接收原生 DOM 事件
    // 作为其参数。
    this.text = e.target.value
  }
}

试着在文本框里输入——你会看到?<p>?里的文本也随着你的输入更新了。

为了简化双向绑定，Vue 提供了一个?v-model?指令，它实际上是上述操作的语法糖：

<input v-model="text">

v-model?会将被绑定的值与?<input>?的值自动同步，这样我们就不必再使用事件处理函数了。

v-model?不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

5、条件渲染：v-if 和 v-else

我们可以使用?v-if?指令来有条件地渲染元素：

<h1 v-if="awesome">Vue is awesome!</h1>

这个?<h1>?标签只会在?awesome?的值为真值 (Truthy)?时渲染。若?awesome?更改为假值 (Falsy)，它将被从 DOM 中移除。

我们也可以使用?v-else?和?v-else-if?来表示其他的条件分支

6、列表渲染：v-for

我们可以使用?v-for?指令来渲染一个基于源数组的列表：

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

这里的?todo?是一个局部变量，表示当前正在迭代的数组元素。它只能在?v-for?所绑定的元素上或是其内部访问，就像函数的作用域一样。

注意，我们还给每个 todo 对象设置了唯一的?id，并且将它作为特殊的?key?attribute?绑定到每个?<li>。key?使得 Vue 能够精确的移动每个?<li>，以匹配对应的对象在数组中的位置。

更新列表有两种方式：

1. 在源数组上调用变更方法：

   this.todos.push(newTodo)
   

2. 使用新的数组替代原数组：

   this.todos = this.todos.filter(/* ... */)

例子：

这里有一个简单的 todo 列表——试着实现一下?addTodo()?和?removeTodo()?这两个方法的逻辑，使列表能够正常工作！

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

?如何理解这句话：this.todos = this.todos.filter((t) => t !== todo)

其中使用的是箭头函数，其实无非就是函数在js编程语言下的另一种呈现方式：

javascript 箭头函数及其使用 - 奋斗吧，骚年 - OSCHINA - 中文开源技术交流社区

7、生命周期和模板引用: mounted

目前为止，Vue 为我们处理了所有的 DOM 更新，这要归功于响应性和声明式渲染。然而，有时我们也会不可避免地需要手动操作 DOM。

这时我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的?ref?attribute?来实现模版引用：

<p ref="p">hello</p>

此元素将作为?this.$refs.p?暴露在?this.$refs?上。然而，你只能在组件挂载之后访问它。

要在挂载之后执行代码，我们可以使用?mounted?选项：

export default {
  mounted() {
    // 此时组件已经挂载。
  }
}

这被称为生命周期钩子——它允许我们注册一个在组件的特定生命周期调用的回调函数。还有一些其他的钩子如?created?和?updated。更多细节请查阅生命周期图示。

例子：

现在，尝试添加一个?mounted?钩子，然后通过?this.$refs.p?访问?<p>，并直接对其执行一些 DOM 操作。(例如修改它的?textContent)。

<script>
export default {
  mounted() {
    this.$refs.p.textContent = 'moun90890ted!'
  }
}
</script>

<template>
  <p ref="p">hello</p>
</template>

8、计算属性： computed

让我们在上一步的 todo 列表基础上继续。现在，我们已经给每一个 todo 添加了切换功能。这是通过给每一个 todo 对象添加?done?属性来实现的，并且使用了?v-model?将其绑定到复选框上：

<li v-for="todo in todos">
  <input type="checkbox" v-model="todo.done">
  ...
</li>

下一个可以添加的改进是隐藏已经完成的 todo。我们已经有了一个能够切换?hideCompleted?状态的按钮。但是应该如何基于状态渲染不同的列表项呢？

介绍一个新概念：计算属性。我们可以使用?computed?选项声明一个响应式的属性，它的值由其他属性计算而来：

export default {
  // ...
  computed: {
    filteredTodos() {
      // 根据 `this.hideCompleted` 返回过滤后的 todo 项目
    }
  }
}

- <li v-for="todo in todos">
+ <li v-for="todo in filteredTodos">

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

9、侦听器： watch

有时我们需要响应性地执行一些“副作用”——例如，当一个数字改变时将其输出到控制台。我们可以通过侦听器来实现它：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount) {
      // 没错，console.log() 是一个副作用
      console.log(`new count is: ${newCount}`)
    }
  }
}

这里，我们使用?watch?选项来侦听?count?属性的变化。当?count?改变时，侦听回调将被调用，并且接收新值作为参数。更多详情请参阅指南——侦听器。

10、组件：import 和 components

目前为止，我们只使用了单个组件。真正的 Vue 应用往往是由嵌套组件创建的。

父组件可以在模板中渲染另一个组件作为子组件。要使用子组件，我们需要先导入它：

import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  }
}

我们还需要使用?components?选项注册组件。这里我们使用对象属性的简写形式在?ChildComp?键下注册?ChildComp?组件。

然后我们就可以在模板中使用组件，就像这样：

<ChildComp />

11、Props：props 或 v-bind 语法?

子组件可以通过?props?从父组件接受动态数据。首先，需要声明它所接受的 props：

// 在子组件中
export default {
  props: {
    msg: String
  }
}

一旦声明，msg?prop 就会暴露在?this?上，并可以在子组件的模板中使用。

父组件可以像声明 HTML attributes 一样传递 props。若要传递动态值，也可以使用?v-bind?语法：

<ChildComp :msg="greeting" />

11、Emits:emits 或 v-on

除了接收 props，子组件还可以向父组件触发事件：

export default {
  // 声明触发的事件
  emits: ['response'],
  created() {
    // 带参数触发
    this.$emit('response', 'hello from child')
  }
}

this.$emit()?的第一个参数是事件的名称。其他所有参数都将传递给事件监听器。

父组件可以使用?v-on?监听子组件触发的事件——这里的处理函数接收了子组件触发事件时的额外参数并将它赋值给了本地状态：

<ChildComp @response="(msg) => childMsg = msg" />

?12、插槽：slots

官方文档在这一部分解释的不是很清楚：

Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）_前端不释卷leo的博客-CSDN博客_vue插槽

除了通过 props 传递数据外，父组件还可以通过插槽?(slots) 将模板片段传递给子组件：

<ChildComp>
  This is some slot content!
</ChildComp>

在子组件中，可以使用?<slot>?元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content)：

<!-- 在子组件的模板中 -->
<slot/>

<slot>?插口中的内容将被当作“默认”内容：它会在父组件没有传递任何插槽内容时显示：

<slot>Fallback content</slot>