Vue.js 入门教程：从 1 到 10

本教程将带你从零开始学习 Vue.js，通过 10 个步骤，逐步掌握 Vue.js 的基础知识，包括创建实例、数据绑定、方法、计算属性、指令等。

1. 创建一个 Vue 实例：

new Vue({
  el: '#app',
  data: {
    number: 1
  }
});

2. 在 HTML 中使用 Vue 绑定数据：

<div id='app'>
  <p>{{ number }}</p>
</div>

3. 在 Vue 实例中可以通过方法或计算属性来改变数据：

methods: {
  increment() {
    this.number++;
  },
  decrement() {
    this.number--;
  }
},
computed: {
  isEven() {
    return this.number % 2 === 0;
  }
}

4. 在 HTML 中使用 Vue 的指令来触发方法或显示计算属性的值：

<div id='app'>
  <p>{{ number }}</p>
  <button @click='increment'>增加</button>
  <button @click='decrement'>减少</button>
  <p v-if='isEven'>当前数字是偶数</p>
  <p v-else>当前数字是奇数</p>
</div>