Vue【一】

诞生背景

由于手机的迅速普及及性能的大幅提升，导致移动端需求的大量增加，产生了一种叫Webapp的东西，即移动端网页应用。

什么是MVVM框架

MVVM可以拆分成：View — ViewModel — Model三部分，如图所示：

View和Model可以通过ViewModel动态进行数据传输，不再需要手动更改。

Vue的核心

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。由于使用了ES5的Object.defineProperty特性，使得无法兼容IE8及以下版本浏览器。

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vue只需要改变数据，就会自动改变视图，再也不用你去操心DOM的更新了，这就是MVVM思想的实现。

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。如图所示：

适用场景

• 替代jquery频繁操作DOM更新页面
• 对相同部分进行封装，提升开发效率

一个实例

步骤：new Vue()–>设置数据data–>挂载元素–>成功渲染

<div id="app">
     <card></card>
     <card></card>
     <card></card>
</div>
<script>
Vue.component('card',{
    template:`<div>
        <img src="img/pic.png" alt="">
        <h2>这是个标题</h2>
        <p>这里是描述</p>
        <button>这是个按钮</button>
    </div>`
});
new Vue({
   el:"#app"
});
</script>