一、MVVM思想
M:
Model数据模型层 - 提供数据。V:
Views视图层 - 渲染数据。VM：
ViewsModel视图模型层 - 调用数据渲染视图。简言之，就是通过数据来驱动视图，不需要过多考虑dom操作，把重心放在VM。
二、Vue简介
Vue (读音
/vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
三、Vue基本使用
3.1 创建Vue实例
<script>
// 创建Vue实例。
var app = new Vue({
});
</script>
3.2 模板或元素
<!-- 模板或元素。 -->
<div id="app">
</div>
3.3 数据
<body>
<div id="app">
<h2> {{message}} </h2>
</div>
<script>
var app = new Vue({
el: "#app",
// 实例被创建时，会获取data属性，进行视图渲染。
data: {
message: "hello vue"
}
});
</script>
</body>
3.4 方法
<body>
<div id="app">
<!-- 调用方法。 -->
<br />
<button v-on:click="add"> 调用add()方法，实现点击后变量自增 </button>
{{num}}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 0
},
// 可以再Vue实例中定义方法。
methods: {
add() {
this.num++;
},
},
});
</script>
</body>
- 效果演示：
四、结束语
“-------怕什么真理无穷,进一寸有一寸的欢喜。”
微信公众号搜索：饺子泡牛奶。
