Vue框架，v-model 原理详解和代码demo、视频教程

已于 2024-04-03 11:16:50 修改
阅读量1.3k 收藏 23
点赞数 16
分类专栏： # Vue 文章标签： vue.js javascript 前端
于 2024-02-27 16:07:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46085118/article/details/136317992
版权

文章目录

一、视频教程

二、原理和作用

原理

  • v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。
  • 最初的v-mode本身就是为了input标签而设计的，所以绑定的就是value属性和input事件，属性和事件都没法改成其他的，比如a标签没有这两个属性，使用v-mode就会直接报错。

作用

  • 提供数据的双向绑定
  • 数据变，视图跟着变:value
  • 视图变，数据跟着变@input

三、input基础标签实现v-model讲解

  • $event 用于在模板中，获取事件的形参
    <template>
	<div id="app" >
	<input v-model="msg" type="text">
	<input :value="msg" @input="msg = $event.target.value" type="text">
	</div>
</template>

    @input="msg = $event.target.value" 写成
@input="msg = $event" 也可以，这里是等价的
msg = $event.target.value 本质是一个匿名函数，表示把子组件事件的参数值赋值给父组件的 msg 变量

四、自定义组件实现v-model讲解

  • 当自定义组件实现 v-model 时，子组件 props 接收的变量必须是 value，子组件 $emit 提交的事件必须是 input。只要不满足其中一项 v-model 将失效
  • 可自行更改尝试即可理解
  • 优点：父组件v-model 简化代码，实现子组件和父组件数据双向绑定。父组件简化了代码，子组件的代码并没有简化

单文件demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Prop</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

</head>
<!--

-->

<body>

    <div id="app">
        当前selectId的值为：{{selectId}}
        <base-select v-model="selectId"></base-select>
        <button @click="update()">通过按钮直接修改selectId的值变成105</button>
    </div>
    <script>
        Vue.component('BaseSelect', {
            template: '<div>\n    <select :value="value" @change="selectCity">\n      <option value="101">北京</option>\n      <option value="102">上海</option>\n      <option value="103">武汉</option>\n      <option value="104">广州</option>\n      <option value="105">深圳</option>\n    </select>\n  </div>',
            methods: {
                selectCity(e) {
                    this.$emit('input', e.target.value)
                },
            },
            props: {
                value: String,
            }
        })
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    selectId: '102'
                }
            },
            methods: {
                update(){
                    this.selectId='105'
                }
            }
        })
    </script>
</body>

</html>

组件版demo（两个文件）

  • App.vue
<template>
  <div class="app">
    当前selectId的值为：{{selectId}}
    <BaseSelect v-model="selectId"></BaseSelect>
    <button @click="update()">通过按钮直接修改selectId的值变成105</button>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue'
export default {
  data() {
    return {
      selectId: '102'
    }
  },
  methods: {
    update(){
      this.selectId='105'
    }
  },
  components: {
    BaseSelect,
  },
}
</script>

<style>
</style>
  • BaseSelect.vue
<template>
  <div>
    <select :value="value" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    selectCity(e) {
      this.$emit('input', e.target.value)
    },
  },
}
</script>

<style>
</style>

其他

对于已有对象添加新属性，:data失效问题处理

//非响应式数据，会导致 :data失效
this.formData.test = value
//响应式数据
this.$set(this.formData, 'test', value);
北风toto
关注
专栏目录
vue中v-model的实现原理
云端-公子清
10-14 390
vue中v-model的实现原理 v-model的渲染（视图更新控制数据的更改）： 1.把数据中的信息拿到复制给视图上 2.监听视图的更新，更新后重新修改数据 3.数据更改后，重新控制视图重新渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3949
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Vue.js 表单控件绑定 v-model
weixin_34384681的博客
10-15 375
v-model 主要用于input、textarea、select等表单控件元素上创建双向数据绑定，所谓双向绑定就是js中vue实例化的data对象的数据与其渲染的dom元素上的内容保持一致1、text 文本<divid="app"> <h1>`message`</h1> <inputtype="text"v-...
【VUE】Vue2中 v-model 的原理
最新发布
10-10 363
Vue2中 v-model 的原理
Vue之v-model原理
热门推荐
細水、長流√的专栏
10-22 1万+
目标：1、了解v-model的本质。2、了解v-model的实现原理。 我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习视图－>数据的原理。 v-model是一个指令，限制在<input>、<select>、<textarea>、components中使用，修饰符.lazy(取代input监听...
vue v-model实现原理
weixin_42147968的博客
09-08 332
vue.js
vue中v-model实现的原理
qq_55825114的博客
11-03 303
v-model原理
近 20 人爆肝数周，写给初中级前端的万字高级进阶指南
yck199的博客
10-13 3355
因为微信公众号不支持打开外链，所以有兴趣获取资料的读者朋友可以公众号发送「资料」关键字或者打开 Github 链接（https://github.com/KieSun/all-of-fro...
test
wqkeep的博客
04-16 583
0.学习目标 使用资料搭建后台系统 会使用nginx进行反向代理 实现商品分类查询功能 掌握cors解决跨域 实现品牌查询功能 1.使用域名访问本地项目 1.1.统一环境 我们现在访问页面使用的是：http://localhost:9001 有没有什么问题？ 实际开发中，会有不同的环境： 开发环境：自己的电脑 测试环境：提供给测试人员使用的环境 预发布环境：数据是和生成环境的数据一致，运行最...
学习计算机编程（IT、偏网站开发）的参考学习网址syk
chouzhan0246的博客
06-01 9865
这两年自己学到了许多东西，发现以前想学，可却不知道在哪里学，没有好的学习资源，这里我把这一年自己学习过程中了解到的好的计算机相关知识的学习网址分享给大家，虽然不是很全面，但希望能帮到那些想找学习资源的博友们。 IT学习资料（初晓） 1. 综合学习网址 （1）教学网站 http://...
react基础使用
weixin_43507887的博客
07-12 416
一、create-react-app 全局安装create-react-app $ npm install -g create-react-app 创建一个项目 $ create-react-app your-app 注意命名方式 Creating a new React app in /dir/your-app. Installing packages. This might take a couple of minutes. 安装过程较慢， Installing react, react-dom,
浅谈 Vue v-model指令的实现原理
12-11
vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果: 输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子    http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的 如此神奇的效果是如何实现的呢? 还是参照官方文档 http://cn.vuejs.org/v2/guide/components.html#使用自定义事件的表单输入组件 官方也说明了,v-model只不过是一
Vue学习demo
06-28
Vue学习demo，涵盖基本指令、计算属性，方法，路由，组件等一个个的小demo，渐进式学习很有帮助。
v-model的实现原理
qq_39454432的博客
04-11 452
v-model的实现原理
Vue中v-model的原理
qq_50260510的博客
06-08 1254
Vue中v-model的原理
Vue的v-model的原理和实现
weixin_52280029的博客
05-21 6706
v-model就是vue的双向绑定指令，能将页面上空间输入的值同步更新到相关绑定的属性，也会在更新data绑定属性的时候，更新页面上输入控件的值 v-model作为双向绑定指令也是vue两个核心功能之一，使用非常方便，提高前端开发效率，在view层，model层相互需要数据交互，即可使用v-model v-model的原理: v-model主要实现了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层数值变化 1.input 输入值后更新data 首先在页面初始化
vue中v-model详解
09-16 1334
vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@i...
vue v-model 的实现原理
郝峰vip的博客
12-08 1021
v-model 实现原理详解
Vue v-model原理与组件自定义实现
Vue.js 是一款流行的前端框架，它的核心特性之一就是数据绑定，而 `v-model` 就是这个机制的具体体现。`v-model` 提供了便捷的数据双向绑定，使得视图层和数据模型之间的交互变得简单直观。它在底层实际上是对属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值