Model后端数据是1,View前端也是1。Model后端数据变为2,View前端数据也变为2,不需要刷新。这就叫做双向数据绑定。
MVVM模式的实现者
前端常用IDE
下载
IDEA安装VUE插件
第一个程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- View层 -->
<div id="box1">
{{message}}
</div>
<div id="box2">
{{message}}
</div>
<!-- 导入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#box1",
data:{
//Model:数据
message:"hello,vue!"
}
});
var vm1 = new Vue({
el:"#box2",
data:{
message:"你是最棒的!"
}
})
</script>
</body>
</html>
如何理解双向绑定(view-model)?
我们打开控制台,将vm这个对象的message属性的值改为"hello,zcq!",页面的内容也立刻发生改变,不需要刷新页面。这,就叫做双向绑定。view-model是介于view于model之间的中间层,是一个抽象的概念。
这里的Model也就是data的数据不一定就是上面vm.data的,也可以通过Ajax请求后台,然后后台发送json过来的