Vue.js--0.基础入门

vuejs介绍

vue.js是一款轻量级的MVVM框架,同时吸收了angularreact的优点,强调了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.页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面;
    把页面拆分成一个个组件;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,029评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,238评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,576评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,214评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,324评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,392评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,416评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,196评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,631评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,919评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,090评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,767评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,410评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,090评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,328评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,952评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,979评论 2 351

推荐阅读更多精彩内容