从头学习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++
    }
  }
}