浅谈Vue.js
发布在vue2016年9月21日view:1289HTML5前端开发AngularjsMVVMWeb组件,模块化ReactVue.js前端工具vuexwebpack
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

零、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演示:

评论
发表评论
暂无评论
WRITTEN BY
执笔的蜗牛
Life is like the ocean
TA的新浪微博
PUBLISHED IN
vue

Vue.js 是尤大大开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统。

此专栏专门记录我学习vue的过程中遇到的困难和总结

我的收藏