指南

入门

让我们从快速浏览 Vue 的数据绑定功能开始。如果你更感兴趣的是先了解高级概述，请查看这篇 博客文章。

尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 示例。随意在另一个标签页中打开它，并在我们浏览一些基本示例时一起学习。如果你更喜欢从包管理器下载/安装，请查看 安装 页面。

Hello World

<div id="app">
  {{ message }}
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
{{ message }}

双向绑定

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

{{ message }}

渲染列表

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
  • {{ todo.text }}

处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}

合在一起

<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
})
  • {{ todo.text }}

我希望这能让你对 Vue.js 的工作原理有一个基本的了解。我相信你也有很多问题 - 继续阅读，我们将在指南的其余部分中解答它们。

← 安装 概述 →
发现错误或想为文档做出贡献？ 在 Github 上编辑此页面！