- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 学习用 js 封装 vue 中的 v-model</title>
- </head>
- <body>
- <div id="app">
- <input v-model="message"><br>
- <span v-bind="message"></span>
- </div>
- <script src="https://cdn.bootCSS.com/vue/2.2.2/vue.min.js"></script>
- <script>
- // 用 js 封装 vue 中的 v-model
- var model = {
- message:"my model message value"
- };
- var models = app.querySelectorAll("[v-model=message]");
- for(var i=0;i<models.length;i++){
- models[i].onkeyup = function(){
- model[this.getAttribute("v-model")] = this.value;
- }
- }
- //Object.defineProperty() 用来定义一个对象的某个属性 (属性的一些描述)
- // 观察者模式: 对某个数据进行观察监控, 当数据发生改变, 就做某件事
- // 注意: 钩子函数中不要使用 Object.defineProperty() 中操作的属性!!!!
- Object.defineProperty(model,"message",{
- configurable:false,
- // 注意: 要先在 set() 里面赋值, 才能在 get() 里面拿到值, 否则就是 undefined
- get:function(){
- return this.value;
- },
- set:function(newValue){
- var binds = app.querySelectorAll("[v-bind=message]");
- for(var i=0;i<binds.length;i++){
- binds[i].innerHTML = newValue;
- }
- var models = app.querySelectorAll("[v-model=message]");
- for(var i=0;i<models.length;i++){
- models[i].value = newValue;
- }
- this.value = newValue;
- }
- });
- model.message = "abc";
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/36713/c29265b52d1d7e487d304c2ea4895b74.html