vue.js初识(一)

一 什么是vue?

  Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。---vue.js官网

  对于vue,相信就算不了解vue的话，也据说过vue的名字,做为去年上升势头最猛烈的前端框架，能在短期内赢得大量的关注，我以为了解学习一下是颇有必要的。

  

 

  官网：https://cn.vuejs.org/index.html   github:https://github.com/vuejs/vue

  官方的长篇大论我就再也不赘述了，说下我对vue的理解，首先他是一个js框架，也能够看做是“轻量”的前端渐进式框架。

  我以为vue最显著、最重要，也是最特殊的一个地方，就是“轻量”，在愈来愈重视前端体验以及组件化模块化的思想下，像往常同样比较复杂臃肿的前端应用逐渐变得轻量、简洁、实用。前端经历了这几年的快速发展，各类框架工具类层出不穷，在摒弃了不少以往旧的开发模式之下，能够迅速开发、下降学习成本、能够迅速迭代成为了vue如今接受程度比较高的缘由之一。

二 vue的特色

  2.1 双向绑定

 固然，这个特性前端的主流框架都实现了，简单说下双向绑定，就是把model绑定到view，简单的说咱们在页面上改变了某个值，绑定的model会自动更新。

  无图无真相：

  

  2.2 简单

  这里抛一个demo，angular和vue同时实现双向数据绑定。

  angular

   

  先是声明一个angular的model，而后经过绑定控制器，使用scope选择赋值。

  vue

  

  这里直接用el（element） ，更像是声明渲染 ，将vue实例挂载到id为app的div下，data属性指向model，更改页面上的note，data里面的数据也会随之变化。

  虽然代码量看起来没有太大的差异，可是我我的以为vue的风格更简单干练，直观易懂。

  2.3 快速

  

   虽然大部分指标都差很少，vue在部分指标上仍是略胜一筹。

   2.4 小巧

   提及小巧，那应该首先要关注下Vue的源码大小，Vue的生产版本（即min版）源码仅为72.9kb，官网称gzip压缩后只有25.11kb，相比Angular的144kb缩小了一半，固然angular也是很强大的，内置了不少丰富的指令，功能强大。

   小巧的一种好处就是可让用户更自由的选择相应的解决方案，在配合其余库方面它给了用户更大的空间

   2.5 组件化

    组件 (Component) 是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些状况下，组件也能够表现为用 is 特性进行了扩展的原生 HTML 元素。

  官方实例：

 

  

  2.6 生命周期

  比起vue的快速、小巧等特色，vue的生命周期是我以为vue真正好用的最大特色，也是刚开始入门掌握vue的第一个真正意义上的知识点。

  先上图

  

 

 看起来是否是不少的名词？

 一个东西好很差用，咱们先须要问为何出现？为何须要出现？以及解决了什么问题。

  咱们知道，js是一个很松散随意的脚本语言，也是一门设计的时候有不少缺陷的语言，他的毛病一举一大堆，好比做用域、隐世类型转换、闭包方便带来的隐患等等。

  尽管js自身也在进化，好比ES五、ES六、ES7的进化，Typescript的出现（TS给个人感受更像是用C的方式来写js，毕竟最终仍是转化为了js），不少公司招人都把ES6的考察做为一项职业素养。

  js高程上还提供了不少js的设计模式，好比工厂模式、构造函数模式、原型模式、组合寄生模式等等，本质上仍是由于js没有必定的规范和书写模式，致使不一样人写的js很难维护和阅读，

 我甚至见过一个js函数写了将近千行，一个js文件臃肿无比，只是单纯的大体读懂和能修改就须要花费至关长的时间。

  因此，在前端框架组件化还没流行开来以前，能写一手好的js，有扎实的js基本功的前端er才是让人钦佩的前端er。

  扯了这么久，在回归到vue的生命周期上，在vue中，每一个.vue的文件均可以看做一个组件，每一个组件内均可以写入js，那么问题来了，怎样优雅的在组件里写js？

  vue组件的生命周期解决了这个问题 ，他将一个组件分为了八种状态，从直观上像一我的从诞生到毁灭的过程，而后再每一个时间节点上提供了必定的钩子，方便对该组件的操做。

  对于这种钩子，我我的更理解为回调函数，在组件执行到这个状态的时候读取回调，执行相应的操做。

  在钩子函数里能够作的就不少了，举个例子

    beforecreate : 举个栗子：能够在这加个loading事件
 created ：在这结束loading，还作一些初始化，实现函数自执行 ，好比说一些图表展现的页面，须要一进页面展现数据，能够提早发ajax
 mounted ： 在这发起后端请求，拿回数据，配合路由钩子作一些事情，增删改查的一些操做等等均可以写在这里
 beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

    Watch:用于监视数据的变化，执行异步操做等

    ...

  如下是一个完整的生命周期的执行过程：

   

  能够看到，vue的生命周期将何时作什么事大概的具体化了，js函数的书写有了一个执行顺序和执行时机，我以为这个才是vue的生命周期最值得称赞的地方。

  无独有偶，前段时间简单看了下微信小程序的api，从html的标签、到函数的执行方法、接口调用的返回结果、数据格式等等都有一个统一的标准。

  code:简单写了个click函数

  html:

 

 js:

  

  

 

 

 

  

三 起步

  3.1 vue-cli 

  在以前的项目中，因为用到的插件工具类比较复杂多样，基本都须要本身手动配置webpack,在这上边一般都会占用必定的工做量，而vue-cli脚手架的出现，使得能够快速的建立vue项目。

  配置步骤以下（windows）：

  首先 须要安装node.js，官网：http://nodejs.cn/，运行node -v && npm -v 查看是否安装完成。

  

  而后直接在全局安装vue-cli 便可 （npm比较慢，能够切换百度源，或者淘宝源）

  安装成功以后 直接 vue init webpack Vue-demo 就能够快速生成项目。

  

  进入项目里再 npm run dev 项目就能够直接跑起来，所见即所得。

  

  

 四 渐进 

 vue 是一个渐进式的框架，这里只是简单的一个demo，没法胜任工做中真的的复杂的需求。

 包括须要配置的路由router、vuex、jquery、element-ui、mock等等，因为篇幅比较多，就放在下个月的wiki里边分享了