脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → v-model、v-bind和v-on指令区别

vue中v-model、v-bind和v-on三大指令的区别详解

 更新时间：2022年11月28日 10:27:25   作者：静Yu  
v-model和v-bind都是数据绑定的方式,下面这篇文章主要给大家介绍了关于vue中v-model、v-bind和v-on三大指令的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

v-model指令

v-model指令用于在表单控件或者组件上创建双向绑定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <input type="text" v-model="msg">
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{

            msg:'hello world',
        }
    })
</script>
</body>
</html>

v-model默认是绑定在value属性上的，所以上述代码中，v-model后面加“:value”也是可以的，即v-model:value，但一般情况下直接写v-model。

这是上面代码的运行结果，接下来我们对数据双向绑定进行测试。

（1）改变Model的值看View的值如何变化？

通过控制台手动改变，，在浏览器打开开发者模式，在控制台输入vm.msg=“JingYu”,然后按下【Enter】键，观察页面中的msg是否会改变。通过测试，我们可以清楚地看到，msg的值会立即跟着改变。

（2）改变View的值看Model的值如何变化？

这是直接通过View修改框中的值，然后在控制台输入vm.msg，观察输出的值。还是可以很清楚的观察到View和Model中的值保持一致。

因为只有表单元素可以与用户进行交互，所以v-model指令一般只用于表单控件或者是一些组件中。

补充：model的修饰符：

（1）.lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 onchange 事件进行同步，当在输入框输入数据时，数据并不会立即改变，当光标离开输入框以后，数据才会实现同步改变，示例代码如下：

v-model.lazy="msg"

(2). .number: 如果想自动将用户的输入值转为数值类型，把type定义为number类型，给 v-model 添加 number 修饰符，当用户输入数值类型的数据时，v-model.number会自动把输入的数据转换为数值类型，注意如果用户输入特殊字母e，number属性不能识别。

（3）.trim: 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符，在输入框起始时候多添加几个空格，当光标离开之后，trim属性会自动过滤收尾空格。

v-bind指令

v-bind指令可以用来绑定标签的属性和样式。要绑定的内容是作为一个JS变量，因此只需要对该内容编写合法的JS表达式。
基础的语法格式为：v-bind:属性=“值”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <a v-bind:href="url" rel="external nofollow" >我的博客主页</a>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            url:"https://juejin.cn/user/2225839800062215",
        }
    })
</script>
</body>
</html>

运行结果就是一个超链接，点击之后就可以跳转到我的博客主页，因为在代码中，我的url地址就是我的博客主页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LiGRPiEH-1661514729318)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/625b4e3447d841d492b0b8b65283b9fd~tplv-k3u1fbpfcp-watermark.image?)]

v-on指令

在传统前端开发中，相对一个按钮绑定事件时，需要获取到这个按钮的DOM元素，再对这个获取到的元素进行事件的绑定。在vue中，对于DOM元素的操作全部由vue完成，我们只关注业务代码的实现。因此我们可以使用vue内置的v-on指令来完成事件的绑定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <input type="button" value="单击我" v-on:click="message">
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{

        },
        methods: {
            message(){
                alert("v-on绑定的单击事件")
            }
        }
    })
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UcU18mJV-1661514729318)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22c739a8751b47488f5f1d5bf239b17e~tplv-k3u1fbpfcp-watermark.image?)]

我们是不可以直接把JavaScript代码写在v-on指令中的，需要自己去定义方法/函数。那么如何去定义呢？在实例化vue中提供了一个methods选项，通过这个选项可以定义方法。

总结

1.v-model用来进行data数据与页面数据的双向绑定。主要用于表单控件，被称为双向绑定

2.v-bind是data数据对页面标签中属性的绑定。被称为单向绑定

3.v-on是methods对页面事件的绑定。

到此这篇关于vue中v-model、v-bind和v-on三大指令区别的文章就介绍到这了,更多相关v-model、v-bind和v-on指令区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题

    vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题

    这篇文章主要介绍了vue2项目如何将webpack迁移为vite并使用svg解决所有bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Element UI安装全过程

    Element UI安装全过程

    element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面,饿了么前端团队基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件,本文给大家介绍Element UI安装全过程,感兴趣的朋友一起看看吧
    2024-01-01
  • vue+element 多个相同的select不允许重复选择问题

    vue+element 多个相同的select不允许重复选择问题

    这篇文章主要介绍了vue+element 多个相同的select不允许重复选择问题，具有很好的参考价值，希望对大家有所帮助。
    2022-07-07
  • 从零开始用webpack构建一个vue3.0项目工程的实现

    从零开始用webpack构建一个vue3.0项目工程的实现

    这篇文章主要介绍了从零开始用webpack构建一个vue3.0项目工程的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue3.2最新语法使用socket.io实现即时通讯详解

    vue3.2最新语法使用socket.io实现即时通讯详解

    这篇文章主要为大家介绍了vue3.2最新语法使用socket.io实现即时通讯详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue3如何直接修改reactive定义的变量

    vue3如何直接修改reactive定义的变量

    这篇文章主要介绍了vue3如何直接修改reactive定义的变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • 基于vue v-for 循环复选框-默认勾选第一个的实现方法

    基于vue v-for 循环复选框-默认勾选第一个的实现方法

    下面小编就为大家分享一篇基于vue v-for 循环复选框-默认勾选第一个的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue Element前端应用开发之整合ABP框架的前端登录

    Vue Element前端应用开发之整合ABP框架的前端登录

    VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用
    2021-05-05
  • Vue3.2.x中的小技巧及注意事项总结

    Vue3.2.x中的小技巧及注意事项总结

    Vue是一套用于构建用户界面的渐进式JavaScript框架,是目前最火的前端框架之一,是前端工程师的必备技能,下面这篇文章主要给大家介绍了关于Vue3.2.x中的小技巧及注意事项的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue全家桶-vuex深入讲解

    vue全家桶-vuex深入讲解

    这篇文章主要介绍了vue全家桶-vuex深入讲解，文章内容详细，简单易懂，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2023-01-01

最新评论