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

2401_85124898

于 2024-06-17 02:13:07 发布

阅读量132

点赞数 2

分类专栏：资料作者\/ 是vip1024c 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/2401_85124898/article/details/139729798

版权

资料作者\/ 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

是vip1024c

9 篇文章 0 订阅

订阅专栏


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200610224717941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


#### 多值绑定


多值绑定有多种方式,我们可以使用数组的形式(可以看成Python中的列表形式)一次绑定多个vue中的值, 比如`<p :class="[vclass, vbc]">{{vdata}}</p>` 或者可以在**Vue对象的data属性**中的一个值中放入多个属性,中间用空格隔开即可,还可以使用类似Python中的字典格式, 其中键直接放入需要进行判定的属性,值可以放入Vue对象的data属性中的值,当值为真,则此条数据生效,假则不生效。

Vue测试1


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200610230838731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


#### 绑定style


我们直接使用style配置样式时进行属性绑定,可能会碰到一个属性名不符合规范的报错问题,一些样式属性的名称会出现中横线,而据博主所知在个主流编程语言的变量名中均不支持中横线所以就会导致如下报错  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/202006102337149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)  
 如何解决这种报错,其实也很简单,主要方法有两种,


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


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

Vue测试

我是红色字体


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020061219093739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


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


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

dome9

<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>

<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
}
}
});


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200620124134882.gif#pic_center)


#### 传入event


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

dome9

<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>

<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)
}
}
});


当我点击一下第二个按钮时候,在控制台中就能看到原生`DOM`事件的输出  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200620125928770.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjExMjMw,size_16,color_FFFFFF,t_70)


### 双向绑定(`v-model`)


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


#### 双向绑定原理


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

自定义组件内的v-model


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


#### 元素绑定


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


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

dome7

<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>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

//创建Vue实例
new Vue({
el: “#dome”,
data: {
vtext: “”,
vtextarea: “”,
vradio: “”,
vchoice: [],
vselect: “”
}
})


![在这里插入图片描述](https://img-blog.csdnimg.cn/2020061914335071.gif#pic_center)


#### 修饰符


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


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

dome8

<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>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

//创建Vue实例
var vm = new Vue({
el: ‘#app’,
data: {
lazy: ‘’,
number: ‘’,
trim: ‘’,
}
});


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200620121130200.gif#pic_center)





#### 后话

-------------------------------------------------------------



对于面试，说几句个人观点。



面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。