当前位置: 移动技术网 > IT编程>网页制作>CSS > Vue入门和基础解析

Vue入门和基础解析

2019年01月12日  | 移动技术网IT编程  | 我要评论

vue入门和基础(一)

vue入门和基础(一)

首先我们来介绍一下mvx框架模式:

mvx框架模式:mvc+mvp+mvvm
mvc:
model(模型)+view(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。view通过controller来和model联系,controller是view和model的协调者,view和model不直接联系,基本联系都是单向的。用户user通过控制器controller来操作模板model从而达到视图view的变化。
mvp:
是从mvc模式演变而来的,都是通过controller/presenter负责逻辑的处理+model提供数据+view负责显示。 在mvp中,presenter完全把view和model进行了分离,主要的程序逻辑在presenter里实现。并且,presenter和view是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更view的时候可以保持presenter不变。
mvvm:
mvvm是把mvc里的controller和mvp里的presenter改成了viewmodel。model+view+viewmodel。view的变化会自动更新到viewmodel,viewmodel的变化也会自动同步到view上显示,这种自动同步是因为viewmodel中的属性实现了observer,当属性变更时都能触发对应的操作。
什么是vue?
vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的渐进式框架。(vue.js是一个轻巧、高性能、可化的mvvm库,同时拥有非常容易上手的api)

vue.js 和angular.js的区别:

(一):相同点:
都支持指令:内置指令和自定义指令。
都支持过滤器:内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端。
(二):不同点:
(1).angularjs的学习成本高,比如增加了dependency injection特性,而vue.js本身提供的api都比较简单、直观。
(2).在性能上,angularjs依赖对数据做脏检查,所以watcher越多越慢。
vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说,这个优化差异还是比较明显的。
**

vue的兼容性:

**
vue 不支持 ie8 及以下版本,因为 vue 使用了 ie8 无法模拟的 ecmascript 5 特性。但它支持所有兼容 ecmascript 5 的浏览器。
最新稳定版本:2.5.17

vue的安装:

进入网址:https://cn.vuejs.org/v2/guide/installation.html

直接下载js文件,并用 <script> 引入,建议不要使用压缩版本(压缩版本没有常见错误的相关警告)

更多使用详情和安装步骤见:https://cn.vuejs.org/v2/guide/installation.html

引入相关的js文件后,我们就可以进行相关的代码块学习了。
第一步:创建一个vue实例:
html:

js:

 var app = new vue({
        el:"#app",
        data:{

        }
    })

当vue实例被创建时,它向 vue 的响应式中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
第二步:利用插值表达式将data对象中的属性的值展示在视图中:
html:

{{message}}

js:

var app = new vue({
        el:"#app",
        data:{
            message:"this is a app"
        }
    })

js文件中我们这样写也有同样的效果:

 var content = {
        message:"this is a app"
    }
    var app = new vue({
        el:"#app",
        data:content
    })

写博客就是总结一些自己学习上的知识点,有不好的地方还请见谅

</script>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网