【Vue】学习笔记-Vue CLI ref props mixin plugin scoped

news2024/7/4 6:21:45

ref 属性

ref被用来给元素或子组件注册引用信息(id的代替者)

  • 应用在html标签上获取的真实的DOM元素，应用在组件标签上获取的组件实列对象vc
  • 使用方式
    a. 打标识:

    或
    b.获取：this.$refs.xxx
<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素</button>
    <School ref="sch"></School>

  </div>
</template>

<script>
//引入school组件
import School from './components/School.vue'

export default {
    name:'App',
    data(){
        return{
            msg:'欢迎学习Vue'
        }

    },
    components:{School},
    methods:{
        showDom(){
            console.log(this.$refs.title) //真实DOM元素
            console.log(this.$refs.btn)//真实DOM元素
            console.log(this.$refs.sch) //Scbool组件的实例对象(vc)
          
        }
    }

}
</script>

<style>

</style>

在这里插入图片描述

props配置

props 让组件接收外部传过来的数据

  • 传递数据这里的age前加:,通过v-bind使得里面的18是数字
  • 接收数据
    第一种方式(只接收) props:[‘name’,''age]
    第二种方式(限制类型) props:{name:string,age:Number}
    第三种方式(限制类型，限制必要性，指定默认值)
		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			}
		}

备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据
src/App.vue

<template>
	<div>
		<Student name="李四" sex="女" :age="18"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>

src/components/Student.vue

<template>
	<div>
		<h1>{{msg}}</h1>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<h2>学生年龄：{{myAge+1}}</h2>
		<button @click="updateAge">尝试修改收到的年龄</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			console.log(this)
			return {
				msg:'我是一个尚硅谷的学生',
				myAge:this.age
			}
		},
		methods: {
			updateAge(){
				this.myAge++
			}
		},
		//简单声明接收
		// props:['name','age','sex'] 

		//接收的同时对数据进行类型限制
		/* props:{
			name:String,
			age:Number,
			sex:String
		} */

		//接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
		props:{
			name:{
				type:String, //name的类型是字符串
				required:true, //name是必要的
			},
			age:{
				type:Number,
				default:99 //默认值
			},
			sex:{
				type:String,
				required:true
			}
		}
	}
</script>

在这里插入图片描述

mixin 混入

  1. 功能：可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式
    a.定义混入
const mixin={
	data(){....},
	methods:{....}
	....
}

b.使用混入
i.全局混入 Vue.mixmin(xxx)
II.局部混入 mixins:['xxx']

备注
1.组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，在发生冲突时以组件优先。
在这里插入图片描述
2.同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
在这里插入图片描述
src/mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

src/components/School.vue

<template>
	<div>
		<h2 @click="showName">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	//引入一个hunhe
	// import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
				x:666
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>

src/App.vue

<template>
	<div>
		<School/>
		<hr>
		<Student/>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

src/main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(hunhe) //全局混合引入
Vue.mixin(hunhe2) //全局混合


//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

在这里插入图片描述

plugin 插件

  1. 功能：用于增强vue
  2. 本质：包含install方法的一个对象，install的第一个参数是vue,第二个以后的参数是插件使用者传递的数据
  3. 定义插件(见下src/plugin.js)
  4. 使用插件：vue.use()

src/plugin.js

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

src/mian.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

src/components/School.vue

<template>
	<div>
		<h2>学校名称：{{name | mySlice}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="test">点我测试一个hello方法</button>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷atguigu',
				address:'北京',
			}
		},
		methods: {
			test(){
				this.hello()
			}
		},
	}
</script>

src/components/Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<input type="text" v-fbind:value="name">
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
	}
</script>

在这里插入图片描述

scoped样式

  1. 作用让样式在局部生效，防止冲突
  2. 写法：

src/components/School.Vue

<template>
	<div class="demo">
		<h2 class="title">学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷atguigu',
				address:'北京',
			}
		}
	}
</script>

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

src/components/School.vue

<template>
	<div class="demo">
		<h2 class="title">学生姓名：{{name}}</h2>
		<h2 class="atguigu">学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		}
	}
</script>

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

src/App.vue

<template>
	<div>
		<h1 class="title">你好啊</h1>
		<School/>
		<Student/>
	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student}
	}
</script>

<style scoped>
	.title{
		color: red;
	}
</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL 优化一MySQL优化步骤

MySQL 优化一MySQL优化步骤

目录 定位执行效率较低的 SQL 1&#xff09;慢查询 2&#xff09;processlist 定位执行效率较低的 SQL 定位执行效率比较慢的 SQL 语句&#xff0c;一般有三种方式 1、可以通过慢查询日志来定位哪些执行效率较低的 SQL 语句。 2、使用 show processlist 命令查看当前 MyS…
阅读更多...
紧急下架，AI以假乱真学明星唱歌；哈佛法学院专家谈AI和版权法

紧急下架，AI以假乱真学明星唱歌；哈佛法学院专家谈AI和版权法

几周前&#xff0c;一首据称由 Drake 和 The Weeknd 创作的新歌登陆 TikTok 和 Spotify&#xff0c;并迅速在互联网上像野火一样传播开来。“我袖子上的心”在嘻哈乐迷中获得了好评如潮和高度兴奋&#xff0c;这不仅是因为该曲目具有感染力的歌词和旋律&#xff0c;而且还因为对…
阅读更多...
【云原生】云原生服务网格流量控制思考

【云原生】云原生服务网格流量控制思考

文章目录 前言一、什么是流量控制&#xff1f;二、存在三种场景三、场景分析 前言 随着云原生技术的不断发展及应用&#xff0c;很多服务都已部署上云。 保障云上环境的稳定是重要的一环。 一个重要的影响稳定的场景就是突发大流量冲击。 面对该场景&#xff0c;较好的应对…
阅读更多...
C#asp.net core学生信息管理系统

C#asp.net core学生信息管理系统

C#asp.net core学生信息管理系统 运行前附加数据库.mdf&#xff08;或sql生成数据库&#xff09; 主要技术&#xff1a; 基于asp.net core架构和sql server数据库 功能模块&#xff1a; 首页登陆&#xff0c;分别为管理员&#xff08;学生管理 用户角色管理 授课信息管理&…
阅读更多...
Linux_红帽8学习笔记分享_8(文件系统管理FS Management)

Linux_红帽8学习笔记分享_8(文件系统管理FS Management)

Linux_红帽8学习笔记分享_8&#xff08;文件系统管理FS Management&#xff09; 文章目录 Linux_红帽8学习笔记分享_8&#xff08;文件系统管理FS Management&#xff09;1.操作系统的两种启动模式: Legacy BIOS和UEFI1.1 Legacy BIOS1.2 UEFI 2.磁盘分区表的两种类型: MBR和GP…
阅读更多...
【图像分割】【深度学习】SAM官方Pytorch代码-Mask decoder模块MaskDeco网络解析

【图像分割】【深度学习】SAM官方Pytorch代码-Mask decoder模块MaskDeco网络解析

【图像分割】【深度学习】SAM官方Pytorch代码-Mask decoder模块MaskDeco网络解析 Segment Anything&#xff1a;建立了迄今为止最大的分割数据集&#xff0c;在1100万张图像上有超过1亿个掩码&#xff0c;模型的设计和训练是灵活的&#xff0c;其重要的特点是Zero-shot(零样本迁…
阅读更多...
ASP.NET动态Web开发技术第8章

ASP.NET动态Web开发技术第8章

第8章ASP.NET数据访问 一.预习笔记 1.SqlDataSource控件 SqlDataSource数据源控件支持连接SQL关系数据库&#xff0c;它使用SQL命令来检索和修改数据。通常将SqlDataSource数据源控件与数据绑定控件一起使用。 属性1&#xff1a;ID&#xff1a;当前数据源控件的唯一标识符 …
阅读更多...
maven从入门到精通 第三章 Maven中形成web对Java工程的依赖

maven从入门到精通 第三章 Maven中形成web对Java工程的依赖

这里写自定义目录标题 一 war永远依赖于jar1. 在web工程的项目2中,加入项目1的路径依赖2 在web工程中&#xff0c;加入测试代码2.1 创建目录2.2 确认依赖junit2.3创建测试类2.4 运行测试2.5 打包2.6 查看依赖列表2.7 树形结构查看 二 测试依赖的范围1 compile的编译过程1.1 com…
阅读更多...
如何安全免费地备份VMware虚拟机?

如何安全免费地备份VMware虚拟机?

在没有备份的情况下在虚拟机上运行所有工作负载是有风险的。任何人为错误或自然灾害都可能对您的 VMware 虚拟机造成不可逆转的损坏&#xff0c;您无法预测下一秒您的虚拟机会发生什么。因此&#xff0c;您需要一个可靠的免费 vmware 备份解决方案来保护您的虚拟机数据免受安全…
阅读更多...
Ubuntu 23.04 安装 Jupyter

Ubuntu 23.04 安装 Jupyter

Ubuntu 23.04 安装 Jupyter 1. 安装 Python 和 pip2. 升级 pip 至最新版本3. 安装 Jupyter4. 测试是否安装成功5. (可选)安装 Jupyter 内核和扩展6. (可选)配置 Jupyter&#xff0c;设置密码等 1. 安装 Python 和 pip sudo apt install -y python3 python3-pip2. 升级 pip 至最…
阅读更多...
ASEMI代理ADP5054ACPZ-R7原装ADI车规级ADP5054ACPZ-R7

ASEMI代理ADP5054ACPZ-R7原装ADI车规级ADP5054ACPZ-R7

编辑&#xff1a;ll ASEMI代理ADP5054ACPZ-R7原装ADI车规级ADP5054ACPZ-R7 型号&#xff1a;ADP5054ACPZ-R7 品牌&#xff1a;ADI/亚德诺 封装&#xff1a;LFCSP-48 批号&#xff1a;2023 引脚数量&#xff1a;48 工作温度&#xff1a;-40C~125C 安装类型&#xff1a;表…
阅读更多...
[2023-DAS x SU战队2023开局之战] crypto-sign1n

[2023-DAS x SU战队2023开局之战] crypto-sign1n

题目描述&#xff1a; from secret import r, t from Crypto.Util.number import *flag bxxx flag bytes_to_long(flag) e 0x10001def gen_keys():p getPrime(1024)q getPrime(1024)phi (p-1)*(q-1)d inverse(e,phi)n p*qprint(fn {n})WHATF (d ** 3 3) % phiprint…
阅读更多...
Python模块篇：函数/类/变量和常量/注释/导入和使用

Python模块篇：函数/类/变量和常量/注释/导入和使用

大家好&#xff0c;我是辣条哥&#xff01;本期应邀写了一些Python模块相关内容~ Python模块是一种组织Python代码的方式&#xff0c;它将相关的代码放在一个文件中&#xff0c;以便于重用和维护。Python模块可以包含函数、类、变量和常量等&#xff0c;可以被其他Python程序导…
阅读更多...
【计算机网络：自顶向下方法】(四)网络层 (IPV4 | IPV6 | 路由算法 )

【计算机网络：自顶向下方法】(四)网络层 (IPV4 | IPV6 | 路由算法 )

【计算机网络&#xff1a;自顶向下方法 第7版 | 中科大 】 第4章 网络层 &#xff1a; 数据平面 4.1 导论 网络层服务 网络层功能&#xff1a; 转发: 将分组从路由器 的输入接口转发到合适 的输出接口 &#xff08;局部&#xff09;路由: 使用路由算法来 决定分组从发…
阅读更多...
八、(了解即可)MyBatis懒加载(或者叫延迟加载)

八、(了解即可)MyBatis懒加载(或者叫延迟加载)

文章目录 八、懒加载(了解即可)8.1 为啥需要懒加载?8.2 懒加载是什么&#xff1f;8.3 开启方式8.4 既然fetchType可以控制懒加载那么我仅仅配置fetchType不配置全局的可以吗&#xff1f;8.5 aggressiveLazyLoading是做什么么的&#xff1f;8.6 注意点8.7 案例验证懒加载准备工…
阅读更多...
openEuler RISC-V 成功适配 LicheePi 4A 开发板，推动 RISC-V 生态发展

openEuler RISC-V 成功适配 LicheePi 4A 开发板，推动 RISC-V 生态发展

近期&#xff0c;RISC-V SIG 在 LicheePi 4A 开发板上成功实现了欧拉操作系统的适配。目前&#xff0c;最新版本的 openEuler RISC-V 23.03 V1 镜像已在 LicheePi 4A 开发板上可用&#xff0c;这一成果再次展现了 openEuler 在推动 RISC-V 生态发展过程中所取得的新突破。 下载…
阅读更多...
JavaWeb综合案例1-2

JavaWeb综合案例1-2

1. 环境搭建 1.1 创建maven项目 补充相应的文件目录 1.2 修改pom文件及创建相应的基本框架 1.3 创建接口&#xff0c;实体类&#xff0c;映射到xml文件等等 创建xml映射文件 创建接口文件 创建实体类 导入对应的sqlsession工具类 导入对应的brand.html页面 2. 查询所有 2.1 编…
阅读更多...
【看表情包学Linux】软硬链接

【看表情包学Linux】软硬链接

&#x1f923; 爆笑教程 &#x1f449; 《看表情包学Linux》&#x1f448; 猛戳订阅 &#x1f525; &#x1f4ad; 写在前面&#xff1a;上面我们学到的所有东西&#xff0c;全部都是在内存中的。是不是所有的文件都被打开了呢&#xff1f;不是所有的文件&#xff0c;都被打开…
阅读更多...
论文投稿技巧

论文投稿技巧

论文的投稿技巧包括会议论文的投稿技巧和期刊论文的投稿技巧。会议论文和期刊论文投稿技巧差别较大&#xff0c;读者需要根据自己投稿的是会议论文还是期刊论文使用不同的技巧。 为了提高会议论文的录用率&#xff0c;需要重点考虑的因素包含如下几方面。 1. 会议的主题 投稿…
阅读更多...
【Linux】冯诺依曼体系和操作系统：

【Linux】冯诺依曼体系和操作系统：

1.冯诺依曼体系结构&#xff1a; 1.1体系概述理清&#xff1a; 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 &#x1f525;我们将冯诺依曼体系结构分为输入设备、输出设备、存储器和CPU 上述部分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023