Vue3学习笔记（9.1）

最新推荐文章于 2024-07-10 22:11:08 发布
最新推荐文章于 2024-07-10 22:11:08 发布
阅读量612 收藏 1
点赞数 1
分类专栏： 前端 HTML5 Vue3 文章标签： 学习 css 前端 vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mez_Blog/article/details/129931342
版权
前端 同时被 3 个专栏收录
49 篇文章 0 订阅
订阅专栏
HTML5
32 篇文章 0 订阅
订阅专栏
Vue3
23 篇文章 0 订阅
订阅专栏

Vue.js style（内联样式）

我们可以在v-bind:style直接设置样式，可以简写:style

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:41:44
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="{color:activeColor,fontSize:fontSize+'px'}" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                    error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    activeColor:'red',
                    fontSize:30
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 也可以直接绑定到一个样式对象

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:45:53
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="styleObject" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    // isActive:true,
                    // hasError:true,
                    // error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    
                    styleObject:{
                        color:'purple',
                        fontSize:"30px",
                    }
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 v-bind：style可以使用数组将多个样式对象应用到一个元素上：
 

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:49:52
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <div :style="[styleObject,secondStyle]" >基尼太美</div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    // isActive:true,
                    // hasError:true,
                    // error:null,
                    activeClass:'active',
                    errorClass:'text_danger',
                    
                    styleObject:{
                        color:'purple',
                        fontSize:"30px",
                    },
                    secondStyle:{
                        'font-weight':'bold'
                    }
                }
            }
            // computed:{
            //     classObject(){
            //         return{
            //             active:this.isActive && !this.error,
            //             'text-danger':this.error&&this.error.type==='fatal'
            //         }
            //     }
            // }
        }
        

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

这样，基尼太美就加粗了。

 注意：当v-bind:style使用需要特定前缀的CSS属性时，如transform，Vue.js会自动侦测并添加相应的前缀。

多重值

可以为style绑定中的property提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。如果浏览器支持不带浏览器前缀的flexbox，那么就只会渲染display:flex。

组件上使用class属性

当我们在带有单个根元素的自定义组件上使用class属性，这些class将被添加到该元素中。此元素上的现有class将不会被覆盖。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 16:04:54
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> -->
        <mez class="classC classD"></mez>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app=Vue.createApp({})
        app.component('mez',{
            template:'<h1 class="classA classB">Let is lie</h1>'
        })

        app.mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 对于带数据绑定class也同样适用：

<my-component :class="{active:isActive}"></my-component>

当isActive为TRUE时，HTML将被渲染成为：

<p class="active">Hi</p>

如果你的组件有多个根元素，你需要定义哪部分将接收这个类。可以使用$attrs组件属性执行此操作：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-04 08:54:29
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }

    .classA{
        color:coral;
        font-size: 30px;

    }
    .classB{
        color:rgb(255, 80, 235);
        font-size: 30px;

    }
    
    </style>
   
</head>
<body>
    <div id="app">
      
        <!-- <div :style="[styleObject,secondStyle]" >基尼太美</div> -->
        <mez class="classA"></mez>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app=Vue.createApp({})
        app.component('mez',{
            template:`<h1 :class="$attrs.class">Let is lie</h1>
            <span>这是一个子组件</span>`
        })

        app.mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 

mez_Blog
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python正则表达式提取c语言中的函数,Python正则表达式匹配C语言函数
weixin_26812607的博客
05-19 1280
# coding=utf-8import re# 匹配函数，包含函数体function_return_type = r'''(\s*) #匹配所有的空白字符((const)?(volatile)?(static)?\s*(inline)?\s*(extern)?\s*((VOID)|(void)|(enum)|((unsigned)?(signed)?(long)?\s*(int)|(char)|...
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
【1+X Web】1+X高级试题（5）
热门推荐
`雾博客
12-07 3万+
shadowOffsetX = float 阴影向右偏移量。shadowOffsetY = float 阴影向下偏移量。shadowBlur = float 阴影模糊效果。shadowColor = color 阴影颜色。【canvas属性】
一起学Vue之样式绑定
绳锯木断，水滴石穿，专心写文，无问西东！！！
08-17 146
在前端开发中，设置元素的 class 列表和内联样式是基本要求。本文主要讲解Vue开发中，样式列表和内联样式的绑定，仅供学习分享使用，如果有不足之处，还请指正。 概述 Vue操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
【VueJS】VueJS-Class 与 Style 绑定
DreamSeeker_1314的博客
08-13 362
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class...
2.2 绑定Style样式——第2章 Class 与 Style 绑定
gongyin2013的博客
06-04 548
2.2 绑定Style样式 1、Style绑定对象 通过v-bind:style可以直接让Style绑定对象，例如： <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"/> v-bind:style的赋值是对象{}，其中color是style样式，activeColor是Vue变量，合并成一个对象。生动形象地描述一下：就是用Vue变量控制style样式，是不是有种用电脑控制挖掘机炒菜的感觉：） 让v-
Vue2.5学习笔记 9.1 详情页的Banner
@凌晨三点半的博客
04-04 737
从这篇笔记开始进入到详情页的开发： 1. 首先建立路由，main.js关联Detail页面 // Home/Recommend.vue <template> <div> <div class="title">热销推荐</div> <ul> //这里是将li标签携程router-link标签。也可以在<li...
vue学习笔记（学习中）
2302_76718743的博客
02-26 870
一套用于构建用户界面的渐进式JavaScript框架。
Vue3学习笔记
kin的博客
10-23 150
在父组件中导入子组件，给子组件绑定属性，子组件defineProps接收传递过来的参数，子组件使用传递过来的参数。但是上面这样写数据少的时候还好，数据一多要return的也就越多，这时候可以用setup的语法糖。在vue中默认的数据不是响应式的，这时候可以使用 reactive 或 ref。vscode里的插件，vue2时安装的是Vetur，Vue3可以安装volar。谁的数据谁来维护，底层组件不能直接修改顶层的数据。使用的时候别忘了在对应组件里导入！类型的数据，返回响应式的数据。
Vite+Typescript+Vue3学习笔记
gyfghh的博客
07-26 1926
vite使用的是ts，不识别.vue后缀的文件，需在vite-env.d.ts配置下。用于简化Vue3中ref、reactive**、**watch和UI组件的导入。ts需安装node的类型，否则使用node相关会提示找不到。
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
vue3学习笔记及面试题
02-14
vue3学习笔记及面试题
Lumos学习王佩丰Excel第四讲：排序与选择
最新发布
Sunshine_XX的博客
07-10 226
自定义排序演示：工资条拆分的演示：如果遇到很长的表，标题只存在于顶端，打印出来观感不好，可以这样做：有些版本的excel复制筛选数据容易把背后隐藏的所有数据都复制上去，这时可选中定位条件的“可见单元格”选项，复制粘贴即可。并排表示且，错排表示或。ctrl+shift+↓+→全选，演示说明：回头学原理，先记住一句话，要想筛选对，条件表头不要对。
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
cy1641395022的博客
07-10 447
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
css样式学习样例之边框
abments的博客
07-07 846
css样式学习样例之边框
学习小记-Netty
weixin_42029860的博客
07-06 235
Netty是由JBOSS个java开源框架，Netty提供异步的、事件驱动的网络应用程序框架，用以快速开发高性能、高可靠性的网络服务器和客户端程序。
【康复学习--LeetCode每日一题】3033. 修改矩阵
Puppet__的博客
07-05 352
给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix ，新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等，接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。输入：matrix = [[1,2,-1],[4,-1,6],[7,8,9]]输出：[[1,2,9],[4,8,6],[7,8,9]]输入：matrix = [[3,-1],[5,2]]解释：上图显示了发生替换的元素（蓝色区域）。输出：[[3,2],[5,2]]
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式单独放在一个.vue文件中。此外，组件之间还存在一种重要的内置关系。 在Vue3中，使用Vue.extend()方法可以定义一个组件。该方法中可以设置组件的名称、模板、数据等。通过Vue.extend()定义的组件可以在Vue实例中使用。 在Vue3学习笔记中，还提到了Vue的原型属性prototype，通过它可以添加全局属性或方法。例如，可以使用Vue.prototype.x = 99来添加一个名为x的属性。 总的来说，尚硅谷的Vue3学习笔记主要涵盖了组件的编写和使用，以及Vue的原型属性的添加和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue学习笔记（尚硅谷天禹老师）](https://blog.csdn.net/qq_55593227/article/details/119717498)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值