Vue.js--0.基础入门

2017-11-05 本文已影响141人飞菲fly

vuejs介绍

vue.js是一款轻量级的MVVM框架，同时吸收了angular和react的优点，强调了react组件化的概念轻松实现数据和展现的分离；吸收了angular灵活的指令和页面操作的一些方法；

1.近年来前端开发趋势

旧浏览器逐渐淘汰，移动端需求增加；
- IE6-IE8不支持ES5特性，vue核心实现利用Es5Object.defineProperty特性
- IE9+、chrome、safari、firefox支持ES5特性，大多数（webkit内核）移动端都支持ES5；
- 前端交互越来越多，功能越来越复杂；
- 架构从传统后台MVC向REST API+前端MV*迁移；
```
MV* {
        MVC
        MVP
        MVVM  <---- Vue.js
  }
```
（数据和视图是不能直接通信的，通过ViewModel通信，ViewModel通常要实现observer观察者，当数据发生变化ViewModel能够观察到数据的这种变化，然后通知到对应的视图做自动更新，而用户操作视图，viewModel也能监听到视图的变化，然后通知数据做改动；实现了数据的双向绑定）
```
 Model            View     ViewModel
 数据             视图     连接数据和视图的中间媒介
 javascript对象   DOM      观察者
```
应用场景：
针对具有复杂交互逻辑的前端应用；
提供基础的架构抽象；
通过Ajax数据持久化，保证前端用户体验；

好处:
当前端进行和数据做一些操作时候，可以通过Ajax请求做数据持久化，不刷新页面；只需要改动DOM里需要改动的数据和内容；特别移动端应用，刷新页面的代价太大，会重新加载很多资源；虽然有些资源会被缓存，但是页面DOM、css、js都会被浏览器重新解析一遍，因此移动端页面会做成SPA单页应用，在这一基础上就出来了一些MVVM框架：Angular.js/react.js/vue.js;

2.vuejs介绍--什么是Vuejs及Vuejs生态

1.vuejs 它是一个轻量级MVVM框架，体积只有20多kb；
2.数据驱动+组件化（vue的核心思想）的前端开发；
3.GitHub超过25k+的star数，社区完善；

3.Vue.js介绍--对比Angular、React；

如何做技术选型？
- 选型参考：
  1.开源项目的社区如何；VueJS；/Angular.js/React.js都很不错；
  2.对比开源框架的其他方面；
  - Vue.js更轻量，gzip后大小只有20k+(26K)；
  - Angular.js gzip后大小56k;
  - React.js gzip后大小44k;
```
对于移动端来说，Vue.js更适合
```
- Vue.js更易上手，学习曲线平稳；
  - Angular入门是最难的，概念太多，完全颠覆了以前前端开发的模式和思维，还有一些概念像依赖注入，对一些前端完全不知道是什么，Angular是一帮做java的工程师写的，很多思想都沿用了后端的技术，对前端特别是新手前端是一个特别大的挑战；
  - React这点比起来比Angular好一些，React也有自己的一套JSX语法，React学习会附赠 React全家桶包括flux/redux/react-router学习曲线也是比较陡峭的；
  - Vue.js 上手就很简单了，开发组件的语法更符合习惯，官网的文档非常详细，demo也简单易懂，对于一个新手来说学习曲线是最平稳的；
    --吸取了两家之长，借鉴了angular的指令和react的组件化；
    - 在vue.js语法总能看到angular和react影子；
      1.比如vue就借鉴了angular指令的概念，v-show/v-hide对angular的ng-show、ng-hide；
      2.vue.js组件化思想和react组件化思想是一致的；把一个页面初始成一个组件树，组件都会有完整的生命周期；
      3.Vue还有很多自己的特点是其他两个没有的：计算属性

4.Vue.js核心思想

数据驱动
组件化

数据驱动
DOM是数据的一种自然映射；
```
View        ViewModel          Model
    
             DOM Listeners
             Directives

 DOM        Vue实例        javascript         
```
数据和视图如何交互：
只要改变数据Vue.js通过Directives指令对DOM做一层封装，当数据发生变化会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据一种自然映射;
Vue.js还会对操作做些监听，当我们修改视图的时候，Vuejs监听到这些变化从而改变数据;这样就形成了数据的双向绑定；

数据响应原理:

数据（model）改变驱动视图（view）自动更新；

组件化:
1.扩展HTML元素，封装可重用的代码；
2.vue.js每个组件都对应一个v-model，最终生成一个v-model的树，和DOM树是一个一一对应的关系；
组件设计原则：
1.页面上每个独立的可视、可交互区域视为一个组件；
比如：一个页面头部、尾部、一些可复用的区块都可以抽象成组件；
2.每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；
就近维护原则就体现了前端工程化思想，为前端开发提供了很好的分策略，每个开发者都将清楚的知道自己所开发维护的工作单元，代码存在对应的组件目录中，那个目录下就可以找到工作单元所有的内部逻辑，样式也好，JS也好，页面结构都在那里，Vue.js中可以通过.Vue文件把组件依赖的模板、js、样式都写在一个文件中，把组件化就近维护原则发挥到极致；
3.页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；
把页面拆分成一个个组件；

Vue.js--0.基础入门

猜你喜欢

热点阅读