Vue2+Vue3笔记（尚硅谷张天禹老师）day02

声明:只是记录，初心是为了让页面更好看,会有错误,我并不是一个会记录的人，所以有点杂乱无章的感觉，我先花点时间把视频迅速过掉，再来整理这些杂乱无章的内容

组件化编程

按照视频来的话，这里应该有一些概念的东西，但我不管这些东西，我这里只做一个浅显得记录

  1. 组件:实现局部功能效果的代码,复用编码，简化开发
  2. 模块:提供特定功能的js程序,这样可以提高复用性，简化开发
  3. 模块化: 都是以模块来编写的
  4. 组件化:都是以组件来编写的

Vue中使用组件的三大步骤

  1. 定义组件
    使用Vue.extend创建，注意点
  • el不要写，因为组件都受vm的管理，由vm中的el决定服务哪个容器
  • data必须写成函数，要不然组件复用的时候，组件a改了数据，那组件b存储的数据也发生了改变，但我们本意只想改变a，写成函数的话可以保证每次返回的都是一个新的值
  1. 注册组件
  • 局部注册：new Vue的时候传入compoents选项
  • 全局注册:靠Vue.component(‘组件名’,组件)
  1. 使用组件
    这个特别简单，如果组件名叫做demo,那么直接写上即可

非单文件组件

这个基本上不用，一般是作为过渡的，不得不说这个template没有提示是真的烦

<!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>
</head>

<body>
    <div id="root">
    	
        <student></student>
        <school></school>
        <common></common>
    </div>
    <!-- 
         Vue中使用组件的三大步骤：
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件(写组件标签)

        一、如何定义一个组件？
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
            区别如下：
                1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
            备注：使用template可以配置组件结构。

        二、如何注册组件？
            1.局部注册：靠new Vue的时候传入components选项
            2.全局注册：靠Vue.component('组件名',组件)

        三、编写组件标签：
            <school></school>
     -->
     <!--
		组件名:
			单个单词组成
				单词首字母大写或小写都可以
			多个单词组成
				以短横线来分割，例如my-school
				各个单词的首字母大写 例如MySchool 但是需要Vue脚手架
			避免HTML已有的元素名称
			使用name配置项指定组件在开发者工具中呈现的名字
		组件标签
			第一种写法:<school></school>
			第二种写法:<school/> 自闭合写法，这种写法有bug，同一个页面使用了多次组件，该组件生效的只有一个，如
			<school/>
			<school/>
			<school/>
			生效的只有一个，暂且认为是第一个
		简写方式
			const school = Vue.extend(options) 简写为 const school=options
			
	-->
    <script src="../../js/vue.js"></script>
    <script type="text/javascript">
        
       //①
        const student = Vue.extend({
        	name:'andong',//指定开发者工具中呈现的名字
            template:
                `
                <div>
                    <h3>姓名:{{name}}</h3>
                    <h3>年龄:{{age}}</h3>                
                <hr/>
                    </div>
            `,
            data() {
                return { name: '王矽疑', age: 19 }
            }
        })
        // 局部
        const school = Vue.extend({
            template: `
                <div>
                    <h3>学校:{{name}}</h3>
                <h3>地址:{{address}}</h3>
                <h3>校龄{{age}}</h3>
                <hr>
                    </div>
            `,
            data() {
                return { name: '安东大', address: '安天', age: 200 }
            }
        })
        //②
        const common  = Vue.extend({
            template:`
                <div>
                    <h3>我是全局组件 a的值是{{a}}</h3>
                    <button @click="change">a+1</button>
                    <hr>
                </div>
            
            `,
            data(){
                return {a:10}
            },
            methods: {
                change(){
                    this.a++;
                }
            },
        })
        //注册全局组件
        // 单引号里面的内容是组件名字，这个任意取，但要见名知义
        // 第二个参数是组件的位置(说成变量更好理解点) 名字要和②处定义的保持一致
        Vue.component('common',common) 
        new Vue({
            el: "#root",
            components: {
                // 完整的是student:student,但由于键与值一样，只写一个也可以
                //冒号之前的是组件名(若其没有name属性那么这个可以随便写，但是名字最好见名知意)
                //冒号之后的是变量名，和①处保持一致
                student,
                school
            }
        })
    </script>
</body>

</html>

VueComponent

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
        关于VueComponent：
            1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。  在vue.js的5837行有体现

            2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
                即Vue帮我们执行的：new VueComponent(options)。
            每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
            2.关于this指向：
                    (1).组件配置中：
                                data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
                    (2).new Vue(options)配置中：
                                data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

            5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
                Vue的实例对象，以后简称vm。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})


		// console.log('@',school)
		// console.log('#',hello)

		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>
</html>

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>
</html>

一个重要的关系

这个主要是理解这一个等式:VueComponentName.prototype.__proto__ === Vue.prototype，理解下面的这张图
在这里插入图片描述
实例的隐式原型属性永远指向缔造者的原型对象，终点是Object，Object的隐式原型属性的值是null
隐式原型属性:__proto__
console.dir(object) object是对象，该语句是查看obj对象有哪些属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>一个重要的内置关系</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			1.一个重要的内置关系：VueComponentName.prototype.__proto__ === Vue.prototype
			2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<school></school>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.prototype.x = 99

		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showX">点我输出x</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					//这个是vc(VueComponent)
					console.log(this.x)
				}
			},
		})

		//创建一个vm
		const vm = new Vue({
			el:'#root',
			data:{
				msg:'你好'
			},
			components:{school}
		})

		
		//定义一个构造函数
		/* function Demo(){
			this.a = 1
			this.b = 2
		}
		//创建一个Demo的实例对象
		const d = new Demo()

		console.log(Demo.prototype) //显示原型属性,程序员喜欢用这个

		console.log(d.__proto__) //隐式原型属性，程序喜欢用这个

		console.log(Demo.prototype === d.__proto__)

		//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
		Demo.prototype.x = 99

		console.log('@',d) */
		</script>

单文件组件

单文件的三个部分

  • template标签部分:组件的结构
  • script部分 组件交互相关的代码（数据、方法等等）
  • style部分:组件的样式(css样式)

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<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>

main.js

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

App.vue

<template>
	<div>
		//下面的一行可以直接换成 </School>  只要是在脚手架中即可
		<School></School>
		<Student></Student>
	</div>
</template>

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

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

School.vue

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	//暴露组件
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
			
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: 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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

多线程应用——阻塞队列

多线程应用——阻塞队列

阻塞队列 文章目录 阻塞队列1.队列的概念2.阻塞队列3.现实中的例子4.消息队列5.使用队列的优势1.解耦2.削峰填谷3.异步操作 6.实现 1.队列的概念 一种先进先出的数据结构 2.阻塞队列 队列写元素是从队尾插入&#xff0c;从对头取出 当插入元素时&#xff0c;先判断一下队列…
阅读更多...
com.squareup.okhttp3:okhttp 组件安全漏洞及健康度分析

com.squareup.okhttp3:okhttp 组件安全漏洞及健康度分析

组件简介 维护者square组织许可证类型Apache License 2.0首次发布2016 年 1 月 2 日最新发布时间2023 年 4 月 23 日GitHub Star44403GitHub Fork9197依赖包5,582依赖存储库77,217 com.squareup.okhttp3:okhttp 一个开源的 HTTP 客户端库&#xff0c;可以用于 Android 和 Jav…
阅读更多...
知识图谱项目实践

知识图谱项目实践

目录 步骤 SpaCy Textacy——Text Analysis for Cybersecurity Networkx Dateparser 导入库 写出页面的名称 ​编辑 自然语言处理 词性标注 可能标记的完整列表 依存句法分析&#xff08;Dependency Parsing&#xff0c;DEP&#xff09; 可能的标签完整列表 实例理…
阅读更多...
Unity 之 参数类型之值类型参数的用法

Unity 之 参数类型之值类型参数的用法

文章目录 基本数据类型结构体结构体的进一步补充 总结&#xff1a; 当谈论值类型参数时&#xff0c;我们可以从基本数据类型和结构体两个方面详细解释。值类型参数指的是以值的形式传递给函数或方法的数据&#xff0c;而不是引用。 基本数据类型 基本数据类型的值类型参数&…
阅读更多...
【Java 动态数据统计图】动态数据统计思路案例（动态，排序，动态数组（重点推荐））七（129）

【Java 动态数据统计图】动态数据统计思路案例（动态，排序，动态数组（重点推荐））七（129）

需求&#xff1a;前端根据后端的返回数据&#xff1a;画统计图&#xff1b; 说明&#xff1a; 1.X轴为地域&#xff0c;Y轴为地域出现的次数&#xff1b; 2. 动态展示&#xff08;有地域展示&#xff0c;没有不展示&#xff0c;且高低排序&#xff09; Demo案例&#xff1a; …
阅读更多...
硬件SPI口扩展

硬件SPI口扩展

在工控板设计中&#xff0c;经常会遇到扩展IO。具有相同的功能电路板接口相同&#xff0c;所以很容易采用排线方式连接到CPU主控板上&#xff0c;这种排线连接&#xff0c;我称之为总线。 现在的CPU引脚多&#xff0c;不扩展IO&#xff0c;使用模拟SPI&#xff0c;也可以实现&…
阅读更多...
获取Linux内核源码

获取Linux内核源码

在嵌入式平台上做Linux开发的时候&#xff0c;我们用的kernel都是芯片厂家移植到自家平台上的&#xff0c;但是最初的原生Linux内核的源码是从哪里来的呢&#xff1f;下面我们介绍一下怎么获取原生的Linux源码。 从Linux社区获取内核kernel源码 Linux社区的官方网站是 https:…
阅读更多...
.netcore grpc日志记录配置

.netcore grpc日志记录配置

一、日志记录配置概述 通过配置文件appsettings.json进行配置通过Program.cs进行配置通过环境变量进行配置客户端通过日志通道进行配置 二、实战案例 配置环境变量:Logging__LogLevel__GrpcDebug配置Appsettings.json配置Program.cs配置客户端工厂以上截图是目前为止已知的可…
阅读更多...
基于MQTT协议的物联网网关实现远程数据采集及监控

基于MQTT协议的物联网网关实现远程数据采集及监控

在数字化时代的浪潮中&#xff0c;工业界正面临着前所未有的变革与机遇。而在这场变革中&#xff0c;基于MQTT协议的物联网网关崭露头角&#xff0c;成为连接工业设备、实现远程数据采集与监控的利器。其中&#xff0c;HiWoo Box作为一款出色的工业边缘网关&#xff0c;引领着这…
阅读更多...
c语言每日一练(13)

c语言每日一练(13)

前言&#xff1a;每日一练系列&#xff0c;每一期都包含5道选择题&#xff0c;2道编程题&#xff0c;博主会尽可能详细地进行讲解&#xff0c;令初学者也能听的清晰。每日一练系列会持续更新&#xff0c;上学期间将看学业情况更新。 五道选择题&#xff1a; 1、程序运行的结果…
阅读更多...
9、监测数据采集物联网应用开发步骤(7)

9、监测数据采集物联网应用开发步骤(7)

源码将于最后一遍文章给出下载 监测数据采集物联网应用开发步骤(6) 串口(COM)通讯开发 本章节测试使用了 Configure Virtual Serial Port Driver虚拟串口工具和本人自写的串口调试工具&#xff0c;请自行baidu下载对应工具 在com.zxy.common.Com_Para.py中添加如下内容 #RS…
阅读更多...
RabbitMQ 的快速使用

RabbitMQ 的快速使用

docker部署rabbitmq # management才有管理页面 docker pull rabbitmq:management# 新建容器并运行 docker run \-e RABBITMQ_DEFAULT_USERadmin \ -e RABBITMQ_DEFAULT_PASSadmin \ -v mq-plugins:/plugins \--name mq \--hostname mq \-p 15672:15672 \-p 5672:5672 \-itd \ra…
阅读更多...
DNS指向别名还是IP

DNS指向别名还是IP

现在有一台服务器dbprod126&#xff0c;ip是172.22.100.4 现在有一个需求&#xff0c;需要在dns中对dbprod126建一个别名wondadb3r的记录&#xff0c;也就是ping wondadb3r的时候显示的是dbprod126的ip&#xff0c;目前有两​种方法&#xff0c;主要使用方法1指向别名&#xf…
阅读更多...
SQL-basics

SQL-basics

SQL 一些常用的查询语句用法 SQL 中的聚合函数 SQL 中的子查询 SQL 使用实例 SELECT F_NAME , L_NAME FROM EMPLOYEES WHERE ADDRESS LIKE ‘%Elgin,IL%’; SELECT F_NAME , L_NAME FROM EMPLOYEES WHERE B_DATE LIKE ‘197%’; SELECT * FROM EMPLOYEES WHERE (SALARY BET…
阅读更多...
优化爬虫请求：如何选择合适的爬虫ip轮换策略？

优化爬虫请求：如何选择合适的爬虫ip轮换策略？

在进行爬虫任务时&#xff0c;使用隧道爬虫ip并采用合适的轮换策略可以提高稳定性和效率。选择合适的隧道爬虫ip轮换策略可以优化您的爬虫请求过程。 1、考量目标网站特点 不同网站对于频繁请求可能有不同限制或反爬机制。 了解目标网站是否存在IP封禁、验证码等问题&#xff…
阅读更多...
WebGIS的一些学习笔记

WebGIS的一些学习笔记

一、简述计算机网络的Internet 概念、网络类型分类、基本特征和功用是什么 计算机网络的Internet 概念 计算机网络是地理上分散的多台独立自主的计算机遵循约定的通讯协议&#xff0c;通过软、硬件互连以实现交互通信、资源共享、信息交换、协同工作以及在线处理等功能的系统…
阅读更多...
AI聊天机器人平台Poe发布更新；自然语言理解课程概要

AI聊天机器人平台Poe发布更新；自然语言理解课程概要

&#x1f989; AI新闻 &#x1f680; AI聊天机器人平台Poe发布更新 突破功能限制 增加企业级服务 摘要&#xff1a;知名问答网站Quora旗下的AI聊天机器人平台Poe发布了一系列更新&#xff0c;包括推出Mac应用、支持同时进行多个对话、接入Meta的Llama 2模型等功能。用户只需支…
阅读更多...
【LeetCode】剑指 Offer ＜二刷＞（5）

【LeetCode】剑指 Offer ＜二刷＞（5）

目录 题目&#xff1a;剑指 Offer 10- II. 青蛙跳台阶问题 - 力扣&#xff08;LeetCode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 11. 旋转数组的最小数字 - 力…
阅读更多...
AD16 基础应用技巧(一些 “偏好“ 设置)

AD16 基础应用技巧(一些 “偏好“ 设置)

1. 修改铺铜后自动更新铺铜 AD16 铺铜 复制 自动变形 偏好设置 将【DXP】中的【参数选择】。 将【PCB Editor】中的【General】&#xff0c;然后勾选上【Repour Polygons After Modification】。 2. PCB直角走线处理与T型滴泪 一些没用的AD技巧——AD PCB直角走线处理与…
阅读更多...
【大数据】Apache Iceberg 概述和源代码的构建

【大数据】Apache Iceberg 概述和源代码的构建

Apache Iceberg 概述和源代码的构建 1.数据湖的解决方案 - Iceberg1.1 Iceberg 是什么1.2 Iceberg 的 Table Format 介绍1.3 Iceberg 的核心思想1.4 Iceberg 的元数据管理1.5 Iceberg 的重要特性1.5.1 丰富的计算引擎1.5.2 灵活的文件组织形式1.5.3 优化数据入湖流程1.5.4 增量…
阅读更多...
最新文章

Copyright @ 2022~2023