Question

如何正确使用Vue.js的组件

Answer 1

1. # 下载最新的vue
   $ npm install vue

2. js 引用 vue.js

3. 开始代码，感受vue强大的双向数据绑定

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

实战代码：

<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)
    }
  }
})

Vue整个生命周期示意图：

Answer 2

工宗号： Vue社区，有很好很全的vue教程，从最简单的指令到实战仿新闻客户端，语速可能有点快，因为知识点很多，希望大家学习后能很快的掌握，祝大家学习愉快！