Vue3进阶：Vue开发必备的基本功之双向数据v-model绑定详解及代码实战示例（文末群资料）

什么是双向数据绑定

v-model 的基本用法

v-model 的底层原理

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

注意：由于排版太费时间，所以还是多多注重技术干货的内容吧。

接下来的一段时间我将除了总结下关于【Python进阶系列】的知识点分享文章外，还将为各位前端读者（全栈开发者）分享下关于前端开发框架Vue3的内容，当然还会包括：H5、CSS3、JavaScript、JQuery、前端开发规范等前端内容。

然后对Python开发感兴趣的读者也可以关注公众号CTO Plus，关注【Python进阶系列】的内容，同时涉及到Web开发、爬虫开发、操作系统开发、网络安全开发应用领域这块，可以分别参考我的公众号CTO Plus【Flask进阶系列】、【Django进阶系列】、【DRF进阶系列】、【互联网分布式爬虫系列】和【网络安全系列】的内容，敬请关注，欢迎交流。

以下是【Vue3进阶系列】的部分内容

Vue 是一款流行的JavaScript 框架，它提供了一种简单而强大的方式来处理用户界面的数据绑定。其中，双向数据绑定是 Vue的核心特性之一，它使得数据的变化能够自动反映在用户界面上，同时用户界面中的输入也能够自动更新数据。

本文我将为大家详细介绍 Vue 中的双向数据绑定以及 v-model 的使用方法和特点，帮助读者更好地理解和应用 Vue 中的双向数据绑定机制。

什么是双向数据绑定

首先弄明白什么是双向数据绑定，双向数据绑定是指数据的变化能够自动反映在用户界面上，同时用户界面中的输入也能够自动更新数据。在传统的 Web 开发中，通常需要手动监听用户输入的变化并更新数据，或者手动更新数据后再重新渲染用户界面。而在 Vue 中，通过双向数据绑定，我们只需要关注数据的变化，Vue 会自动处理数据与用户界面之间的同步。

v-model 的基本用法

接下来介绍下v-model的基本用法，v-model是 Vue 提供的一个指令，用于实现双向数据绑定。它可以用于输入元素（如 input、textarea、select）以及自定义组件。

1. 在输入元素上使用 v-model：

在上述示例中，`message` 是Vue 实例中的一个数据属性，通过 v-model 指令将输入框的值与 `message` 进行双向绑定。当用户在输入框中输入内容时，`message` 的值会自动更新；同时，当 `message` 的值发生变化时，输入框中的值也会自动更新。

2. 在自定义组件上使用 v-model：

<custom-input v-model="message"></custom-input>

在自定义组件中，我们需要定义一个名为 `value` 的 prop，并在组件内部通过 `$emit` 方法触发一个名为 `input` 的自定义事件。这样，我们就可以在父组件中使用 v-model 来进行双向数据绑定。

v-model 的底层原理

v-model 实际上是语法糖，它相当于同时使用了一个名为 `value` 的 prop 和一个名为 `input` 的事件。当我们使用 v-model 时，Vue 会自动为我们创建这些属性和事件，并建立起数据与用户界面之间的双向绑定。

关于props的知识，公众号CTO Plus前面的文章中有介绍，读者可以执行查看。

v-model 的修饰符

v-model 还支持一些修饰符，用于对用户输入进行处理。

1. .lazy 修饰符：

使用 .lazy 修饰符，将在输入框失去焦点时才更新数据，而不是在每次输入时都立即更新（也就是不是每输入一个就改变）。

2. .number 修饰符：

使用 .number 修饰符，将确保输入的值被转换为数值（数字）类型。

3. .trim 修饰符：

使用 .trim 修饰符，将自动去除输入内容的首尾空格。

示例：

<template>  <div id="app">    <input v-model.lazy="msg" type="text" name="" >    <p>{
   
   { msg }}</p>  </div>
</template>
<script>
export default {
   
     name: 'App',  data(){
   
       return {       msg: "hello",  }  },   components: {
   
     },  methods: {
   
         }}</script>
<style lang="css"></style>

数组更新检测

数组操作可以引起视图更新的方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

不会引起视图更新的方法：filter()、concat()和 slice()等方法由于不改变原数组，所以不会引起视图更新。

关于这几个数组的操作方法和使用详细参考公众号CTO Plus后面的文章《Vue3进阶：开发过程中数组的操作方法总结介绍》。

示例：

<template>  <div id="app">    <ul>      <li v-for="item in names">{
   
   { item }}</li>    </ul>    <button v-on:click="addItem" type="button" name="button">添加</button>  </div>
</template>
<script>
export default {
   
     name: 'App',  data(){
   
       return {       names: ["steverocket", "微信公众号：CTO Plus", "Cramer"]  }  },   methods: {
   
       addItem(event){
   
         this.names.push('superhin')    }  }}</script>
<style lang="css"></style>

计算属性和观察者

页面中复杂的计算逻辑，如：{ { msg.split('').reverse().join('') }} 应使用计算属性。

示例：

<template>  <div id="app">    <p>{
   
   { msg }}</p>    <p>{
   
   { messageInfo }}</p>  </div></template>
<script>export default {
   
     name: 'App',  data(){
   
       return {       msg: "hello, my name is SteveRocket，your welcome to:CTO Plus"  }  },   computed: {  //计算属性    messageInfo(){
   
         return this.msg.split('').reverse().join('');    }  }}</script>
<style lang="css"></style>

总结

Vue 的双向数据绑定机制使得数据的变化能够自动反映在用户界面上，同时用户界面中的输入也能够自动更新数据。v-model 是 Vue 提供的一个指令，用于实现双向数据绑定。通过 v-model，我们可以简单而便捷地处理用户输入和数据的同步。

前面的文章也分享过计算属性和方法，计算属性和方法的区别在于计算属性可以缓存，只要变量不变则不重新计算，方法每次都会重新计算。

本文详细介绍了 v-model 的基本用法、底层原理以及常用的修饰符。希望通过本文的介绍，你对 Vue 中的双向数据绑定与 v-model 有了更深入的理解，能够更好地应用于实际开发中。

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

更多精彩，关注我公号，一起学习、成长

CTO Plus

一个有深度和广度的技术圈，技术总结、分享与交流，我们一起学习。涉及网络安全、C/C++、Python、Go、大前端、云原生、SRE、SDL、DevSecOps、数据库、中间件、FPGA、架构设计等大厂技术。每天早上8点10分准时发文。

306篇原创内容

公众号