Vue.js--0.基础入门

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.页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；
  把页面拆分成一个个组件；