【Vue CLI ref props mixin plugin scoped】

news/2024/5/20 8:05:20/文章来源:https://blog.csdn.net/yang_72/article/details/137429227

属性名称及作用

名称作用
ref 属性被用来给元素或子组件注册引用信息(id的替代者),应用在 htm1 标签上获取的是真实Dom元素;应用在组件标签上获取的是组件实例对象vue
props 配置项让组件接收外部传过来的教据, 特别注意:props 是只读的
mixin 混入可以把多个组件共用的配置提取成一个混入对象
plugin 插件本质包含 install 方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据(x,y), 用于增强 vue
scoped 样式让样式在局部生效,防止冲突

ref 属性

	//注册 在html标签中写入<School ref="schoolRef"/>//获取this.$refs.schoolRef//写在导入中 默认暴露一次export default {name: 'App',data () {return{}},methods:{func1(){// 绑定元素时,获取Dom元素console.log(this.$refs);// console.log(this.$refs.newRef.style.color);// 绑定组件时,获取vcconsole.log(this.$refs.schoolRef);}}}

props 配置项(只读)

	//传递数据<Demo namea"xox" :age="18"/>

注意:age前面加了: 通过v- bind绑定使得里面的18是数字

props 接收数据的方式

  • 第一种方式(只接收)
    props:[ 'name' , 'age' ]
  • 第二种方式(限制类型)
    age props: { name : String , age : Number }
  • 第三种方式(限制类型、限制必要性、指定默认值)
props:{name:{// 限制类型type:String,//限制必要性required:true,//指定默认值default:"李四"}}

mixin 混入(方式共两种)

全局混入Vue.mixin (xxx)
局部混入mixins:[ 'xxx' ]

plugin 插件

1.定义插件(在Xxx.js文件中完成定义;名称如:src/plugin.js
2.使用插件:Vue.use()


scoped 样式

写法:< style scoped >

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

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

相关文章

MySQL高级(索引分类-聚集索引-二级索引)

目录 1、主键索引、唯一索引、常规索引、全文索引 2、 聚集索引、二级索引 3、回表查询 4、通过id查询和通过name查询那个执行效率高&#xff1f; 5、 InnoDB主键索引的 B tree 高度为多高呢&#xff1f; 1、主键索引、唯一索引、常规索引、全文索引 在MySQL数据库&#xff0c…

C++的stack和queue类(一):适配器模式、双端队列与优先级队列

目录 基本概念 stack的使用 queue的使用 适配器模式 stack.h test.cpp 双端队列-deque 仿函数 优先队列 priority_queue的使用 queue.h文件 stack.h文件 test.cpp文件 日期类的比较 商品的比较 结论 基本概念 1、stack和queue不是容器而是容器适配器&…

性能优化原则

相关链接&#xff1a;【运行环境】加载资源的形式 性能优化 1 性能优化原则 多使用内存、缓存或其他方法 减少CPU计算量&#xff0c;减少网络加载耗时 &#xff08;适用于所有编程的性能优化----空间换时间&#xff09; 2 从何入手 性能优化-让加载更快 减少资源体积&#x…

每日一题 — 最大连续 1 的个数III

解法一&#xff1a;暴力枚举 先定义left和right双指针&#xff0c;left先固定在起始位置&#xff0c;遍历right当值等于1的时候&#xff0c;直接跳过&#xff0c;等于0的时候&#xff0c;zero计数器加一当zero等于k的时候&#xff0c;就开始记录此时最大长度是多少然后left加一…

深度剖析:网络安全中的红蓝对抗策略

红蓝对抗 红蓝对抗服务方案 在蓝队服务中&#xff0c;作为攻击方将开展对目标资产的模拟入侵&#xff0c;寻找攻击路径&#xff0c;发现安全漏洞和隐患。除获取目标系统的关键信息&#xff08;包括但不限于资产信息、重要业务数据、代码或管理员账号等&#xff09;外&#x…

Python | 超前滞后分析

Nino SST Indices (Nino 12, 3, 3.4, 4; ONI and TNI) 有几个指标用于监测热带太平洋&#xff0c;所有这些指标都是基于海表温度(SST)异常在一个给定的区域的平均值。通常&#xff0c;异常是相对于30年的周期来计算的。厄尔尼诺3.4指数(Nio 3.4 index)和海洋厄尔尼诺指数(Ocea…

Chrome谷歌下载入口

​hello&#xff0c;我是小索奇 发现好多人说谷歌浏览器在哪里下载呀&#xff0c;哪里可以找到&#xff1f; 你可能会心想&#xff0c;一个浏览器你还不会下载啊&#xff1f; 还真是&#xff0c;有很多伙伴找不到下载入口&#xff0c;为什么呢&#xff1f; Bing进行搜索&am…

java程序 .exe启动nginx防止重复启动,已解决

java代码生成好的.exe启动nginx服务程序 根据nginx占用端口来解决nginx服务重复启动问题&#xff08;下面代码了解代码逻辑后根据自己的业务需求修改即可&#xff09; 代码&#xff1a; package org.example;import javax.swing.*; import java.awt.*; import java.io.*; …

C#/WPF 使用开源Wav2Lip做自己的数字人(无需安装环境)

实现效果 Speaker Wav2Lip概述 2020年&#xff0c;来自印度海德拉巴大学和英国巴斯大学的团队&#xff0c;在ACM MM2020发表了的一篇论文《A Lip Sync Expert Is All You Need for Speech to Lip Generation In The Wild 》&#xff0c;在文章中&#xff0c;他们提出一个叫做Wa…

ChatGPT 4.0报错 :“Hmm…something seems to have gone wrong.”

ChatGPT报错&#xff0c;GPT-3.5模型正常&#xff0c;GPT-4.0报错&#xff1a;“Hmm…something seems to have gone wrong.” 说明&#xff1a;嗯…好像出了什么问题。 原因&#xff1a; 部分用户在使用GPT-3.5模型时提问正常&#xff0c;GPT-4.0模型提问时&#xff0c;出现这…

Open CASCADE学习|求曲面的参数空间

在三维空间中&#xff0c;任意的曲面都可以通过特定的方法映射到一个二维参数平面上&#xff0c;从而对其进行详细的几何分析和处理。首先&#xff0c;我们需要从三维模型中提取出特定的曲面&#xff0c;这通常被称为“Face”。一个face可以被视为三维空间中的一个封闭区域&…

xss.pwnfunction-Ah That‘s Hawt

<svg/onloadalert%26%2340%3B1%26%2341%3B> <svg/>是一个自闭合形式 &#xff0c;当页面或元素加载完成时&#xff0c;onload 事件会被触发&#xff0c;从而可以执行相应的 JavaScript 函数

【日期】获取当天以及未来三天的日期和周几

// 获取当天以及未来三天的日期和周几getDates() {const today new Date();const dayOfWeek ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];const todayDate today.toDa…

专业测评:哪个平台提供大数据信用风险检测?

在贷款申请过程中&#xff0c;大数据信用评估变得越来越重要。许多人对此感到困惑&#xff0c;不清楚如何获取自己的大数据信用风险等级。本文将为您解答疑惑&#xff0c;介绍如何正确地查询和理解大数据信用报告。 市场上的大数据信用报告查询服务乱象 目前&#xff0c;市场上…

网工内推 | 安全运维、服务工程师,软考中级、CISP优先,六险一金

01 华成峰科技 招聘岗位&#xff1a;安全运维工程师 职责描述&#xff1a; 1、负责安全产品的运维管理&#xff0c;包括设备升级变更、策略配置优化、设备巡检等&#xff1b; 2、负责7*24小时安全监控与应急响应&#xff0c;包括态势感知日志监测、安全事件分析及处置等&#…

VMware vSphere虚拟化基础管理平台

VMware简介 VMware介绍 官网&#xff1a;https://www.vmware.com/cn.html VMware公司成立于1998年&#xff0c;2003年存储厂商EMC以6.35亿美元收购了VMware&#xff1b;2015年10月&#xff0c;戴尔宣布以670亿美元收购EMC。VMware公司在2018年全年收入79.2亿美元。 VMware主…

C++修炼之路之string模拟实现

目录 前言 一&#xff1a;构造函数析构函数拷贝构造函数 二&#xff1a;c_str size capacity operator operator[] 三&#xff1a;普通迭代器 const迭代器范围for 四&#xff1a;关系操作符重载 五&#xff1a;reserveresize 六&#xff1a;push_back …

【C++第三阶段】deque容器评委打分案例

以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 构造函数赋值操作大小操作插入删除数据存取排序评委评分案例描述 deque容器 双端数组&#xff0c;可以对头端插入删除操作。 如下图所示。 头部有插入删除操作&#xff0c;尾部亦然…

three.js尝试渲染gbl模型成功!(三)

参照教程&#xff1a;https://cloud.tencent.com/developer/article/2276766?areaSource102001.5&traceId88k805RaN_gYngNdKvALJ &#xff08;作者&#xff1a;九仞山&#xff09; 通过最近两天查three.js入门教程了解到 这玩应支持包括 .obj、.gltf等类型的模型结构。 g…

【微服务】------服务注册

在 微服务的基建工作 中提到过&#xff0c;在云原生、微服务时代&#xff0c;如果还是手动修改服务地址&#xff0c;是几乎不可完成的工作&#xff0c;需要一种机制完成自动上报和获取服务地址的支撑组件&#xff0c;可以保障服务的快速上线和下线&#xff0c;这就是服务注册/发…