devbox
酷酷是懒虫
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue的学习（二）

作者：酷酷是懒虫 | 2024-08-07 05:37:38

赞

踩

Vue的学习（二）

目录

一、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盒子上。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.         .active {
  17.             color: aqua
  18.         }
  19.  
  20.         .bgColor {
  21.             background-color: red;
  22.         }
  23.     </style>
  24. </head>
  25.  
  26. <body>
  27.     <div id="app">
  28.         <div class="box" v-bind:class="{active:a,bgColor:b}">
  29.             <div>1 v-bind:class绑定类名 绑定class为对象</div>
  30.         </div>
  31.     </div>
  32.     <script>
  33.         const app = new Vue({
  34.             el: "#app",
  35.             data: {
  36.                 a: true,
  37.                 b: true,
  38.                
  39.             }
  40.         })
  41.     </script>
  42. </body>
  43.  
  44. </html>

运行结果如下

如果让其为false那么样式就不会再添加到div盒子上了。

2. v-bind:class绑定类名 绑定class为对象

在这个案例中我们绑定一个class为对象，在vue实例中使用，这里我们让active为false让bgColor为true，那么大家可以想一下结果是什么样的。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.         .active {
  17.             color: aqua
  18.         }
  19.  
  20.         .bgColor {
  21.             background-color: red;
  22.         }
  23.     </style>
  24. </head>
  25.  
  26. <body>
  27.     <d
  28.         <div class="box" v-bind:class="objCls">
  29.             <div>2 v-bind:class绑定类名 绑定class为对象</div>
  30.         </div>
  31.         
  32.     </div>
  33.     <script>
  34.         const app = new Vue({
  35.             el: "#app",
  36.             data: {
  37.                
  38.                 objCls: {
  39.                     active: false,
  40.                     bgColor: true
  41.                 },
  42.               
  43.             }
  44.         })
  45.     </script>
  46. </body>
  47.  
  48. </html>

运行结果：我们可以看到只有背景颜色添加上了，但是文字颜色没有添加上，是因为我们让active为false

3.v-bind:class绑定类名 绑定class为数组 

1) v-bind:class绑定类名 绑定class为数组  方法一：

第一种方法是将数组中的数据写在data()中

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.         .active {
  17.             color: aqua
  18.         }
  19.  
  20.         .bgColor {
  21.             background-color: red;
  22.         }
  23.     </style>
  24. </head>
  25.  
  26. <body>
  27.     <di
  28.         <div class="box" v-bind:class="[classA,classB]">
  29.             <div>3 v-bind:class绑定类名 绑定class为数组</div>
  30.         </div>
  31.        
  32.     </div>
  33.     <script>
  34.         const app = new Vue({
  35.             el: "#app",
  36.             data: {
  37.               
  38.                 classA: "active",
  39.                 classB: "bgColor",
  40.                
  41.             }
  42.         })
  43.     </script>
  44. </body>
  45.  
  46. </html>

运行结果

2) v-bind:class绑定类名 绑定class为数组  方法二： 

第二种子写法是直接将数组写在data()中，运行结果也是一样的。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.         .active {
  17.             color: aqua
  18.         }
  19.  
  20.         .bgColor {
  21.             background-color: red;
  22.         }
  23.     </style>
  24. </head>
  25.  
  26. <body>
  27.     <div id="app">
  28.        
  29.         <div class="box" v-bind:class="[classA,classB]">
  30.             <div>4 v-bind:class绑定类名 绑定class为数组 {{[ classArr ]}}</div>
  31.         </div>
  32.        
  33.     </div>
  34.     <script>
  35.         const app = new Vue({
  36.             el: "#app",
  37.             data(){
  38.                 classArr: ["active", "bgClor"],
  39.                 
  40.             }
  41.         })
  42.     </script>
  43. </body>
  44.  
  45. </html>

运行结果

4.v-bind:class绑定类名 绑定style为对象 

如下代码块，我们一种可以给css属性（代码中是color和fontsize）一个名字然后在data() 数据中使用，或者在div中直接写backgroundColor:'gray'。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.        
  17.     </style>
  18. </head>
  19.  
  20. <body>
  21.     <div id="app">
  22.         
  23.         <div class="box" v-bind:style="{color:activeColor,fontSize:ftSize,backgroundColor:'gray' }">
  24.             <div>5 v-bind:class绑定类名 绑定style为对象</div>
  25.         </div>
  26.      
  27.     </div>
  28.     <script>
  29.         const app = new Vue({
  30.             el: "#app",
  31.             data: {
  32.                
  33.                 activeColor: "red",
  34.                 ftSize: "22px",
  35.                 
  36.             }
  37.         })
  38.     </script>
  39. </body>
  40.  
  41. </html>

运行结果如下

5.v-bind:class绑定类名 绑定style为数组

 同样的我们还可以绑定style为数组，在data()中将数据添加进去

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid green;
  14.         }
  15.  
  16.        
  17.     </style>
  18. </head>
  19.  
  20. <body>
  21.     <div id="app">
  22.       
  23.       <div class="box" v-bind:style="[styleA,styleB]">
  24.             <div>6 v-bind:class绑定类名 绑定style为数组</div>
  25.         </div>
  26.     </div>
  27.     <script>
  28.         const app = new Vue({
  29.             el: "#app",
  30.             data: {
  31.                 
  32.                 styleA: {
  33.                   color: "red",
  34.                   backgroundColor: "green"
  35.                 },
  36.                 styleB: {
  37.                    fontsize: '22px'
  38.              }
  39.             }
  40.         })
  41.     </script>
  42. </body>
  43.  
  44. </html>

运行结果

二、数据的单向绑定

1.介绍 

 数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据

 v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化

代码展示

2.单向绑定v-bind

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <div id="app">
  13.         
  14.         <input type="text" :value="msg">
  15.     
  16.     </div>
  17.     <script>
  18.         const app = new Vue({
  19.             el: "#app",
  20.             data: {
  21.                 msg: 'hello Vue!!!'
  22.             }
  23.         })
  24.     </script>
  25. </body>
  26.  
  27. </html>

运行结果

在这个input框中我们添加上11111但是在vue中并没有发生数据的改变

3.双向绑定v-model

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <div id="app">
  13.         <input type="text" v-model="msg">
  14.     </div>
  15.     <script>
  16.         const app = new Vue({
  17.             el: "#app",
  18.             data: {
  19.                 msg: 'hello Vue!!!'
  20.             }
  21.         })
  22.     </script>
  23. </body>
  24.  
  25. </html>

 运行结果

在这里我们可以清楚的看到数据会跟随着input的内容发生了变化，这就是单向绑定与双向绑定的不同之处。

三、事件修饰符 

1.   .stop 阻止冒泡(event.stopPropagation())

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid red;
  14.         }
  15.  
  16.         .div {
  17.             border: 1px solid red;
  18.             margin-top: 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div id="app">
  26.         <div class="box">
  27.             <div>1 .stop 阻止冒泡(event.stopPropagation())</div>
  28.             <div class="div" @click="fn">
  29.                 <button @click="fn1">点我1</button>
  30.                 <button @click.stop="fn2">点我2</button>
  31.             </div>
  32.         </div>
  33.         
  34.     </div>
  35.     <script>
  36.         const app = new Vue({
  37.             el: "#app",
  38.             data: {},
  39.             methods: {
  40.                 fn() {
  41.                     console.log("我是外层div")
  42.                 },
  43.                 fn1() {
  44.                     console.log("我是内部的button按钮1")
  45.                 },
  46.                 fn2() {
  47.                     console.log("我是内部的button按钮2")
  48.                 },
  49.                
  50.             }
  51.         })
  52.     </script>
  53. </body>
  54.  
  55. </html>

运行结果

当我们点击外部div时触发fn()事件在控制台显示，fn()函数中打印的内容，当我们点击点我1在控制台打印时，事件会进行冒泡打印出fn()以及fn1()的内容，但是我们为点我2按钮添加了stop事件修饰符，我们可以看到只打印了fn3()中的内容，防止事件进行了冒泡。

2.   .prevent阻止默认事件 

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid red;
  14.         }
  15.  
  16.         .div {
  17.             border: 1px solid red;
  18.             margin-top: 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div id="app">
  26.      
  27.         <div class="box">
  28.             <div>2 .prevent阻止默认事件</div>
  29.             <div class="div" @click="fn">
  30.                 <a href="https://www.baidu.com" @click="fn3">百度一下1</a>
  31.                 <a href="https://www.baidu.com" @click.prevent="fn3">百度一下2</a>
  32.                 <a href="https://www.baidu.com" @click.prevent.stop="fn3">百度一下3</a>
  33.             </div>
  34.         </div>
  35.  
  36.     </div>
  37.     <script>
  38.         const app = new Vue({
  39.             el: "#app",
  40.             data: {},
  41.             methods: {
  42.                 fn() {
  43.                     console.log("我是外层div")
  44.                 },
  45.                 fn1() {
  46.                     console.log("我是内部的button按钮1")
  47.                 },
  48.                 fn2() {
  49.                     console.log("我是内部的button按钮2")
  50.                 },
  51.                 fn3() {
  52.                     console.log("百度一下")
  53.                 }
  54.             }
  55.         })
  56.     </script>
  57. </body>
  58.  
  59. </html>

运行结果

  • 点击外部的div盒子只触发了fn()事件并且打印到控制台
  • 点击第一个百度一下会直接跳转到百度网页
  • 点击第二个百度一下并不会跳转直接打印到了控制台，但是事件同时进行了冒泡打印出fn()事件中的内容
  • 点击第三个被百度一下我们添加了 .prevent阻止默认事件以及stop修饰符，这时候就没有进行跳转并且阻止了冒泡。

3.    .captrue 捕获 

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid red;
  14.         }
  15.  
  16.         .div {
  17.             border: 1px solid red;
  18.             margin-top: 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div id="app">
  26.         
  27.         <div class="box">
  28.             <div>3 .captrue 捕获</div>
  29.             <div class="div" @click="fn">
  30.                 <button @click="fn1">点我1</button>
  31.             </div>
  32.             <div class="div" @click.capture="fn">
  33.                 <button @click="fn2">点我2</button>
  34.             </div>
  35.         </div>
  36.       
  37.     </div>
  38.     <script>
  39.         const app = new Vue({
  40.             el: "#app",
  41.             data: {},
  42.             methods: {
  43.                 fn() {
  44.                     console.log("我是外层div")
  45.                 },
  46.                 fn1() {
  47.                     console.log("我是内部的button按钮1")
  48.                 },
  49.                 fn2() {
  50.                     console.log("我是内部的button按钮2")
  51.                 },
  52.                 fn3() {
  53.                     console.log("百度一下")
  54.                 }
  55.             }
  56.         })
  57.     </script>
  58. </body>
  59.  
  60. </html>

运行结果

当我们点击外部div时，还是一样触发fn()事件，当我们点击点我1时事件发生冒泡，如果我们添加上  .captrue事件那么就会从外向内触发，就是捕获。

4.  .self只触发自身

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid red;
  14.         }
  15.  
  16.         .div {
  17.             border: 1px solid red;
  18.             margin-top: 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div id="app">
  26.       
  27.         <div class="box">
  28.             <div>4 .self只触发自身</div>
  29.             <div class="div" @click.self="fn">
  30.                 <button @click="fn1">点我</button>
  31.             </div>
  32.         </div>
  33.        
  34.     </div>
  35.     <script>
  36.         const app = new Vue({
  37.             el: "#app",
  38.             data: {},
  39.             methods: {
  40.                 fn() {
  41.                     console.log("我是外层div")
  42.                 },
  43.                 fn1() {
  44.                     console.log("我是内部的button按钮1")
  45.                 },
  46.                 fn2() {
  47.                     console.log("我是内部的button按钮2")
  48.                 },
  49.                 fn3() {
  50.                     console.log("百度一下")
  51.                 }
  52.             }
  53.         })
  54.     </script>
  55. </body>
  56.  
  57. </html>

 运行结果

点击外部div还是一样只触发外部，当我们添加上self修饰符那么事件就只会触发自身不会进行冒泡

5..once只触发一次

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="./../day_01/js/vue.js"></script>
  9.     <style>
  10.         .box {
  11.             margin: 10px 0;
  12.             padding: 10px;
  13.             border: 1px solid red;
  14.         }
  15.  
  16.         .div {
  17.             border: 1px solid red;
  18.             margin-top: 10px;
  19.             padding: 10px;
  20.         }
  21.     </style>
  22. </head>
  23.  
  24. <body>
  25.     <div id="app">
  26.       
  27.         <div class="box">
  28.             <div>5 .once只触发一次</div>
  29.             <button @click.once="fn1">点我</button>
  30.         </div>
  31.     </div>
  32.     <script>
  33.         const app = new Vue({
  34.             el: "#app",
  35.             data: {},
  36.             methods: {
  37.                 fn() {
  38.                     console.log("我是外层div")
  39.                 },
  40.                 fn1() {
  41.                     console.log("我是内部的button按钮1")
  42.                 },
  43.                 fn2() {
  44.                     console.log("我是内部的button按钮2")
  45.                 },
  46.                 fn3() {
  47.                     console.log("百度一下")
  48.                 }
  49.             }
  50.         })
  51.     </script>
  52. </body>
  53.  
  54. </html>

 运行结果

这里可以点击多次，但只触发了一次，这里没有办法进行展示，大家可以自行尝试一下。

四、结束语

那么这一节的内容到这里就结束了，大家一定要多次进行尝试， 在写js时一定要多打开控制台查看一下。这一节主要学习了，数据的绑定以及事件修饰符，期待下一次与各位宝子再次进行交流，我们下一节再见哦~。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/941139
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号