浅谈 Vue.js 2.0

1.Vuejs基本介绍及原理

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层。官网地址：http://cn.vuejs.org/

基本原理：

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
如下图：

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

浏览器兼容性

IE8以上

2.Vuejs基本用法

1. 模板语法
2. 计算属性
3. 动态属性绑定
4. 条件渲染
5. 列表渲染
6. 事件绑定和处理
7. 表单绑定
8. 组件

模板语法(双大括号绑定)

<span>Message: {{ msg }}</span>

//Vue实例化
new Vue({
    data:{
        msg:'hello world!'
    }
})

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

运行结果:
message: "Hello"
reversedMessage: “olleH”

动态属性绑定

<div v-bind:class="demo"></div>
<!--简写-->
<div :class="demo"></div>

new Vue({
    data:{
        demo:'demo'
    }
})

条件渲染

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

new Vue({
    data:{
        ok:true
    }
})

列表渲染

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})

事件绑定和处理

表单绑定

组件

组件可以扩展 HTML 元素，封装可重用的代码

注册全局组件：

Vue.component('my-component', {
  // 选项
})

注册局部组件

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

Vue实例生命周期：

子父组件通信

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

//子组件
Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
//父组件
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

3.Vue-router(路由)基本用法

http://router.vuejs.org/zh-cn/index.html

4.vuxe(状态管理)基本用法

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
https://vuex.vuejs.org/zh-cn/intro.html

Vuex中几个概念：

1. state ->用一个对象就包含了全部的应用层级状态
2. getter-> state 中派生出的一些状态
3. mutation->唯一可以改变state的事件,例如用户交互
4. action-> 异步操作的事件
5. modules->store模块化

Vuex基本工作流（单向数据流）：

利用Vuex的单向数据流特性可以实现历史回滚功能

5.Vuejs结合webpack的单文件组件应用

webpack简介

webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

中文站点：https://doc.webpack-china.org/

Vue单文件组件：

webpack 通过vue-loader来处理.vue后缀的文件

vue-loader:https://vue-loader.vuejs.org/zh-cn/

css-loader可以实现如下特性：

1. ES2015(ES6) 特性
2. css 作用域
3. css 模块化
4. postcss
5. 热重载

构建大型应用可以采用vue官方推荐的cli工具

Vuejs优势

1. 提供虚拟dom渲染，性能较好
2. 支持服务端渲染
3. 可以适用各种场景
4. 上手相对于react,ng等框架较简单
5. 比较好的社区支持
6. 中文文档比较全