一、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>
- 效果演示:
四、结束语
“-------怕什么真理无穷,进一寸有一寸的欢喜。”
微信公众号搜索:饺子泡牛奶。