基础知识

献上官网

一切从 Hello World 开始

vue 是使用 MVVM 的设计模式，使用 vue 以后，不需要再继续去操作节点来获取数据，只需直接进行数据操作即可。

<div id='app'>
  {{ content }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    content:'Hello World!'
  }
})
setTimeout(function(){
  app.$data.content = 'bye world!'
},2000)

• 传统的前端是使用 M-V-P(模型-视图-控制器) 的设计模式，如使用 jQuery 来进行前端开发，开发者经常在 P 层来进行 DOM 操作。

• MVVM 分为Model、View、ViewModel三者。

  • Model：代表数据模型，数据和业务逻辑都在Model层中定义；
  • View：代表UI视图，负责数据的展示；
  • ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

• 而现在的前端是使用 M-V-VM 的设计模式，如使用 React，Vue 等前端框架来进行开发。可以理解为 Vue 就是 VM 层，会监听 M 层和 V 层。开发者只要专注于 M 层来进行代码编写，由 Vue 来进行 DOM 操作。可以减少 30% 左右的代码量。

简单开发 TodoList

介绍需要用到的指令

• v-for 用来循环数组或者对象
• v-on 可用来绑定事件
• v-model 实现输入框双向绑定
• v-bind 可用来绑定数据

示例

<div id='app'>
  <input type='text' v-model='inputVal'/>
  <button v-on:click='submit'>提交</button>
  <ul>
    <li v-for='item in list'>{{ item }}</li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      list: [],
      inputVal: ''
    },
    methods: {
      submit: function(){
        this.list.push(this.inputVal)
        this.inputVal = ''
      }
    }
  })
</script>

使用组件化进阶开发 TodoList

所谓的组件化，其实就是搭积木，拼图。在进行界面设计的时候，经常会分header,footer之类的，而组件化就是专门为其准备的。

注意

每个组件其实就是一个 Vue 实例

<div id='app'>
  <input type='text' v-model='inputVal' />
  <button @click='submit'>提交</button>
  <ul>
    <todo-item v-for='item in list' v-bind:content='item'></todo-item>
  </ul>
</div>
<script>
  // 全局组件定义
  /*
  Vue.component('TodoItem',{
    props: ['content'],
    template: '<li>{{content}}</li>'
  })
  */

  // 局部组件定义
  var TodoItem = {
    props: ['content'],
    template: '<li>{{content}}</li>'
  }

  var app = new Vue({
    el: '#app',
    components: {
      TodoItem: TodoItem
    },
    data: {
      list: [],
      inputVal: ''
    },
    methods: {
      submit: function () {
        this.list.push(this.inputVal)
        this.inputVal = ''
      }
    }
  })

</script>

从上面的示例其实就已经做到了组件化，而且，app 是父组件，TodoItem 是子组件，并通过 v-bind 来进行传值，子组件通过 props 来接收这个值。

那就有一个疑问 —— 子组件如何向父组件传值呢？

请看以下的示例 —— 实现点击 TodoItem 即可删除选中项

<div id='app'>
  <input type='text' v-model='inputVal' />
  <button @click='submit'>提交</button>
  <ul>
    <todo-item v-for='(item, index) in list' :content='item'
    :index='index' @delete='deleteItem'>{{ item }}</todo-item>
  </ul>
</div>
<script>
  var TodoItem = {
    props: ['content', 'index'],
    template: '<li @click="handeleClick" >{{content}}</li>',
    methods: {
      handeleClick: function () {
        this.$emit('delete', this.index)
      }
    }
  }

  var app = new Vue({
    el: '#app',
    components: {
      TodoItem: TodoItem
    },
    data: {
      list: [],
      inputVal: ''
    },
    methods: {
      submit: function () {
        this.list.push(this.inputVal)
        this.inputVal = ''
      },
      deleteItem: function (index) {
        this.list.splice(index, 1)
      }
    }
  })
</script>

使用 this.$emit('delete', this.index) 来触发子组件来对父组件传值，父组件再自定义一个方法来监听，示例中使用的是 @delete = 'deleteItem'

• 在使用 v-for 的时候其实需要为它绑定 key 值，用来提高 vue 内部 diff算法 的性能。静态数据可以使用 index 来进行绑定，动态数据建议使用 id 来绑定
• v-bind 可以简写成 :
• v-on 可以简写成 @
• v-model 其实本身就可以看作是一个Vue的组件