lazyrabbit's blog

一、基础语法

1.1 声明式渲染

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

能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。在示例代码中，传递给 createApp() 的对象是一个组件。

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

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

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

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

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

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

1.2 Attribute 绑定

在 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>

1.3 事件监听

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

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

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

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

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

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

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

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

1.4 表单绑定

我们可以同时使用 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 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

1.5 条件渲染

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

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

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

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

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

现在，示例程序同时展示了两个<h1>标签，并且按钮不执行任何操作。尝试给它们添加 v-if 和 v-else 指令，并实现 toggle() 方法，让我们可以使用按钮在它们之间切换。

1.6 列表渲染

我们可以使用 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>，以匹配对应的对象在数组中的位置。

更新列表有两种方式：

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

this.todos.push(newTodo)

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

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

1.7 计算属性

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

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

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

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

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

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

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

例如：

<script type="module">
import { createApp } from 'vue'

let id = 0

createApp({
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: {
    filteredTodos() {
      return this.hideCompleted
        ? this.todos.filter((t) => !t.done)
        : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}).mount('#app')
</script>

<div id="app">
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in filteredTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</div>

1.8 生命周期和模板引用

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

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

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

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

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

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

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

<script type="module">
import { createApp } from 'vue'

createApp({
  mounted() {
    this.$refs.pElementRef.textContent = 'mounted!'
  }
}).mount('#app')
</script>

<div id="app">
  <p ref="pElementRef">Hello</p>
</div>

1.9 侦听器

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

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

这里，我们使用 watch 选项来侦听 count 属性的变化。当 count 改变时，侦听回调将被调用，并且接收新值作为参数。

<script type="module">
import { createApp } from 'vue'

createApp({
  data() {
    return {
      todoId: 1,
      todoData: null
    }
  },
  methods: {
    async fetchData() {
      this.todoData = null
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${this.todoId}`
      )
      this.todoData = await res.json()
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    todoId(newTodoId) {
      this.fetchData()
    }
  }
}).mount('#app')
</script>

<div id="app">
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</div>

Day2基础语法