v-model的实现原理

最新推荐文章于 2024-04-18 16:58:47 发布

无敌大铁锤

最新推荐文章于 2024-04-18 16:58:47 发布

阅读量2k

点赞数 1

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_57959921/article/details/129422549

版权

我们在平时使用vue做开发时，v-model是我们经常用到的属性，我们日常中对v-model的理解就是双向绑定，但是对其背后的原理没有彻底搞清楚，所以我们需要深入理解v-model背后的原理。

1.v-model是什么，为什么要使用v-model？

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

2.v-model的基本使用

v-model主要提供了两个功能，就是输入框的value改变，它所对应的message对象值也会改变；修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <input type="text" v-model="message">{
  {无敌大铁锤}}
</div>
<script src="../js/vue.js"></script>
<