Vue入门和基础解析

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>