VUE基础之scoped和TodList

目录

scoped样式

总结TodoList案例


scoped样式

  1. 作用:让样式在局部生效,防止冲突。

  2. 写法:<style scoped>

    <style scoped>
    .demo{background-color: pink;
    }
    </style>

    注:如果在APP.vue中写style代码则是所有组件都会用到,但如果加了scoped则只会在app.vue中有效果,所以在写代码的时候一般不会给App.vue添加scoped

    style还可以编译less例如

    less最大的特点就是可以嵌套写,代码如下

    <style lang="less">
    .demo{background-color: pink;.font{font-size: 30px;}
    }
    </style>

    注:要先安装less-loader。安装前先确认你的webpack的版本,如果版本是5以前的需要安装less-loader7版

    安装:
    npm i less-loader

总结TodoList案例

  1. 组件化编码流程:

    (1).拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。

    (2).实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:

    1).一个组件在用:放在组件自身即可。

    2). 一些组件在用:放在他们共同的父组件上(状态提升)。

    (3).实现交互:从绑定事件开始。

  2. props适用于:

    (1).父组件 ==> 子组件 通信

    (2).子组件 ==> 父组件 通信(要求父先给子一个函数)

  3. 使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!

  4. 如果要给孙子辈传递数据要先给儿子辈传递,再给孙辈传递

  5. nanoid是一个可以帮你自动生成id的一个模块

    安装:

    npm i nanoid

    调用:

    import {nanoid} from 'nanoid'

  6. props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837193.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

绝地求生:经典艾伦格即将回归!绝地求生艾伦格进化史

29.2版本经典艾伦格地图将会回归&#xff0c;让我回顾一下艾伦格地图的改动历史吧&#xff01; 回归时间 2016年早期A测 A测 4.1版本&#xff1a;艾伦格-新视界 主要区域变动 Military Base(军事基地) Military Base Mylta Power&#xff08;大电&#xff09; Mylta Power …

微信小程序开发题库

一. 单选题&#xff08;共12题&#xff0c;60分&#xff09; 1. (单选题) 有如下HTML代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Document</title> <style> ul,li{ margin:0; p…

Vue组件化开发

Vue.js 的组件化开发是 Vue 的核心特性之一&#xff0c;它允许你将复杂的 UI 拆分成更小的、可重用的部分&#xff0c;即组件。每个组件都包含了自己的模板、逻辑和样式&#xff0c;可以独立开发和测试&#xff0c;然后与其他组件组合起来形成完整的应用程序。 以下是 Vue 组件…

【计算机网络】数据链路层 组帧 习题4

组帧 发送方根据一定的规则将网络层递交的分组封装成帧(也称为组帧)。 组帧时&#xff0c;既要加首部&#xff0c;也要加尾部&#xff0c;原因是&#xff0c;在网络信息中&#xff0c;帧是以最小单位传输的。所以接收方要正确地接收帧&#xff0c;就必须清楚该帧在一串比特串中…

SQLite 创建数据库

语法 sqlite3 命令的基本语法如下&#xff1a; $sqlite3 DatabaseName.db 通常情况下&#xff0c;数据库名称在 RDBMS 内应该是唯一的。 实例 如果您想创建一个新的数据库 <testDB.db>&#xff0c;SQLITE3 语句如下所示&#xff1a; $sqlite3 testDB.db SQLite ver…

EasyExcel 中实体类的注解@ExcelProperty

ExcelProperty(value "职务", index 0) value 与index 的优先级, 实测得出下面结论. 1、只有value : 按照value 的匹配 2、只有index: 按照index 的匹配 3、 同时有value和index: 按照index的匹配. 结果: 按照index的匹配, 找到的数据 {"administrat…

大模型管理工具:SWIFT

目录 一、SWIFT 介绍 二、SWIFT 安装 2.0 配置环境(可选) 2.1 使用pip进行安装 2.2 源代码安装 2.3 启动 WEB-UI 三、部署模型 3.0 deploy命令参数 3.1 原始模型 3.2 微调后模型 一、SWIFT 介绍 SWIFT&#xff08;Scalable lightWeight Infrastructure for Fine-Tuni…

MySQL8.0就地升级到MySQL8.4.0

MySQL8.0就地升级到MySQL8.4.0 升级需求&#xff1a;将8.0.35升级到8.4.0,以In-Place方式直接升级到MySQL8.4.0。 数据库版本 操作系统版本 原版本 8.0.35 Centos7.9 x86_64 新版本 8.4.0 Centos7.9 x86_64 关闭现有版本MySQL&#xff0c;将二进制或包替换成新版本并…

知识付费系统的设计与实现,职业在线教育没有学生怎么办?

目前的市场看来&#xff0c;很多学生都会尽自己的努力考取大学&#xff0c;反而职业在线学习相比以前已经沉寂很多&#xff0c;因为职业学校主要是针对成绩不太好的学生&#xff0c;但是成绩不好的学生要么选择重新复读&#xff0c;要么直接放弃&#xff0c;很少会有人选择去职…

对比学习笔记

这里写目录标题 什么是对比学习计算机视觉中的对比学习对比学习在NLP中的应用 什么是对比学习 对比学习是在没有标签的前提下学习样本之间的是否相似&#xff0c;其实和二分类比较相似&#xff0c;判断两个图像是不是属于同一个类别。换句话来说就是把相近的分布推得更近&…

用Arm CCA解锁数据的力量

安全之安全(security)博客目录导读 目录 CCA将如何改变Arm架构呢? 在实践中部署CCA 释放数据和人工智能的全部力量和潜力 早期计算中最大的挑战之一是管理计算资源&#xff0c;以最大化计算效率同时提供给不同程序或用户分配资源的分离。这导致了我们今天大多数使用的时间…

MinIO学习笔记

MINIO干什么用的&#xff1a; AI数据基础设施的对象存储 为人工智能系统提供数据支持&#xff0c;数据存储&#xff1b;对象存储&#xff08;Object Storage&#xff09;是一种数据存储架构&#xff0c;它以对象为单位来处理、存储和检索数据&#xff0c;每个对象都包含了数据本…

ModuleSim 仿真找不到模块 module is not defined

提示如下&#xff1a; # vsim -t 1ps -L altera_ver -L lpm_ver -L sgate_ver -L altera_mf_ver -L altera_lnsim_ver -L cycloneive_ver -L rtl_work -L work -voptargs""acc"" pulse_generator_tb # Start time: 14:26:25 on May 10,2024 # ** Note: (…

开关电源功率测试方法:输入、输出功率测试步骤

在现代电子设备中&#xff0c;开关电源扮演着至关重要的角色&#xff0c;其效率和稳定性直接影响到整个系统的性能。因此&#xff0c;对开关电源进行功率测试成为了电源管理的重要环节。本文将详细介绍如何使用DC-DC电源模块测试系统对开关电源的输入输出功率进行准确测量&…

网络安全之OSPF进阶

该文针对OSPF进行一个全面的认识。建议了解OSPF的基础后进行本文的一个阅读能较好理解本文。 OSPF基础的内容请查看&#xff1a;网络安全之动态路由OSPF基础-CSDN博客 OSPF中更新方式中的触发更新30分钟的链路状态刷新。是因为其算法决定的&#xff0c;距离矢量型协议是边算边…

Python | Leetcode Python题解之第87题扰乱字符串

题目&#xff1a; 题解&#xff1a; class Solution:def isScramble(self, s1: str, s2: str) -> bool:cachedef dfs(i1: int, i2: int, length: int) -> bool:"""第一个字符串从 i1 开始&#xff0c;第二个字符串从 i2 开始&#xff0c;子串的长度为 le…

Kubernetes中的RBAC

目录 1. Role2. ClusterRole3. RoleBinding4. ClusterRoleBinding5.启用 RBAC Kubernetes中的RBAC&#xff08;Role-Based Access Control&#xff0c;基于角色的访问控制&#xff09;是一种机制&#xff0c;用于控制集群内资源的访问权限。RBAC允许管理员通过定义角色&#xf…

5.13号模拟前端面试10问

1.介绍箭头函数和普通函数的区别 箭头函数和普通函数在JavaScript中有一些重要的区别。以下是关于这些区别的详细解释&#xff1a; 语法结构上的差异&#xff1a; 箭头函数使用更简洁的语法&#xff0c;它不需要使用function关键字&#xff0c;而是使用一个箭头&#xff08;…

第三方组件element-ui

1、创建 选vue2 不要快照 vue2于vue3差异 vue2main。js import Vue from vue import App from ./App.vueVue.config.productionTip falsenew Vue({render: h > h(App), }).$mount(#app)vue3 main.js vue2不能有多个跟组件&#xff08;div&#xff09;

JavaCRUD模板参考

Mapper层 Mapper public interface ExCategoryMapper extends BaseMapper<ExCategory> { }Service层 package co.yixiang.exam.service;import co.yixiang.exam.common.R; import co.yixiang.exam.entity.ExStudent; import com.baomidou.mybatisplus.core.metadata.IP…