Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法) 自制动图,一看就懂 ∠( °ω°)／前端知识

2401_84618978

已于 2024-05-08 17:53:50 修改

阅读量950

点赞数 9

分类专栏：程序员文章标签：前端 vue.js javascript

于 2024-05-08 17:53:48 首次发布

本文链接：https://blog.csdn.net/2401_84618978/article/details/138580952

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了

绑定style

我们直接使用style配置样式时进行属性绑定,可能会碰到一个属性名不符合规范的报错问题,一些样式属性的名称会出现中横线,而据博主所知在个主流编程语言的变量名中均不支持中横线所以就会导致如下报错
在这里插入图片描述
如何解决这种报错,其实也很简单,主要方法有两种,

给不合法的变量名加上引号,在vue的data属性中,键名加不加引号效果都一样,如果你想可以把所有键名都加上引号。比如:'font-size': '30px'
==将不合法变量名改为驼峰命名模式,==Vue会自动将驼峰命名的变量名转换为我们需要的变量名,比如:fontSize: '25px'

除此之外,style还可能遇到绑定后无法生效的问题,这里必须要加上大括号才能生效。

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue测试</title>
</head>
<body>
    <div id="dome">
        <p :style="pclass1">{{vdata}}</p>
        <p v-bind:style="pclass2">{{vdata}}</p>
        <p>{{vdata}}</p>
        <!-- 这里我踩过的坑大家可以注意一下 -->
        <!-- style属性绑定时候需要加上一个大括号{} -->
        <!-- style属性原本比如我想要一个红色字体可以直接写成style="color:red" -->
        <!-- 这时如果你想把red换成一个Vue中的数据,直接进行绑定:style="color:Vue元素"会导致页面所以显示都消失,且不会有任何报错,如下 -->
        <!-- <p :style="color:vblue">我是蓝色字体</p> -->
        <!-- 正确的写法应该需要给属性的值添加上一个大括号绑定才能生效:style="{color:Vue元素}" -->
        <p :style="{color:vred}">我是红色字体</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
 new Vue({
 el: "#dome",
 data:{
 vdata: '[]~(￣▽￣)~\*', 
 pclass1: {
 color: 'burlywood',
 background: 'chartreuse',
 'font-size': '30px'
 },
 pclass2: {
 color: 'beige',
 background: 'blue',
 fontSize: '25px'
 },
 vred : "red",
 vblue : "blue"
 }
 })
</script>
</html>

在这里插入图片描述

事件绑定(`v-on`或`@`)

事件绑定我们可以看成在HTML页面中触发一个事件(这里的事件可以理解为一个函数)。
经过v-on绑定的属性可以直接执行js代码,也可以去vue中methods中寻找函数执行。

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>dome9</title>
</head>

<body>

    <div id ="app">
        <!-- 'v-on==@' 直接执行js代码 -->
        <button v-on:click='count-=1'>每次点击-1</button>
        <!-- '@是v-on的简写' methods中寻找add函数执行 -->
        <button @click='add(10)'>每次点击+10</button>
        <p>当前数值为:{{count}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
 //创建Vue实例
 var vm = new Vue({
 el: '#app',
 data: {
 count: 0
 },
 methods: {
 add(num){
 this.count += num
 }
 }
 });
 </script>
</html>

在这里插入图片描述

传入event

如果在事件处理函数中,想要获取原生的DOM事件,那么在html代码中,调用的时候,可以传递一个$event参数。

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>dome9</title>
</head>

<body>

    <div id ="app">
        <!-- 'v-on==@' 直接执行js代码 -->
        <button v-on:click='count-=1'>每次点击-1</button>
        <!-- '@是v-on的简写' methods中寻找add函数执行 -->
        <button @click='add(10,$event)'>每次点击+10</button>
        <p>当前数值为:{{count}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
 //创建Vue实例
 var vm = new Vue({
 el: '#app',
 data: {
 count: 0
 },
 methods: {
 add(num){
 this.count += num
 console.log(event)
 }
 }
 });
 </script>
</html>

当我点击一下第二个按钮时候,在控制台中就能看到原生DOM事件的输出
在这里插入图片描述

双向绑定(`v-model`)

因为双向绑定的特性,导致其常用于表单输入绑定。即绑定元素中更改了值会自动更新属性中的值,属性中的值更新了也会同步到绑定元素中。

双向绑定原理

其实本质上双向绑定v-model是v-bind以及v-on配合使用的语法糖。

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>自定义组件内的v-model</title>
</head>

<body>
    <div id ="app">
        <input type="text" v-model="vmodel">
        <p>{{vmodel}}</p>
        <!-- $event.target.value是获取当前输入框中的值 -->
        <input type="text" :value="vbind" @input="vbind=$event.target.value">
        <p>{{vbind}}</p>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
 // 创建Vue实例
 new Vue({
 el: '#app',
 data: {
 vmodel: '',
 vbind: ''
 }
 });
</script>
</html>

上述绑定中<input type="text" v-model="vmodel">的作用就相当于<input type="text" :value="vbind" @input="vbind=$event.target.value">
当前我使用的是文本输入,v-model会绑定value属性和input事件,但绑定其他的如单选、多选、下拉菜单等不同的标签,绑定的属性和事件也不同。具体如下

元素绑定

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:

input标签text(文本框)与textarea标签(文本域)时绑定value属性,使用input事件(每次输入都会触发事件)
input标签的radio(单选框)与checkbox(多选框,多选框绑定的值必须是一个数组)时绑定checked属性,使用change(每次改变选择都会触发事件)
select标签(下拉菜单)比较特殊,绑定值虽然在select标签中执行,但最终获取值却是获取的 option标签中的值,默认优先获取标签中value属性中的值,如果标签中没有value属性则会获取标签中的元素。

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>dome7</title>
</head>

<body>

    <div id="dome">
        <!-- 文本框 -->
        文本框:<input type="text" v-model:value='vtext' placeholder="我是文本框, 请输入..."><br>
        <!-- 文本域 -->
        文本域:<textarea v-model:value='vtextarea' placeholder="我是文本域,请输入..." cols="30" rows="3"></textarea><br>
        <!-- 单选框 -->
        单选框:
        <input type="radio" v-model:checked='vradio' value="男"><label>男</label>
        <input type="radio" v-model:checked='vradio' value="女"><label>女</label>
        <input type="radio" v-model:checked='vradio' value="中性"><label>中性</label><br>
        <!-- 多选框 -->
        多选框:
        <input type="checkbox" v-model:checked='vchoice' value="真香定理"><label>真香</label>
        <input type="checkbox" v-model:checked='vchoice' value="人类本质"><label>复读机</label>
        <input type="checkbox" v-model:checked='vchoice' value="咯咯咯"><label>今晚一定</label><br>
        <!-- 下拉菜单 -->
        下拉菜单:
        <select v-model:value="vselect">
            <option value="1">A</option>
            <option>B</option>
        </select>
        <!-- 数据 -->
        <p>文本框:{{vtext}}</p>
        <p>文本域:{{vtextarea}}</p>
        <p>单选框:{{vradio}}</p>
        <!-- 三元表达式,.length方法用于查看数组长度,可以用于判断是否为空,为空则输出空字符串 -->
        <p>多选框:{{vchoice.length==0?'':vchoice}}</p>
        <p>下拉菜单:{{vselect}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
 //创建Vue实例
 new Vue({
 el: "#dome",
 data: {
 vtext: "",
 vtextarea: "",
 vradio: "",
 vchoice: [],
 vselect: ""
 }
 })
 </script>
</html>

在这里插入图片描述

修饰符

v-model有几个修饰符非常好用,这里推荐给大家

.lazy:一种非同步修改,默认情况下,我们将文本框双向绑定后,我们的任何改变都会被立即同步进入数据,但这种同步在大多数时候是没有必要的,我们可以等待用户全部输入结束后在进行同步,可以节省资源。
.number:可以看成强制类型转换,将用户输入的内容强制转换成为数字。
.trim:去除空格(去除文本开头和结尾的所有空格,文本中间如果出现空格则不会去除)

<!DOCTYPE html>
<html lang="zh\_CN">
<head>
    <meta charset="UTF-8">
    <title>dome8</title>
</head>

<body>

    <div id ="app">
        <!-- 非同步更新 -->
        <input type="text" v-model.lazy='lazy'>
        <!-- 如果不用简写,方法必须加在属性value之后才能生效,如果直接写在v-model之后像下方一样是无效的 -->
        <input type="text" v-model.lazy:value='lazy'>
        <p>非同步更新: {{lazy}}</p>

        <!-- 数值转换 -->
        未转换: <input type="text" v-model='number'>
        已转换: <input type="text" v-model.number='number'>
        <p>(未转换时为字符型,为两字符相加,转换后为数值,为数值相加)</p>
        <p>{{number}}+{{number}}={{number+number}}</p>

        <!-- 去空格 -->
        未去空格版: <input type="text" v-model='trim'>
        已去空格版: <input type="text" v-model.trim='trim'>
        <p>'{{trim}}'</p>


### JavaScript 和 ES6



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

2401_84618978

关注

9
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-bind,v-on,v-model都是干什么的(区别以及详细用法) 自制动图,一看就懂 ∠( °ω°)／前端知识

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫