前端基础之组件
组件：实现应用中局部功能代码和资源的集合
非单文件组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<h1>{{msg}}</h1>
<!-- 3.编写组件标签 -->
<school></school>
<hr>
<student></student>
</div>
<script type="text/javascript">
//1.创建school组件
const school= Vue.extend({
template:`
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{addr}}</h2>
<button @click="showName">点我提示学校名称</button>
</div>
`,
//不需要创建el配置项
data(){
return{
schoolName:'尚硅谷',
addr:'北京',
}
},
methods: {
showName(){
alert(this.schoolName)
}
}
})
//1.创建student组件
const student= Vue.extend({
template:`
<div>
<h2>学生名称:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
//不需要创建el配置项
data(){
return{
studentName:'张三',
age:18
}
}
})
//1.创建hello组件
const hello=Vue.extend({
template:`
<div>
<h1>你好</h1>
</div>
`,
data(){
return{
name:'tim'
}
}
})
//2.注册全局组件
Vue.component('hello',hello)
//创建vm
const vm= new Vue({
el:'#root',
data:{
msg:'你好'
},
//2.组件注册（局部注册）
components: {
school,
student
}
})
</script>
</body>
</html>
组件的结构我们在template中使用。并且使用 ` ` 将其包裹
可以使用name配置项指定组件在开发者工具中呈现的名字
组件标准化写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<app></app>
</div>
<script type="text/javascript">
//定义student组件
const student=Vue.extend({
template:`
<div>
<h2>学生年龄:{{age}}</h2>
<h2>学生名称:{{name}}</h2>
</div>
`,data(){
return{
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<student></student>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
//注册子组件，局部
components: {
student
}
})
//注册hello组件
const hello= Vue.extend({
template:`
<div>
<h1>{{msg}}</h1>
</div>
`,
data(){
return{
msg:'hello'
}
}
})
//创建app组件
const app= Vue.extend({
template:`
<div>
<school></school>
<hello></hello>
</div>
`,
components:{
school,
hello
}
})
//注册组件
new Vue({
el:'#root',
components: {app}
})
</script>
</body>
</html>
我们在组件的创建的时候，需要将父组件定义在子组件的后面，并且，需要一个统一的app组件来作为所有组件的父组件，然后只将其注册到vm中即可
VueComponent构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->
</head>
<body>
<div id="root">
<school></school>
</div>
<script type="text/javascript">
//定义school组件
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
methods: {
showName(){
console.log(this.name,this)
}
}
})
console.log('@',school)
new Vue({
el:'#root',
components: {
school
}
})
</script>
</body>
</html>
我们定义的组件本质上就是一个名为VueComponent的构造函数，我们在进行<school></school>的时候，vue会自动帮我们执行new VueComponent()
每次调用vue.extend(),放回的都是一个新的VueComponent，
在组件中，启动的this指向的是VueComponent，而在new Vue({})中的则是Vue
VueComponent与Vue联系
VueComponent.prototype.__proto===Vue.prototype ，VC能够同构隐式管理链能多去查找一步
VC也能去访问Vue原型上的属性、方法
也就是说，在Vue中添加的属性，VC通过隐式关系链就能访问到VM中的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
<script type="text/javascript">
Vue.prototype.x=99
const school=Vue.extend({
template:`
<div>
<h2>学校地址:{{addr}}</h2>
<h2>学校名称:{{name}}</h2>
<button @click="showx">点我展示x</button>
</div>
`,data(){
return{
name:'尚硅谷',
addr:'北京'
}
},
methods: {
showx(){
console.log(this.x)
}
}
})
console.log('@',school)
const vm= new Vue({
el:'#root',
data:{
msg:'hello'
},
components: {
school
}
})
</script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
单文件组件
项目结构为
Student.vue与School.vue是我们创建的组件，App.vue是用于管理和引入这两个组件的，vm是在main.js中创建并且用于引入App.vue，index.html是文件的总入口和总div的创建
School.vue
<template>
<!-- 组件的结构 -->
<div class="demo">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ addr }}</h2>
<button @click="showName">点我提示学校名称</button>
</div>
</template>
<script>
// 组件交互的代码
export default { //对外暴露
name:'School',//与vue文件命名一致
data() {
return {
name: '尚硅谷',
addr: '北京',
}
},
methods: {
showName() {
alert(this.name)
}
}
}
</script>
<style>
/* 组件的样式 */
.demo {
background: orange;
}
</style>
Student.vue
<template>
<div >
<h2>学生名称:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name: '李四',
age:18
}
}
}
</script>
App.vue
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from './School.vue'
import School from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
</script>
<style>
</style>
main.js
import App from './App.vue'
new VUe({
el:'#root',
template:`<App></App>`,
components: {
App
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单文件文件的语法</title>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root"></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script> <!-- 入口文件 -->
</body>
</html>
相关文章：
前端基础之组件
组件：实现应用中局部功能代码和资源的集合 非单文件组件 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"…...
spring boot整合flyway实现数据的动态维护
1、简单介绍一下flyway Flyway 是一款开源的数据库版本控制工具，主要用于管理数据库结构的变更（如创建表、修改字段、插入数据等）。它通过跟踪和执行版本化的迁移脚本，帮助团队实现数据库变更的自动化。接下来简单介绍一下flyway…...
通往 AI 之路：Python 机器学习入门-线性代数
2.1 线性代数（机器学习的核心） 线性代数是机器学习的基础之一，许多核心算法都依赖矩阵运算。本章将介绍线性代数中的基本概念，包括标量、向量、矩阵、矩阵运算、特征值与特征向量，以及奇异值分解（SVD&…...
Matlab中的均值函数mean
今天调了一个代码里的bug，根源居然是mean函数的使用细节没留意到~ 具体来说，写一个类似k均值聚类那样的程序，交替迭代，其中有一部是使用mean求一堆向量的均值，这些向量存在一个矩阵里，每行对应一个向量。若…...
数据结构知识学习小结
一、动态内存分配基本步骤 1、内存分配简单示例： 个人对于示例的理解： 定义一个整型的指针变量p（着重认为它是一个“变量”我觉得可能会更好理解），这个变量用来存地址的，而不是“值”，malloc函…...
高精算法的用法及其优势
高精度问题是指当数据的位数非常大（超出标准数据类型的范围）时，如何进行计算和存储的问题。常见场景包括大整数的加、减、乘、除、取模等操作。以下是解决高精度问题的常用方法与技巧： 一、数据存储 数组存储 用整型数组存储&am…...
【Spring AOP】_切点类的切点表达式
目录 1. 根据方法签名匹配编写切点表达式 1.1 具体语法 1.2 通配符表达规范 2. 根据注解匹配编写切点表达式 2.1 实现步骤 2.2 元注解及其常用取值含义 2.3 使用自定义注解 2.3.1 编写自定义注解MyAspect 2.3.2 编写切面类MyAspectDemo 2.3.3 编写测试类及测试方法 在…...
多线程-定时任务线程池源码
定时任务线程池 ScheduledThreadPoolExecutor，可以执行定时任务的线程池。这里学习它的基本原理。 定时任务线程池，和普通线程池不同的地方在于，它使用一个延迟队列，延迟队列使用最小堆作为它的数据结构，它会按照任务…...
初次使用 IDE 搭配 Lombok 注解的配置
前言 在 Java 开发的漫漫征程中，我们总会遇到各种提升效率的工具。Lombok 便是其中一款能让代码编写变得更加简洁高效的神奇库。它通过注解的方式，巧妙地在编译阶段为我们生成那些繁琐的样板代码，比如 getter、setter、构造函数等。然而&…...
云服数据存储接口：CloudSever
云服数据存储接口：CloudSever 迷你世界 更新时间: 2024-04-28 19:09:10 具体函数名及描述如下： 序号 函数名 函数描述 1 setOrderDataBykey(...) 设置排行榜中指定键的数值 2 removeOrderDataByKey(...) 删除排行榜中指定键的数值 …...
关于 QPalette设置按钮背景未显示出来 的解决方法
若该文为原创文章，转载请注明原文出处 本文章博客地址：https://hpzwl.blog.csdn.net/article/details/146047054 长沙红胖子Qt（长沙创微智科）博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV…...
上传文件到对象存储是选择前端还是后端
对于云上对象存储的上传方式选择（前端直传或后端代理上传），需综合考虑安全性、性能、成本、业务需求等因素。 1. 推荐前端直传的场景 适用条件： 大文件上传（如视频、大型数据集）高并发场景（如…...
mysql下载与安装
一、mysql下载： MySQL获取： 官网：www.mysql.com 也可以从Oracle官方进入：https://www.oracle.com/ 下载地址：https://downloads.mysql.com/archives/community/ 选择对应的版本和对应的操作系统ÿ…...
Python练习(握手问题，进制转换，日期问题，位运算，求和)
一. 握手问题 代码实现 ans0for i in range(1,51):for j in range(i1,51):if i<7 and j<7:continueelse:ans 1print(ans) 这道题可以看成是50个人都握了手减去7个人没握手的次数 答案：1204 二.将十进制整数拆解 2.1门牌制作 代码实现 ans0for i in ra…...
小程序分类页面
1创建cate分支 2.cate滑动界面布局 获取滑动界面高度 3.获取并渲染一级分类的列表数据 4.渲染二级和三级分类列表 获取二级列表的数据 5.渲染二级分类列表的UI结构 6.动态渲染三级分类列表...
HTML + CSS 题目
1.说说你对盒子模型的理解? 一、是什么 对一个文档进行布局的时候，浏览器渲染引擎会根据标准之一的css基础盒模型，将所有元素表示为一个个矩形的盒子。 一个盒子由四个部分组成: content，padding，border，margin 下…...
计算机视觉｜ViT详解：打破视觉与语言界限
一、ViT 的诞生背景 在计算机视觉领域的发展中，卷积神经网络（CNN）一直占据重要地位。自 2012 年 AlexNet 在 ImageNet 大赛中取得优异成绩后，CNN 在图像分类任务中显示出强大能力。随后，VGG、ResNet 等深度网络架构不…...
Node JS 调用模型Xenova_all-MiniLM-L6-v2实战
本篇通过将句子数组转换为句子的向量表示，并通过平均池化和归一化处理，生成适合机器学习或深度学习任务使用的特征向量为例，演示通过NodeJS 的方式调用Xenova/all-MiniLM-L6-v2 的过程。 关于 all-MiniLM-L6-v2 的介绍，可以参照上…...
React + TypeScript 实战指南：用类型守护你的组件
TypeScript 为 React 开发带来了强大的类型安全保障，这里解析常见的一些TS写法： 一、组件基础类型 1. 函数组件定义 // 显式声明 Props 类型并标注返回值 interface WelcomeProps {name: string;age?: number; // 可选属性 }const Welcome: React.FC…...
ASP.NET Core JWT认证与授权
1.JWT结构 JSON Web Token（JWT）是一种用于在网络应用之间安全传输声明的开放标准（RFC 7519）。它通常由三部分组成，以紧凑的字符串形式表示，在身份验证、信息交换等场景中广泛应用。 2.JWT权限认证 2.1添…...
【车规芯片】如何引导时钟树生长方向
12nm车规DFTAPR项目中，我们可以看到，绝大部分的sink都受控于xxxx_tessent_occ_clk_cpu_inst/tessent_persistent_cell_clock_out_mux/C10_ctmi_1这个mux，这是我们DFT设计结果： 这里我们重新打开place的数据 Anchor，也就…...
突破传统：用Polars解锁ICU医疗数据分析新范式
一、ICU数据革命的临界点 在重症监护室（ICU），每秒都在产生关乎生死的关键数据：从持续监测的生命体征到高频更新的实验室指标，从呼吸机参数到血管活性药物剂量，现代ICU每天产生的数据量级已突破TB级别。传统…...
《深度学习实战》第11集：AI大模型压缩与加速
深度学习实战 | 第11集：AI大模型压缩与加速 在深度学习领域，随着模型规模的不断增大，模型的推理速度和部署效率成为实际应用中的关键挑战。本篇博客将带你深入了解模型压缩与加速的核心技术，并通过一个实战项目展示如何使用知识蒸…...
golang进阶知识专项-理解值传递
在 Go 语言中，所有函数的参数传递都是值传递（Pass by Value）。当你将一个变量作为参数传递给函数时，实际上传递的是该变量的副本，而不是变量本身。理解这一点对于避免常见的编程错误至关重要。根据不同的类型ÿ…...
OCPP与ISO 15118集成：实现即插即充与车网互动（V2G）- 慧知开源充电桩平台
OCPP与ISO 15118集成：实现即插即充与车网互动（V2G） 引言 随着电动汽车（EV）与电网双向能量交互（V2G）技术的成熟，OCPP协议与ISO 15118标准的协同成为智能充电基础设施的核心挑战。本文…...
大语言模型中温度参数（Temperature）的核心原理
大语言模型中温度参数（Temperature）的核心原理是通过调整模型输出的概率分布，控制生成结果的随机性和多样性。以下是其原理的详细说明： 一、定义与核心作用 温度参数是生成式模型（如GPT系列）中的一个超参数…...
K8s控制器Deployment详解
回顾 ReplicaSet 控制器,该控制器是用来维护集群中运行的 Pod 数量的，但是往往在实际操作的时候，我们反而不会去直接使用 RS，而是会使用更上层的控制器，比如说 Deployment。 Deployment 一个非常重要的功能就是实现了 Pod 的滚动…...
鸿蒙HarmonyOS评论功能小demo
评论页面小demo 效果展示 1.拆解组件，分层搭建 我们将整个评论页面拆解为三个组件，分别是头部导航，评论项，回复三个部分，然后统一在index界面导入 2.头部导航界面搭建 Preview Component struct HmNavBar {// 属性&a…...
基于PyTorch的深度学习3——基于autograd的反向传播
反向传播，可以理解为函数关系的反向传播。...
日期格式与字符串不匹配bug
异常特征：java.lang.IllegalArgumentException: invalid comparison: java.time.LocalDateTime and java.lang.String ### Error updating database. Cause: java.lang.IllegalArgumentException: invalid comparison: java.time.LocalDateTime and java.lang.Str…...