精华内容
下载资源
问答
  • v-model实现原理

    2021-04-20 16:28:11
    v-model v-model其实是一个语法糖,它的背后包含两个操作: 1,v-bind绑定一个value属性 2,v-on指令给当前元素绑定input事件 用v-bind和v-on实现双向绑定 <body> <div id="app"> <input type=...

    v-model
    v-model其实是一个语法糖,它的背后包含两个操作:
    1,v-bind绑定一个value属性
    2,v-on指令给当前元素绑定input事件

    用v-bind和v-on实现双向绑定

    <body>
        <div id="app">
            <input type="text" :value="message" @input="changeValue">
            <h2>{{message}}</h2>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            methods: {
                changeValue(event){
                    this.message = event.target.value;
                    //当界面中产生一个事件时浏览器中会产生一个event对象
                    //target 事件属性可返回事件的目标节点
                }
            },
        })
    </script>
    

    以上代码也可以如下写法

    <body>
        <div id="app">
            <input type="text" :value="message" @input="message = $event.target.value">
            <h2>{{message}}</h2>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            methods: {
                // changeValue(envent){
                //     this.message = envent.target.value;
                // }
            },
        })
    </script>
    
    展开全文
  • v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点) <input v-model="something"> 其实和下面一样的 <input :value=...

    v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点)

    <input v-model="something">
    

    其实和下面一样的

    <input :value="something"  @input="something = $event.target.value">
    

    因此,对于一个带有 v-model 的输入框组件,它应该:接收一个 value prop,触发 input 事件,并传入新值

    自定义myInput组件

    <template>
      <div style="padding-top: 100px;">
        <button @click="minu"  class="btn">-</button>
            <input type="text" :value="currentValue" @input="handleInput" />
        <button @click="plus" class="btn">+</button>
      </div>
    </template>
    <script>
    export default {
      props:['value'],
        data () {
        return {}
      },
      computed:{
      	currentValue:function(){
      		return this.value
      	}
      },
      methods:{
      	handleInput:function(event){
          	this.$emit('input', event.target.value); //触发 input 事件,并传入新值
      	},
      	minu:function(){
      		this.$emit('input', this.currentValue - 1 );
      	},
      	plus:function(){
      		this.$emit('input',  this.currentValue + 1 );
      	},
      }
    }
    </script>
    <style type="text/css">
    	.btn{
    		width: 60px;
    	}
    </style>
    

    在页面使用

    <template>
      <div class="hello">
      	<myInput v-model='name'></myInput>
      	{{name}}
      	<myInput v-model='othername'></myInput>
      	{{othername}}
      </div>
    </template>
    <script>
    import myInput from "@/components/myInput";
    export default {
      name: 'HelloWorld',
      data () {
        return {
         name:10,
         othername:6,
        }
      },
      components: {
       myInput
      }, 
     
      methods:{
      }
    }
    </script>
    <style scoped>
    
    </style>
    

    效果
    在这里插入图片描述
    总结:
    自定义的组件内部一般包含原生的表单组件(当然非表单的组件也可以),然后给原生控件绑定事件,捕捉到原生组件的值,利用 $emit方法,触发input方法,组件监听到 input事件然后把值传入

    v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
    text 和 textarea 元素使用 value 属性和 input 事件;
    checkbox 和 radio 使用 checked 属性和 change 事件;
    select 字段将 value 作为 prop 并将 change 作为事件。

    展开全文
  • [Vue源码分析] v-model实现原理

    千次阅读 多人点赞 2018-12-28 23:55:06
    [Vue源码分析] v-model实现原理 最近小组有个关于vue源码分析的分享会,提前准备一下… 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化。那么v-...

    最近小组有个关于vue源码分析的分享会,提前准备一下…

    前言:
    我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化。那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码。

    前期准备

    ①:vue2.5.2源码(用于阅读、查看关联等)
    ②:建立vue demo,创建包含v-model指令的实例(用于debugger)
    以下为demo:
    在这里插入图片描述

    genDirectives

    在模板的编译阶段, v-model跟其他指令一样,会被解析到 el.directives 中,之后会通过genDirectives方法处理这些指令,genDirectives方法位于src/compiler/codegen/index.js中:
    在这里插入图片描述
    我们去到之前建立的demo,找到demo中node_modules/vue/dist/vue.esm.js下的genDirectives方法,打上debugger,如图:
    在这里插入图片描述
    可以看到传进来的el是ast语法树,el.directives是el上的指令,如下:
    在这里插入图片描述
    在这里插入图片描述
    回到genDirectives源码,循环指令时都执行了const gen: DirectiveFunction = state.directives[dir.name]这个方法,state.directives是什么?
    当遍历到v-model的时候,dir.namemodel,对应的state.directives[dir.name]相当于state.directives[model]directives的定义位于src/platforms/web/compiler/directives/index.js 中:
    在这里插入图片描述
    本次分析的v-model,对应的也就是model方法,也就是其实!!gen(el, dir, state.warn)执行的是model方法,!!用于将返回值转为Boolean类型,model的定义位于index同目录下。

    model

    在这里插入图片描述
    model方法根据传入的参数对tag的类型进行判断,调用不同的处理逻辑,本demo中tag的类型为input,所以会执行genDefaultModel方法,为了节约时间,就不去源码中找了,藏得比较深,直接在demo引用的单文件源码vue.esm.js中搜索genDefaultModel

    genDefaultModel

    发现定义如下,打上debugger,以便调试:
    在这里插入图片描述
    通过控制台查看变量信息,可以看到:
    在这里插入图片描述
    可以看到里边的genAssignmentCode(value, valueExpression)在此demo中相当于genAssignmentCode("msg", ""$event.target.value""),执行此方法后返回的是一个字符串:msg=$event.target.value,后来命中了needCompositionGuard,所以code变成了if($event.target.composing)return;msg=$event.target.valueif($event.target.composing)return;的作用是不记录用户未确定的输入,比如:
    在这里插入图片描述
    注释掉if(needCompositionGuard)的话用户没确定的也会展示,如图:
    在这里插入图片描述
    随后会依次执行以下两个方法:
    在这里插入图片描述

    addProp

    先注释掉addHandler,避免对研究此方法产生影响。
    在这里插入图片描述
    可以看到此方法的功能为给el添加props,首先判断el上有没有props,如果没有的话创建props并赋值为一个空数组,随后拼接对象并推到props中,代码在此demo中相当于push{name: "value", value: "(msg)"},打印一下这番操作后的el,可以看到添加了propsel的结构如下:
    在这里插入图片描述
    这个方法其实是在input上动态绑定了value,此时,原本的<input v-model="msg">相当于变成了<input v-bind:value="msg">,随后继续执行addHandler

    addHandler

    以下仅包含关键代码,打上debugger以便查看数据。
    在这里插入图片描述
    控制台查看eldebuuger结果:
    在这里插入图片描述
    可以看到比执行addHandler之前,el上多了events,可以得知这个方法主要给el 添加了事件处理,在此demo中的话相当于在 input 上绑定了 input 事件。

    总结:

    也就是说,到此为止,原本的<input v-model="msg">相当于变成了<input v-bind:value="msg" v-on:input="msg=$event.target.value">,当用户输入的使用触发msg=$event.target.value进而更新msgmsg通过v-bind绑定到输入框的value上。
    即,以下两份代码其实是一个意思。
    第一份:
    在这里插入图片描述
    第二份
    在这里插入图片描述

    展开全文
  • vue的v-model实现原理

    2020-11-03 22:26:49
    //v-model实现原理:把inpu输入框的value属性值和vue实例的mes属性进行绑定,同时监听输入事件input并把输入的值赋值给vue实例的mes <input v-bind:value="mes" v-on:input="mes=$event.target.value"/> ...
    <view>{{mes}}</view>
    <input v-model="mes" />
    //v-model实现原理:把inpu输入框的value属性值和vue实例的mes属性进行绑定,同时监听输入事件input并把输入的值赋值给vue实例的mes
    <input v-bind:value="mes" v-on:input="mes=$event.target.value"/>
    

    总结

    所以说在默认情况下,一个组件上的使用了v-model会把value作为prop,把input事件作为event.

    展开全文
  • v-model只是一个语法糖,等于:value+@input,真正的实现靠的还是: v-bind:绑定响应式数据,触发 input 事件并传递数据 (核心和重点) 1 其实和下面一样的 <input :value=“something” @input=“something = ...
  • vue中的v-model能够实现数据的双向绑定,也是vue的最突出的优势,其中的原理其实很简单,主要包括属性绑定和事件监听两部分,废话不多说,先举个v-model实现数据双向绑定的例子: <div id="app"> <p>v...
  • v-model仅仅是一个语法糖。 <input type="text" v-model="msg" />...所以,实际上v-model实现,第一步是通过v-bind绑定value值,第二步通过触发input事件,传递数据。 v-model在组件中使用,如下图代码所示
  • Vue的v-model实现原理

    2021-04-02 14:26:36
    <input v-model="inputValue" /> <input :value="inputValue" @...原生JS实现v-model <body> <input type="text" id="inputModel"> <p id="p"></p> </body> <script&g
  • v-model实现原理和详情

    千次阅读 2019-09-18 09:57:56
    以下示例是用单页面的形式写的。 a.vue  // a.vue是父级引用组件b.vue <template> <!-- 这儿是组件的父级,也就是组件的实例。实例本来应该定义事件来... 但v-model呢却是给组件内部加个model:{prop:...
  • 那么他是怎么实现的呢, 其实他是一个语法糖, v-model 干了 两件事 下面以 input 为例 <input type="text" v-bind:value='message' @input='message = $event.target.value'> 等价于 <input type="text" ...
  • Vue.js 数据观测原理在技术实现上,利用的是ES5 Object.defineProperty()和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 613
精华内容 245
关键字:

v-model实现原理