目录
一、class及style的绑定
1.v-bind:class绑定类名 绑定class为对象
编辑2. v-bind:class绑定类名 绑定class为对象
3.v-bind:class绑定类名 绑定class为数组
1) v-bind:class绑定类名 绑定class为数组 方法一：
2) v-bind:class绑定类名 绑定class为数组 方法二：
4.v-bind:class绑定类名 绑定style为对象
5.v-bind:class绑定类名 绑定style为数组
二、数据的单向绑定
1.介绍
2.单向绑定v-bind
3.双向绑定v-model
三、事件修饰符
1. .stop 阻止冒泡(event.stopPropagation())
2. .prevent阻止默认事件
3. .captrue 捕获
4. .self只触发自身
5..once只触发一次
四、结束语
一、class及style的绑定
1.v-bind:class绑定类名 绑定class为对象
代码展示
这里我们定义了一个active的类名，一个bgColor的类名，并为其添加样式，使用v-bind绑定，在vue实例中让其为true，那么我们就可以看到我们写的样式添加到了div盒子上。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><div id="app"><div class="box" v-bind:class="{active:a,bgColor:b}"><div>1 v-bind:class绑定类名 绑定class为对象</div></div></div><script>const app = new Vue({el: "#app",data: {a: true,b: true,}})</script>
</body></html>运行结果如下
如果让其为false那么样式就不会再添加到div盒子上了。
2. v-bind:class绑定类名 绑定class为对象
在这个案例中我们绑定一个class为对象，在vue实例中使用，这里我们让active为false让bgColor为true，那么大家可以想一下结果是什么样的。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><d<div class="box" v-bind:class="objCls"><div>2 v-bind:class绑定类名 绑定class为对象</div></div></div><script>const app = new Vue({el: "#app",data: {objCls: {active: false,bgColor: true},}})</script>
</body></html>运行结果：我们可以看到只有背景颜色添加上了，但是文字颜色没有添加上，是因为我们让active为false
3.v-bind:class绑定类名 绑定class为数组
1) v-bind:class绑定类名 绑定class为数组 方法一：
第一种方法是将数组中的数据写在data()中
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><di<div class="box" v-bind:class="[classA,classB]"><div>3 v-bind:class绑定类名 绑定class为数组</div></div></div><script>const app = new Vue({el: "#app",data: {classA: "active",classB: "bgColor",}})</script>
</body></html>运行结果
2) v-bind:class绑定类名 绑定class为数组 方法二：
第二种子写法是直接将数组写在data()中，运行结果也是一样的。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><div id="app"><div class="box" v-bind:class="[classA,classB]"><div>4 v-bind:class绑定类名 绑定class为数组 {{[ classArr ]}}</div></div></div><script>const app = new Vue({el: "#app",data(){classArr: ["active", "bgClor"],}})</script>
</body></html>运行结果
4.v-bind:class绑定类名 绑定style为对象
如下代码块，我们一种可以给css属性（代码中是color和fontsize）一个名字然后在data() 数据中使用，或者在div中直接写backgroundColor:'gray'。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}</style>
</head><body><div id="app"><div class="box" v-bind:style="{color:activeColor,fontSize:ftSize,backgroundColor:'gray' }"><div>5 v-bind:class绑定类名 绑定style为对象</div></div></div><script>const app = new Vue({el: "#app",data: {activeColor: "red",ftSize: "22px",}})</script>
</body></html>运行结果如下
5.v-bind:class绑定类名 绑定style为数组
同样的我们还可以绑定style为数组，在data()中将数据添加进去
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}</style>
</head><body><div id="app"><div class="box" v-bind:style="[styleA,styleB]"><div>6 v-bind:class绑定类名 绑定style为数组</div></div></div><script>const app = new Vue({el: "#app",data: {styleA: {color: "red",backgroundColor: "green"},styleB: {fontsize: '22px'}}})</script>
</body></html>运行结果
二、数据的单向绑定
1.介绍
数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据
v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化
代码展示
2.单向绑定v-bind
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script>
</head><body><div id="app"><input type="text" :value="msg"></div><script>const app = new Vue({el: "#app",data: {msg: 'hello Vue!!!'}})</script>
</body></html>运行结果
在这个input框中我们添加上11111但是在vue中并没有发生数据的改变
3.双向绑定v-model
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script>
</head><body><div id="app"><input type="text" v-model="msg"></div><script>const app = new Vue({el: "#app",data: {msg: 'hello Vue!!!'}})</script>
</body></html>运行结果
在这里我们可以清楚的看到数据会跟随着input的内容发生了变化，这就是单向绑定与双向绑定的不同之处。
三、事件修饰符
1. .stop 阻止冒泡(event.stopPropagation())
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>1 .stop 阻止冒泡(event.stopPropagation())</div><div class="div" @click="fn"><button @click="fn1">点我1</button><button @click.stop="fn2">点我2</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},}})</script>
</body></html>运行结果
当我们点击外部div时触发fn()事件在控制台显示，fn()函数中打印的内容，当我们点击点我1在控制台打印时，事件会进行冒泡打印出fn()以及fn1()的内容，但是我们为点我2按钮添加了stop事件修饰符，我们可以看到只打印了fn3()中的内容，防止事件进行了冒泡。
2. .prevent阻止默认事件
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>2 .prevent阻止默认事件</div><div class="div" @click="fn"><a href="https://www.baidu.com" @click="fn3">百度一下1</a><a href="https://www.baidu.com" @click.prevent="fn3">百度一下2</a><a href="https://www.baidu.com" @click.prevent.stop="fn3">百度一下3</a></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>运行结果
- 点击外部的div盒子只触发了fn()事件并且打印到控制台
- 点击第一个百度一下会直接跳转到百度网页
- 点击第二个百度一下并不会跳转直接打印到了控制台，但是事件同时进行了冒泡打印出fn()事件中的内容
- 点击第三个被百度一下我们添加了 .prevent阻止默认事件以及stop修饰符，这时候就没有进行跳转并且阻止了冒泡。
3. .captrue 捕获
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>3 .captrue 捕获</div><div class="div" @click="fn"><button @click="fn1">点我1</button></div><div class="div" @click.capture="fn"><button @click="fn2">点我2</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>运行结果
当我们点击外部div时，还是一样触发fn()事件，当我们点击点我1时事件发生冒泡，如果我们添加上 .captrue事件那么就会从外向内触发，就是捕获。
4. .self只触发自身
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>4 .self只触发自身</div><div class="div" @click.self="fn"><button @click="fn1">点我</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>运行结果
点击外部div还是一样只触发外部，当我们添加上self修饰符那么事件就只会触发自身不会进行冒泡
5..once只触发一次
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>5 .once只触发一次</div><button @click.once="fn1">点我</button></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>运行结果
这里可以点击多次，但只触发了一次，这里没有办法进行展示，大家可以自行尝试一下。
四、结束语
那么这一节的内容到这里就结束了，大家一定要多次进行尝试， 在写js时一定要多打开控制台查看一下。这一节主要学习了，数据的绑定以及事件修饰符，期待下一次与各位宝子再次进行交流，我们下一节再见哦~。