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：

<div id="app"></div>

js：

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

        }
    })

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

<div id="app">
    <p>{{message}}</p>
</div>

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
    })

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