区别
v-bind:属性绑定(简写:), v-on:事件绑定(简写@), v-model:双向绑定(简写v-model,看下方的代码你就知道简写在哪了)。
v-bind与v-model都是绑定vue中data中的属性的,他们最主要的区别是v-bind的绑定只是单向的,他会将data中的数据投影到绑定的地方,在被绑定的地方对数据修改时,data中的原始数据是不会改变的,而v-model的绑定是双向的,不仅将data中的数据对标签内进行绑定,还会将标签中的数据反向绑定到data中,标签数据改变后data中的数据也会同步改变。
v-on绑定的是事件(函数)是vue中methods中的数据,触发v-on绑定,就会执行其所绑定的事件。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome6</title>
</head>
<body>
<div id="dome">
<!-- 属性绑定 -->
<input type="text" v-bind:value="bind"><br>
v-bind的简写:<input type="text" :value="bind">
<p>{{bind}}</p>
<!-- 双向绑定 -->
<input type="text" v-model:value="model"><br>
v-model的简写:<input type="text" v-model="model">
<p>{{model}}</p>
<!-- 事件绑定 -->
<button v-on:click="von">我被点了{{on}}次</button>
<button @click="von">简写版被点了{{on}}次</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#dome",
data: {
bind : '我是属性绑定',
model : '我是双向绑定',
on : 0
},
methods: {
von(){
this.on += 1
}
}
})
</script>
</html>
详细用法
属性绑定(v-bind:或:)
这里我们使用class和style做演示进行绑定。
单值绑定
上述我们在渲染模板时都是在标签中进行渲染,而如果我们想将数据渲染进入标签内使用双大括号则无法识别{{}},需要在属性前加入v-bind: 或者简写为:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style>
.color{
color: burlywood;
}
</style>
<title>Vue测试1</title>
</head>
<body>
<!-- <div id="dome"></div> 简写-> div#dome -->
<div id="dome">
<!-- 使用大括号"{{vclass}}"无法渲染属性 -->
<p class="{{vclass}}">{{vdata}}</p>
<!-- 使用v-bind:进行绑定后,即可渲染无需添加大括号 -->
<p v-bind:class="vclass">{{vdata}}</p>
<!-- : 是 v-bind: 的简写 -->
<p :class="vclass">{{vdata}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// new Vue({}) 简写-> vnew
new Vue({
el: "#dome",
data:{
vdata: "我修改了字体颜色",
vclass: "color"
}
})
</script>
</html>
多值绑定
多值绑定有多种方式,我们可以使用数组的形式(可以看成Python中的列表形式)一次绑定多个vue中的值, 比如<p :class="[vclass, vbc]">{{vdata}}</p> 或者可以在Vue对象的data属性中的一个值中放入多个属性,中间用空格隔开即可,还可以使用类似Python中的字典格式, 其中键直接放入需要进行判定的属性,值可以放入Vue对象的data属性中的值,当值为真,则此条数据生效,假则不生效。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style>
.color{
color: burlywood;
}
.backcolor{
background: chartreuse;
}
</style>
<title>Vue测试1</title>
</head>
<body>
<!-- <div id="dome"></div> 简写-> div#dome -->
<div id="dome">
<!-- 使用数组形式进行多值绑定 -->
<p :class="[vcolor, vbc]">{{vdata}}</p>
<!-- 多值在Vue的data属性中已经进行绑定 -->
<p :class="vclass">{{vdata}}</p>
<!-- 根据真假渲染 -->
<p :class="{color:class1, backcolor:class2}">{{vdata}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// new Vue({}) 简写-> vnew
new Vue({
el: "#dome",
data:{
vdata: "我修改了字体颜色",
vcolor: "color",
vbc: "backcolor",
vclass: 'color backcolor',
class1: false,
class2: true
}
})
</script>
</html>
绑定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-model)
因为双向绑定的特性,导致其常用于表单输入绑定。即绑定元素中更改了值会自动更新属性中的值,属性中的值更新了也会同步到绑定元素中。
元素绑定
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:
input标签text(文本框)与textarea标签(文本域)时绑定value属性,并且同步value中的值,使用input事件(每次输入都会触发事件)input标签的radio(单选框)与checkbox(多选框,多选框绑定的值必须是一个数组)时绑定checked属性,但会同步value中的值,使用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>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
//创建Vue实例
var vm = new Vue({
el: '#app',
data: {
lazy: '',
number: '',
trim: '',
}
});
</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事件的输出
