浅谈Vue.js - vue - 前端乱炖

零、Vue.js 是什么

1.尤大大（Vue.js的作者）如是说：Vue.js 是一个用来开发 web 界面的前端库。

2.它与如今热门的Angular、 Rreact 类似，也有配套的周边工具。我们也可以叫它为“前端框架”。

3.然而，它与其他框架有所不同，Vue.js重点集中在MVVM（模型－视图－视图模型）模式的ViewModel层；在数据绑定的API设计上借鉴了Angular的指令机制；但它没有繁琐的module、controller、scope、factory、service等概念。

（注：模型：数据访问层；视图：UI界面；视图模型：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model）

一、Vue.js 的概念概述

Vue.js一切都是以“ViewModel 实例”为基本单位：

1.ViewModel 实例化的Vue的构造器

// 创建一个 ViewModel 实例
var vm = new Vue({
    // 选择目标元素
    el: '#app',
    // 提供初始数据
    data: data
})

2.Model

// 原生对象即数据
var data = {
    msg: 'Hello Vue.js !'
}

3.View

<!-- 模板 -->
<div id="app">
    {{msg}}
</div>

4.渲染结果

<div id="app">
   Hello Vue.js !
</div>

看起来这跟单单渲染一个模板非常类似，但是 Vue.js 在背后做了大量工作。

了解Vue.js 源码丨Hello World 的背后

二、Vue.js 特性

1.简洁：就像上面提到的，Vue.js它没有繁琐的module、controller、scope、factory、service等概念，Vue.js一切都是以“ViewModel 实例”为基本单位，提供的API文档也是非常的容易理解。

2.轻巧：Vue的生产版本只有26.03kb （min+gzip）

3.响应式编程：保持状态和视图的同步

实例：demo源码

4.组件化：无论是小项目还是大项目，如何复杂的界面组织，都可以把它拆分成一个个可复用的组件（查阅组件官方文档）

5.模块化：尤大大如是说：Vue.js结合第三方模块打包工具 – Webpack 或者 Browserify，然后再加上 ES2015。让每个 Vue 组件都可以看做一个独立的模块。同时因为 Vue 会自动用 Vue.extend 把对象转化为组件构建函数，在模块里不需要自己调用 Vue.extend，直接导出一个对象即可：

// ComponentA.js
export default {
  template: '<div>{{ message }}</div>',
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  }
}

// App.js
import ComponentA from './ComponentA'

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag <component-a>
  components: { ComponentA },
  template: `
    <div>
      <p>Now I'm using another component.</p>
      <component-a></component-a>
    </div>
  `
}

6.路由：通过路由局部刷新数据，并且通过vue-router控制路径跳转。

三、2016年前端框架

根据via Medium对2016年前端框架进行调查数据显示：

哪一个前端框架？大家是想学，而哪些没有产生兴趣？

enter image description here

框架已经使用的满意度

enter image description here

四、Vue-cli

vue-cli是Vue.js提供得一个官方命令行工具，可以快速搭建大型单页应用（确保安装了node）。

构建项目命令：

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

五、Vue-cli构建项目 –积木系统

积木系统是根据所需在界面中自定义添加组件，如同积木般，从而搭建出不同的界面。

积木系统项目demo演示：