美文网首页
vnode模拟v-model

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>

相关文章

  • vnode模拟v-model

    一个改变显示的随之改变

  • v-model模拟多选复选下拉框选择。

    v-model的强大之处。同步输入指令同步改变。模拟复选,多选等。样式比较简单没写主要是逻辑。 v-model的多...

  • Vue核心知识-Vue的组件之render函数

    render function 类型:(createElement: () => VNode) => VNode ...

  • virtual dom

    patch(container,vnode) patch(vnode,newVnode)

  • render函数及其参数createElement

    render 类型:(createElement: () => VNode) => VNode 详细:每个组件,以...

  • 认识vue虚拟DOM(二)

    什么是vnode 在vue中,存在一个VNode类,使用它可以实例化不同类型的vnode实例,不同类型的vnode...

  • 2020-09-11

    什么是虚拟Dom 指的是用js对象的形式,来模拟页面上Dom嵌套关系。(以js对象的形式存在的) 生成vNode-...

  • 虚拟DOM

    什么是vnode vnode tree是对真实dom tree的一层抽象。 每个vnode节点对应真实dom的属性...

  • Vnode

    什么是VNode 在vue.js中存在一个VNode类,使用它可以实例化不同类型的vnode实例,而不同类型的vn...

  • virtual dom 原理理解

    首先理解VNode对象 一个VNode的实例对象包含了以下属性,参见源码src/vdom/vnode.js 其中几...

网友评论

      本文标题:vnode模拟v-model

      本文链接:https://www.haomeiwen.com/subject/lfowuftx.html