vnode模拟v-model

作者: 嗯哼_3395 | 来源:发表于2018-07-07 15:45 被阅读0次

一个改变显示的随之改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="box">
        <input type="text" v-len="name">
        <p>{{name}}</p>
    </div>
</body>
    <script>
       Vue.directive("len",{
           inserted:function(el,binding,vnode){
                el.value=binding.value;
                //当input框的值发生改变的时候
                el.addEventListener("input",function(){
                     vnode.context[binding.expression]=el.value;
                })
           },
           //当data发生改变的时候
           update:function(el,binding,vnode){
                el.value=binding.value;
           }
       })
       var box=new Vue({
          el:"#box",
          data:{
              name:"veb"
          }
       })

    </script>
</html>