vue原生input输入框原理是什么

这篇文章主要介绍“vue原生input输入框原理是什么”，在日常操作中，相信很多人在vue原生input输入框原理是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue原生input输入框原理是什么”的疑惑有所帮助免费云主机域名！接下来，请跟着小编一起来学习吧！首先我们来看一段代码：这里是一个原生的input输入框，每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。如果我们想要获取到这个值我们可以通过input.target.value或者通过$event.target.value来获取这个存储的值。只要用户输入了数据，那么此时input标签就会将输入的数据放到这个value中(新数据会覆盖旧数据，所以我们获取到的都是最新的)。现在我们来看上面的标签，我们为input标签添加了一个value属性，并且赋值'value'。其实在标签上设置value属性它的作用有两个：在第一次创建input标签的时候，将对应的初始值展示到输入框中 （在无该属性使输入框不展示任何数据）使用value属性的初始值来初始化input.target.value（无该属性时input.target.value为空串）上面的那段代码的意思是通过添加value="value"属性，初始化input.target.value的值并且将初始值展示到对应的输入框中这里需要注明一点，在后续用户输入的操作中，输入框中的数据只是方便让用户看到自己输入了什么仅此而已。 有人可以会有疑问，难道不是input.target.value里是什么所以输入框内就显示什么吗？其实不是的。输入框显示什么和 input.target.value并没有直接联系，输入框内的显示只是方便用户自己看到自己输入了什么。小结：input中的value有两种：value="xxx" 和 input.target.value 我们需要知道两个分别有什么作用。在整个输入显示流程中， 他们分别扮演什么角色。现在我们来看在vue中的输入框，首先我们来看一段代码：我们一般使用v-bind:value来给Input标签绑定一个vue中的的，这里我们绑定的是this.value。 在这里v-bind:value === :value="value"。 这样实现的原理比较简单。首先我们定义了this.value因为将this.value绑定到了:value上，所以初始时会在输入框展示我们指定的 值，即'123'。当我们输入数据之后，此时$envet.target.value(这里的$event.target.value就是input.target.value)就会存储我们最新的输入的值，然后将最新的值赋值给this.value。因为this.value变化了，此时vue对页面进行更新，此时更新后的input的:value是最新值。但是这里有一个问题，那就是并不会被销毁重建，也就是说this.value = $event.target.value只是改变了this.value 若别的地方引用了this.value，那么就会同步改变。那么this.value的更新对:value="value"的影响是什么呢？其实没有什么影响。因为我们前面说了，:value的作用有两个：一是初始化input.value的值，二是将初始值渲染到对应的输入框中。 在一开始将this.value作为初始值给Input.value和展示在框里，他的任务已经完成了，后续的更改对:value没有一点关系。其实:value="value"的唯一作用就是将this.value作为初始值绑定和展示到input上。现在对于原始元素进行算双向数据绑定已经完成。那么如何实现父组件和子组件之间的双向数据绑定嗯？ 此时我们需要在子组件中使用v-model。 关于 v-model 的使用这里不再赘述。这里只讨论如何在自定义组件实现 v-model。根据vue 的官网的描述，我们大概知道，v-model 的本质就是语法糖，即：vue监听输入框输入行为然后改变对应的值。 如果对子组件进行双向数据绑定该如何实现呢？这里的双向数据绑定指的是父组件将值传递给子组件使用，并且子组件可以改变父组件的值 其实上述的双向绑定可以通过v-bind:propName.sync = 'xxx'来实现。 除了以上的方式，并且Vue还给我们提供了另一种方式：在vue中，它将上述的方法进行了简化，我们可以使用v-model来对子组件进行双向数据绑定。例如：在默认情况下v-model的触发事件名称为input。 子组件想要使用的话，需要定义一个名为value的prop才能使用。 而在子组件中更改该值，只需要定义一个函数，有必要的时候执行 this.$emit('input', newValue) 即可。这里的newValue就是$event。 这样就可以改变对应的值。 当然除了默认的value和input的命名，vue还给我们提过了更加灵活的方式。当我们想在子组件中改变传入的值，那么直接可以this.$emit('change', newValue)所以，在这个例子中 v-model 是以下的简写：其实本质上，项目中的twowayFactor这个混入配置类，他本质上就是做了上面的操作。这样做的目的是将v-model传入的prop改为bindValue。 然后将默认事件的名称从input改为了valueChange。 接着设置get/set这样做的目的是数据本地化。 在组件内部定义一个currentValue 然后为该值设置get，当访问currentValue等价于访问v-model的prop。 然后设置set。当改变currentValue的值时，此时就会触发对应的事件。 当触发之后父组件中的值就会变化。这就实现了双向数据绑定。我们可以看到，其实this.currentValue的作用就是v-model操作的语法糖。 它并没有什么特别之处，只是将v-model传入的数据的访问和更改简单化了，都集中与一个值this.currentValue。到此，关于“vue原生input输入框原理是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注百云主机网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: 微信小程序如何实现日期范围选择

本篇内容介绍了“微信小程序如何实现日期范围选择”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！样式如下：分别点击开始日期和结束日期选择时间（底部弹框）：date.…