我们需要实现的效果就是上面这样:
当我们修改了input输入框里的值的时候,可以立即修改下方的label标签!
实现mvvm主要包含两个方面,
数据变化更新视图,视图变化更新数据:
实现方式:
1.v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE双向绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="value"/>
<div>{{value}}</div>
</div>
<script>
new Vue({
el: "#app",
data:{
value:"dfg"
}
})
</script>
</body>
</html>
2.在html上绑定oninput事件
<div id="app">
<input @input="inputHandler($event)" type="text" :value="value"/>
<div>{{value}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
value:"vfd"
},
methods:{
inputHandler(e){
this.value=e.target.value
}
}
})
</script>
3.原生JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<input id="name" value="name"/>
<script>
var ele = document.querySelector("#name");
var selfVue = new SelfVue(
{
name: "hello world",
},
ele,
"name"
);
window.setTimeout(function () {
selfVue.data.name = "canfoo";
}, 2000);
</script>
</body>
</html>
然后,再同级目录下创建js文件夹,再引入三个js文件
observer.js、watcher.js、index.js
observer.js的作用主要时用来深度监听js对象的value值的变化
watcher.js是规范一个订阅者的行为
index.js相当于vue.js,用来创建一个容器
但是现在仍然由很多问题,比如无法做到多个dom对象引用同一个值,而且没有做到双向绑定
接下来要引入compile.js,作用就是能监听html页面里dom对象的事件