欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue入门和基础解析

程序员文章站 2022-08-14 23:28:56
vue入门和基础(一) vue入门和基础(一) 首先我们来介绍一下mvx框架模式: mvx框架模式:mvc+mvp+mvvm mvc: model(模型)+view(视图...

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>