初识Vue+Vue的优缺点+与其他框架的对比

先了解什么是MVX框架模式?

MVX框架模式:MVC+MVP+MVVM

·  1.MVC:Model模型+View视图+controller控制器,主要是基于分层的目的,让彼此的职责分开。View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。
用户通User过控制器Controller来操作模板Model从而达到视图View的变化

·  2.MVP:是从MVC模式演变而来,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
在MVP中,Presenter和View是没有直接关联的,是通过定义好的借口进行交互,从而使得在变更View的时候可以保持Presenter不变。
MVP模式的框架:Riot.js。

·  3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。

MVVM模式的框架有:Angular.js + Vue.js和Konckout+Ember.js后两种知名度较低以及是早起的框架模式。

vue是什么?

·  vue 是一套构建用户界面的渐进式框架(MVVM框架)。vue采用自底向上增量开发的设计。vue的核心只关注视图层,是一个构建数据驱动的Web页面的库。

· Vue的特性如下
·   1.轻量级的框架
·   2.双向数据绑定
·   3.指令
·   4.插件化

· Vue和其他框架的区别

·   1.与Angular.js的区别
·    相同点:
·     a:都支持指令:内置指令和自定义指令。
·     b:都支持过滤器:内置过滤器和自定义过滤器。
·     c:都支持双向数据绑定。
·     d:都不支持低端浏览器。
·    不同点:
·     a:Aangular的学习成本高,增加了依赖注入Dependency Injection特性,而Vue本身提供的API都比较简单,直观。
·     b:在性能上,Angualr依赖对数据做脏检查,所以Watcher越多越慢。Vue使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

·   2.与React的区别
·    相同点:
·     a:React采用特殊的JSX语法,Vue在组件开发中也推崇编写Vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
·     b:中心思想相同:一切都是组件,组件实例之间可以嵌套。
·     c:都提供合理的钩子函数,可以让开发者定制化地去处理需求。
·     d:都不内置列数Ajax,Route等功能的核心包,而是以插件的方式加载。
·     e:在组件开发中都支持mixins的特性。
·    不同点:
·     a:React依赖Virtual DOM,而Vue使用的是DOM模板,React采用的Virtual DOM会对渲染出来的结果做脏检查。
·     b:vue在模板中提供了指令,过滤器等,可以非常方便,开解的操作DOM

如何使用vue?

· 1.安装
·  1)script
·   如果项目直接通过script加载CDN文件,代码示例如下:
    <script src="http://www.baidu.com/vue.min.js"></script>
·  2)npm
·   如果项目给予nom管理依赖,则可以使用npm来安装Vue,执行如下命令:
    $npm i vue --save-dev
·  3)bower
·   如果项目基于bower管理依赖,则可以使用bower来安装Vue,执行如下命令:
    $bower i vue --save-dev

· 2.第一个Hello World程序
·  每一次学习新框架,都必将经历过Hello World程序,下面我们来写一个简单的双向数据绑定,反序输出的效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="obox">
    <input type="text" v-model="m"/><br/>{{msg}}
</div>
</body>
<script>
    let vu = new Vue({
        //元素
        el: "#obox",
        //属性
        data: {
            m: "hello Vue"
        },
        computed:{
            msg(){
                return this.m.split('').reverse().join('')
            }
        }
    })

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

推荐阅读更多精彩内容