标签：并且 抽取 touch ESS head fun sub 服务器 数据
不积跬步，无以至千里；不积小流，无以成江海。
Vuejs语言基础
MVVM是Model-View-ViewModel的缩写：
View层：
√ 视图层
√ 前端开发中，通常就是DOM层。
√主要作用是给用户展示各种信息。
Model层：
√ 数据层
√ 数据可以是我们固定的死数据，更多的是来自
我们服务器，从网络上请求下来的数据。
√ 在我们上一章计数器案例中，就是后面抽取出来的obj。
VueModel层：
√ 视图模型层
√ View和Model沟通的桥梁。
√ 一方面它实现了Data Binding（数据绑定），将Model的改变实时的反应到View中。
√ 另一方面它实现了DOM Listener（DOM监听），当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。
计数器的MVVM：
√ View是我们的DOM
√ Model就是我们抽离出来的obj
√ ViewModel就是创建的Vue对象实例
工作原理：
√ 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
√ 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数： {{counter}}</h2>
<button @click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const obj = {
counter: 0,
message: ‘abc‘
}
const app = new Vue({
el:‘#app‘,
data: obj,
// data:{
// counter: 0
// },
methods:{
add:function () {
console.log("add被执行");
this.counter++
},
sub:function () {
console.log("sub被执行");
this.counter--
}
}
})
</script>
</body>
</html>
标签：并且 抽取 touch ESS head fun sub 服务器 数据
原文地址：https://www.cnblogs.com/smilexuezi/p/12796254.html
