Vue.js 2.0

vue.js是轻量级的前端框架，2016.10 发布了最新2.0 版本，具有更强大，更快速的特点，使Vue.js 的应用变得更加广泛。

vue.js 的特点

• 轻量级
• 高效率
• 上手快
• 简单易学
• 文档全面而简洁

vue.js 的功能

以下是三点功能：

• 模板渲染、数据渲染、数据同步

例子：

<div id="app">
  {{message}}
</div>

//vuejs实例对象
new Vue({
  el:'#app',                     //对象装载的位置
  data:{                         //数据
    massage:'Hello Vue!'
    }
})

显示

• 模块化、组件化

例子：

<div id="example">
    <my-component></my-component>
</div>

// 注册
Vue.component('my-component', { 
    template: '<div>A custom component!</div>'  
})
// 创建根实例
new Vue({
    el: '#example'
})

渲染为：

<div id="example">
    <div>A custom component!</div>
</div>

显示

组件局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

data 必须是函数

使用组件时，大多数选项可以被传入到 Vue 构造器中，有一个例外： data 必须是函数。 实际上，如果你这么做：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

那么 Vue 会在控制台发出警告，告诉你在组件中 data 必须是一个函数。下面我们就来理解一下这种规则的存在意义。

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data 是一个函数，因此 Vue 不会警告，
  // 但是我们为每一个组件返回了同一个对象引用
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

由于这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！我们可以通过为每个组件返回新的 data 对象来解决这个问题，避免直接的引用赋值：

data: function () {
  return {
    counter: 0
  }
}

现在每个 counter 都有它自己内部的状态了：

• 扩展功能 比如：路由、ajax、数据流