零、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 特性
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年前端框架进行调查数据显示:
哪一个前端框架?大家是想学,而哪些没有产生兴趣?
框架已经使用的满意度
四、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演示: