自定义vue双向数据绑定(基于类)
Mue.html
**
1. <!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> </head> <body>
<div id="app">
<input type="text" v-model="message.a">
<div>{
{
message.a}}</div>
<div>
-----------分割线-------------
</div>
{
{
message.a}}
</div>
<script type="text/javascript" src="./Watcher.js"></script>
<script type="text/javascript" src="./Observer.js"></script>
<script type="text/javascript" src="./Compile.js"></script>
<script type="text/javascript" src="./Mue.js"></script>
<script type="text/javascript" >
let vm = new Mue({
el:'#app',
data: {
message: {
a:'11'}
}
})
</script> </body> </html>
**
## Mue.js
**
```javascript
1. class Mue {
constructor(opt){
this.$el = opt.el;
this.$data = opt.data;
if(this.$el){
new Observer(this.$data);
//模板编译Compile
new Compile(this.$el, this)
}
} }
**
## Compile.js
*
**
```javascript
1. class Compile {
constructor(el, vm) {
this.el = this.isElementNode(el) ? el : document.querySelector(el);
this.vm = vm;
if (this<