Vue的学习（二）

最新推荐文章于 2024-08-17 17:03:41 发布
最新推荐文章于 2024-08-17 17:03:41 发布
阅读量1.1k 收藏 16
点赞数 30
分类专栏： Vue 文章标签： vue.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65450681/article/details/140910753
版权

目录

一、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时一定要多打开控制台查看一下。这一节主要学习了，数据的绑定以及事件修饰符，期待下一次与各位宝子再次进行交流，我们下一节再见哦~。

辛-夷
关注
专栏目录
Vue学习手册
02-26
这份"Vue学习手册"旨在引导你逐步掌握Vue的核心概念和实践技巧。 一、Vue基础知识 Vue的基础架构围绕着一个核心对象Vue实例，它是一个数据绑定和事件处理的容器。通过声明式的模板语法，你可以轻松地将数据绑定到...
vue中的 :class
CHunter1024的博客
08-28 2万+
vue中的 :class
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 6829
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
区别vue中:class和:style
2401_85770776的博客
08-17 221
class 和 style 是用来设置 HTML 元素的 CSS 样式的两个不同属性。它们在 Vue 模板中使用时的一些关键的区别和特性
vue基础-Class介绍
weixin_43010844的博客
12-11 5248
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为class是 attribute，我们可以和其他atribute 一样使用v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是或。
vue class的绑定
不靠谱的作曲家
12-30 1961
1.对象的绑定 基本用法 :class="{ 'active': isActive }" 判断是否绑定 :class="{'active':isActive==-1}" 或者 :class="{'active':isActive==index}" 2.绑定并判断多个 第一种（用逗号隔开） :class="{ 'active': isActive, 'sort': isSort }" 第二种（放...
vue中class的用法
weixin_30568715的博客
05-16 1331
最近学习了vue中class和class的用法，想来总结一下，也把我的知识提供给大家使用；首先来总结class的用法，vue中的class有4种写法;class和style都属于DOM属性，所以在vue中都用:class和:style表示 <style> 　　.red{color:red;} 　　.blue{background-color:blue;} </style&...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue基本内容总结学习
07-01
#### 二、Vue 为什么采用异步渲染 Vue 的更新机制是基于组件级别的，这意味着只要组件中的任何一个数据发生变化，整个组件就会被重新渲染。为了提高性能，Vue 采用了异步渲染机制，即它会收集所有的变化，然后在一...
vue绑定class
ead_gbe的博客
07-02 4587
字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。
Vue中使用 class 类样式的方式
最爱喝怡宝的博客
11-20 6966
在vue中为我们提供了 几种方式来使用class类的样式
VUE :class 动态class方法
u012345683的博客
03-27 6万+
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 vue官方文档对于class和style绑定有两种方法，对象语法...
关于vue 里:class 的几种使用方式
datishi8133的博客
02-02 9800
最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的 一 class 1 自定义class 通过vue computed 计算属性 实现 我的class 是名称+时间戳，是独一份的，可以作为id角色使用。 html: <div :cl...
vue动态绑定class的几种方法
热门推荐
u013994400的博客
06-23 8万+
vue动态绑定class的几种做法
Vue中的:class的使用
zhq_zvik的博客
01-29 5万+
一个样式 :class="{makeColor:username!=''}" 多个样式（三元） :class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"
Vue框架（绑定class样式）
zky__sch的博客
08-03 810
虽然有很多中绑定类样式的方法，但是每种类型各有千秋，要根据使用场景来去使用。
VUE3 学习笔记（七）动态样式 class 实现
sensor_WU 博客
04-08 1万+
本文介绍了VUE中动态设置CSS和Style的方法。
制作vue学习计划表
最新发布
09-30
制作Vue学习计划表可以帮助您系统地掌握Vue.js技术，下面是一个简单的Vue学习路径建议： **第一阶段：基础入门** 1. **安装环境** - 熟悉Node.js和npm，安装Vue CLI工具。 2. **Vue官网教程** - 阅读官方文档，了解Vue的基本概念（如组件、指令、数据绑定等）。 3. **Hello Vue App** - 编写第一个Hello World应用，实践模板、组件和生命周期钩子。 4. **深入理解组件** - 学习组件的属性、事件、父子组件通信以及单文件组件(SFC)。 **第二阶段：进阶学习** 1. **响应式原理** - 探索Vue的MVVM模式，理解数据劫持和观察者模式。 2. **路由管理** - 使用vue-router设置页面跳转和动态路由。 3. **状态管理** - 学习Vuex，实现组件间的共享状态。 4. **组件库与插件** - 熟悉Element UI等UI组件库的使用，学习axios或Vuex中的HTTP请求插件。 **第三阶段：实战项目** 1. **选择一个小项目** - 比如静态网站、博客管理系统，动手实践。 2. **中大型项目实践** - 参与开源项目或搭建自己的个人项目，提升实际操作能力。 **第四阶段：进阶特性** 1. **Vue Router懒加载** - 学习如何优化路由性能。 2. **服务端渲染(SSR)** - 掌握Vue SSR的实施原理和流程。 3. **Vue 3+ Composition API** - 跟上最新版本，理解并使用Composition API。 4. **热更新(HMR)** - 学会Vue的热模块替换功能。 **第五阶段：持续学习** - 关注Vue社区和技术更新，定期复习和深化理解。 - 学习相关生态，如TypeScript、Webpack等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值