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)//创建vmconst 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}})//创建vmnew 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.prototype2.为什么要有这个关系：让组件实例对象（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)}},})//创建一个vmconst vm = new Vue({el:'#root',data:{msg:'你好'},components:{school}})//定义一个构造函数/* function Demo(){this.a = 1this.b = 2}//创建一个Demo的实例对象const d = new Demo()console.log(Demo.prototype) //显示原型属性,程序员喜欢用这个console.log(d.__proto__) //隐式原型属性，程序喜欢用这个console.log(Demo.prototype === d.__proto__)//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99Demo.prototype.x = 99console.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>

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

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

相关文章

Java设计模式之适配器模式

Java设计模式之适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式&#xff0c;它结合了两个独立接口的功能。 这种模式涉及到一个单一的类&#xff0c;该类负责加入独立的或不兼容的接口功能。举个真实的例子&#xff0…
阅读更多...
数据结构零基础入门篇（C语言实现）

数据结构零基础入门篇（C语言实现）

前言&#xff1a;数据结构属于C学习中较难的一部分&#xff0c;对应学习者的要求较高&#xff0c;如基础不扎实&#xff0c;建议着重学习C语言中的指针和结构体&#xff0c;万丈高楼平地起。 一&#xff0c;链表 1&#xff09;单链表的大致结构实现 用C语言实现链表一般是使…
阅读更多...
PCL点云处理之快速计算多个点到同一直线的距离（二百零五）

PCL点云处理之快速计算多个点到同一直线的距离（二百零五）

PCL点云处理之快速计算多个点到同一直线的距离（二百零五） 一、算法简介二、具体实现1.代码2.结果一、算法简介 点到直线的距离计算，是一种常用的算法，在点云处理中，经常遇到需要计算多个点云到同一条直线的距离计算需求，此时若是逐点计算将耗费大量的时间，熟悉点到直线…
阅读更多...
入选VLDB 2023! OceanBase 4.0单机分布式一体化研究成果获国际顶会认可

入选VLDB 2023! OceanBase 4.0单机分布式一体化研究成果获国际顶会认可

近日&#xff0c;国际顶级数据库学术会议 VLDB 2023 在加拿大温哥华开幕。OceanBase 研究成果论文 “OceanBase Paetica: A Hybrid Shared-nothing/Shared-everything Database for Supporting Single Machine and Distributed Cluster” 被 VLDB 2023 收录&#xff01;相继 20…
阅读更多...
【ES6】Promise常用的方法

【ES6】Promise常用的方法

JavaScript中的Promise对象常用于处理异步操作&#xff0c;它具有以下常用的方法&#xff1a; 1、Promise.resolve(value)&#xff1a;返回一个已解析的Promise对象。如果value是一个thenable对象&#xff08;即具有then方法的对象&#xff09;&#xff0c;返回的Promise将&qu…
阅读更多...
ACL 访问控制 过滤数据 维护网络安全（第七课)

ACL 访问控制 过滤数据 维护网络安全（第七课)

一 ACL 简介 ACL是Access Control List（访问控制列表）的缩写，是一种用于控制文件、目录、网络设备等资源访问权限的方法。ACL可以对每个用户或用户组设置不同的访问权，即在访问控制清单中为每个用户或用户组指定允许或禁止访问该资源的权限。它通常由一系列规则组成，规则…
阅读更多...
Qt 定时器放在线程中执行，支持随时开始和停止定时器。

Qt 定时器放在线程中执行，支持随时开始和停止定时器。

前言&#xff1a;因为项目需要定时检查网络中设备是否能连通&#xff0c;需要定时去做ping操作&#xff0c;若是网络不通&#xff0c;则ping花费时间比较久&#xff08;局域网大概4秒钟才能结束&#xff0c;当然如果设置超时时间啥的&#xff0c;也能很快返回&#xff0c;就是会…
阅读更多...
vue3 判断包含某个字符

vue3 判断包含某个字符

<img v-if"node.level 1 && checkIfIncludeSubStr(node.label, 人口)"src"/assets/images/icon-convention-01.png" width"16"class"inlineBlock Vmiddle" style"margin-right: 8px;"/>const data reactive…
阅读更多...
【前端】webpack打包去除console.log

【前端】webpack打包去除console.log

0 问题 需要在打包的时候&#xff0c;自动地去除掉所有console.log 1 方法 // vue.config.js //... module.exports {//...config.optimization.minimizer[0].iptions.terserOptions.compress.drop_console true//... } //...也可以用if(process.env.NODE_ENV production…
阅读更多...
算法通关村十三关-青铜：数字与数学基础问题

算法通关村十三关-青铜：数字与数学基础问题

1.数字统计专题 统计特定场景下的符号或数字个数等 1.1符号统计 LeetCode1822 数组元素积的符号 https://leetcode.cn/problems/sign-of-the-product-of-an-array/description/ 思路分析 如果将所有的数都乘起来&#xff0c;再判断正负&#xff0c;工作量大&#xff0c;还…
阅读更多...
kubernetes常见面试问题详解

kubernetes常见面试问题详解

在面试的时候&#xff0c;面试官常常会问一些问题&#xff1a; k8s是什么&#xff1f;有什么用?k8s由哪些组件组成&#xff1f;pod的启动流程&#xff1f;k8s里有哪些控制器&#xff1f;k8s的调度器里有哪些调度算法&#xff1f;pod和pod之间的通信过程&#xff1f;外面用户访…
阅读更多...
PING命令详解

PING命令详解

ping 命令是一个常用的网络诊断工具&#xff0c;它用于测试计算机之间是否能够互相通信&#xff0c;并测量数据包从一个计算机发送到另一个计算机所需的时间。以下是 ping 命令的基本用法和一些常见选项&#xff1a; 基本语法: ping [选项] 目标主机或IP地址 常见选项: -c co…
阅读更多...
react组件状态

react组件状态

一个前提&#xff1a;在react hook出来之前&#xff0c;函数式组件是没有自己的状态的&#xff0c;所以我们统一通过类组件来讲解 1. 初始化状态 • 通过class的实例属性state来初始化 • state的值是一个对象结构&#xff0c;表示一个组件可以有多个数据状态 React.Compone…
阅读更多...
微服务-gateway鉴权

微服务-gateway鉴权

文章目录 一、前言二、gateway鉴权1、依赖配置2、编写代码3、GlobalFilter详解3.1、GlobalFilter简介3.2、GlobalFilter自定义执行顺序3.2.1、实现Order接口实现自定义执行顺序 一、前言 网关是介于客户端和服务器端之间的中间层&#xff0c;所有的外部请求都会先经过 网关这一…
阅读更多...
鲁棒优化入门(6)—Matlab+Yalmip两阶段鲁棒优化通用编程指南(上)

鲁棒优化入门(6)—Matlab+Yalmip两阶段鲁棒优化通用编程指南(上)

0.引言 上一篇博客介绍了使用Yalmip工具箱求解单阶段鲁棒优化的方法。这篇文章将和大家一起继续研究如何使用Yalmip工具箱求解两阶段鲁棒优化(默认看到这篇博客时已经有一定的基础了&#xff0c;如果没有可以看看我专栏里的其他文章)。关于两阶段鲁棒优化与列与约束生成算法的原…
阅读更多...
MySQL访问和配置

MySQL访问和配置

目录 1.使用MySQL自带的客户端工具访问 2.使用DOS访问(命令行窗口WinR → cmd) 3.连接工具&#xff08;SQLyog或其它&#xff09; MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 1.使用MySQL自…
阅读更多...
DVWA失效的访问控制

DVWA失效的访问控制

失效的访问控制&#xff0c;可以认为是系统对一些功能进行了访问或权限限制&#xff0c;但因为种种原因&#xff0c;限制并没有生效&#xff0c;造成失效的访问控制漏洞,比如越权等 这里以DVWA为例&#xff0c;先访问低难度的命令执行并抓包 删除cookie&#xff0c;并在请求头…
阅读更多...
Python之作业（一）

Python之作业（一）

Python之作业&#xff08;一&#xff09; 作业 打印九九乘法表 用户登录验证 用户依次输入用户名和密码&#xff0c;然后提交验证用户不存在、密码错误&#xff0c;都显示用户名或密码错误提示错误3次&#xff0c;则退出程序验证成功则显示登录信息 九九乘法表 代码分析 先…
阅读更多...
Git常见问题：git pull 和 git pull --rebase二者区别

Git常见问题：git pull 和 git pull --rebase二者区别

git pull 和 git pull --rebase 都是从远程仓库获取最新的更改并将其合并到本地分支。但它们之间的区别在于合并方式。以下是它们之间的主要区别&#xff1a; git pull&#xff1a; 当你执行 git pull 时&#xff0c;Git 会执行以下两个操作&#xff1a; git fetch&#xff…
阅读更多...
＜图像处理＞ 可分离滤波器核

＜图像处理＞ 可分离滤波器核

可分离滤波器核 空间滤波器核是一个二维矩阵&#xff0c;若它能够表示为两个一维矩阵的乘积时&#xff0c;则表示该滤波器核是可分离的。 例如&#xff0c;一个3x3的核&#xff0c; w [ 1 1 1 1 1 1 1 1 1 ] w\begin{bmatrix} 1 & 1 & 1\\ 1 & 1& 1\\ 1 &am…
阅读更多...
最新文章

Copyright @ 2022~2023