章节目录:
一、MVVM思想
二、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>
- 效果演示: