十四天学会Vue——Vue 组件化编程（理论+实战）（第四天）

二、 Vue组件化编程

2.1 组件化模式与传统方式编写应用做对比：

传统方式编写应用

依赖关系混乱，不好维护：例如：比如需要引入js1，js2，js3，但是js3需要用到js1、2的方法，所以js1、2要先引入，而js2的使用需要用到js1中的方法，也就是js1需要在js2前面引用，三个我们还能分清先后顺序，可是多了就会混乱。
2.代码复用率不高
两个html，相同的底部和顶部结构，先创建html1，在创建html2时，是复制了html1的，不属于代码复用；此时，如果将相同结构包装在同一段html结构中，用innerHTML来实现代码复用，这一块我也不太明白，死记硬背吧，就是封装相同的也不好用！
请添加图片描述

使用组件化方式优势：

在这里插入图片描述
在这里插入图片描述
模块 庞大js 模块指js模块
模块化 a.js b,js 庞大js给拆了 按照模块化的标准拆开
组件 ：不同的功能点不同的组件

2.2 非单文件组件

小tips 使用函数式和对象式改变数据的方法 :
作用：通过分析函数式和对象式的区别，才能知道组件中创建组件时里面的data数据使用函数式的原因了。同一个data数据，但是调用时有不同的实例 互相不会干扰

 // 使用对象式和函数式的区别
        // let data = {
        //     a: 1,
        //     b: 2
        // }
        function data () {
            return {
                a: 1,
                b: 2
            }
        }
        // 使用对象式一变都变 根据栈堆存放
        // const x1 = data
        // const x2 = data
        // 当你使用函数来返回对象时，每次调用该函数都会创建一个新的对象实例。即使这些对象具有相同的结构和初始值，
        //它们也是不同的对象，存储在内存的不同位置。因此，修改一个对象不会影响其他通过该函数创建的对象。
        const x1 = data()
        const x2 = data()


> > 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>

下面这段代码主要是讲述组件标签三步骤，以及创建局部组件和全局组件。主要式在注册那一块的差别！

 <!--准备好一个容器 -->
    <div id="root">
        <h1>{{msg}}</h1>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <!-- 实现复用 并且因为data函数实现改变数据互不干扰
         -->
        <school></school>
        <student></student>
    </div>
    <!-- 第二个容器使用第一个容器的组件 -->
    <div id="root2">
        <school></school>
        组件标签
        <hello></hello>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        // 第一步：创建school组件
        const school = Vue.extend({
            // el: '#root',//组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
            template: `<div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click='showName'>点我提示学校名</button>
                </div>
            `,
            data () {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平',
                }
            }, methods: {
                showName () {
                    alert(this.schoolName)
                }
            },
        })
        //第一步：创建student组件
        const student = Vue.extend({
            template: `
            <div><h2>学生姓名：{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2></div>`,
            data () {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        })
        //第一步：创建hello组件
        const hello = Vue.extend({
            template: `
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
            data () {
                return {
                    name: 'Tom'
                }
            }
        })
        //第二步：全局注册组件  组件的名字 组件的位置
        Vue.component('hello', hello)
        //第二步：注册组件（局部注册）
        new Vue({
            el: '#root',
            data: {
                msg: '你好啊'
            },
            components: {
                school,
                student
            }
        })
        new Vue({
            el: '#root2',
            components: {
                school
            }
        })

        // // 使用对象式和函数式的区别
        // // let data = {
        // //     a: 1,
        // //     b: 2
        // // }
        // function data () {
        //     return {
        //         a: 1,
        //         b: 2
        //     }
        // }
        // // 使用对象式一变都变  根据栈堆存放
        // // const x1 = data
        // // const x2 = data
        // // 当你使用函数来返回对象时，每次调用该函数都会创建一个新的对象实例。即使这些对象具有相同的结构和初始值，
        //它们也是不同的对象，存储在内存的不同位置。因此，修改一个对象不会影响其他通过该函数创建的对象。
        // const x1 = data()
        // const x2 = data()
    </script>

几个注意点

 <!--准备好一个容器 -->
    <div id="root">
        <h2>{{msg}}</h2>
        <!-- 双标签 -->
        <!-- <school></school> -->
        <!-- <School></School>  -->
        <!-- <my-school></my-school> -->
        <!-- <MySchool></MySchool> -->
        <!-- 单标签 自闭合 但是写多个只展示一个 所以建议在脚手架中适合用-->
        <school />
        <school />
        <school />
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //定义组件
        const s = Vue.extend({
            // 也可以组件注册为一个名字 Vue开发工具展示的一个名字  也就是给Vue开发工具那一块特意起了一个名字
            name: 'atguigu',
            template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
            data () {
                return {
                    name: '尚硅谷',
                    address: '北京'
                }
            }
        })
        // // 使用extend定义组件简写
        // const s = {
        //     // 也可以组件注册为一个名字 Vue开发工具展示的一个名字  也就是给Vue开发工具那一块特意起了一个名字
        //     name: 'atguigu',
        //     template: `
        // 		<div>
        // 			<h2>学校名称：{{name}}</h2>	
        // 			<h2>学校地址：{{address}}</h2>	
        // 		</div>
        // 	`,
        //     data () {
        //         return {
        //             name: '尚硅谷',
        //             address: '北京'
        //         }
        //     }
        // }
        new Vue({
            el: '#root',
            data: {
                msg: '欢迎学习Vue!'
            },
            components: {
                // 第一种写法(首字母小写)：school  但是Vue开发工具会默认转化为首字母大写
                school: s
                // 组件名字跟组件标签要相同
                // School: s
                // 'my-school': s
                // 在脚手架中才可以接收大驼峰命名
                // MySchool: s
            }
        })
    </script>

总结：

几个注意点：
					1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
								备注：
										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

					2.关于组件标签:
								第一种写法：<school></school>
								第二种写法：<school/>
								备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

					3.一个简写方式：
								const school = Vue.extend(options) 可简写为：const school = options

一人之下 万人之上组件app

补充知识：在模板容器中没有写代码的原理 根据生命周期原理图，给换成内部模板了
在这里插入图片描述

 <!--准备好一个容器 -->
    <div id="root">

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        // 定义school的子组件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组件  相当于所有组建的管理者 也就是vm委派给app  让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>

VueComponent

总结来说：就是VueComponent就是类比于Vue，所以有实例对象vc 在组件中this指向VueComponent实例对象，也就是组件
下面案例中涉及到组件嵌套

总结

关于VueComponent：
						1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

						2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
							即Vue帮我们执行的：new VueComponent(options)。

						3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

						4.关于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>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //定义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 () {
                    // 组件中的this指向VueComponent,并且里面有Vue中的很多相似数据,进行了数据代理
                    console.log('showName', this)
                }
            }
        })
        const test = Vue.extend({
            template: `<span>哈哈哈</span>`
        })
        // 定义hello组件
        const hello = Vue.extend({
            template: `
            <div>
            <h2>{{msg}}</h2>
            <test></test>
                </div>
            `,
            data () {
                return {
                    msg: '你好啊'
                }
            }, components: { test }
        })
        // 对应的VueComponent不是同一个
        // school.a = 100
        // console.log('@', school.a)
        // console.log('#', hello.a)

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

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

补充知识：上文提到望函数中添加属性，直接函数点属性名即可，因为函数在某种意义上也是对象。

 <SCRIPT>
        function aa () {
            console.log('哈哈哈')
        }
        aa.b = 100
        // 函数本身也是一个对象
        console.log(aa.b);
    </SCRIPT>

一个重要的内置关系

1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
				2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

<div id="root">
        <!-- 相当于new Component() -->
        <school></school>
    </div>
    <script>
        Vue.prototype.x = 99
        //定义school组件
        const school = Vue.extend({
            template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
                    <button @click='showX'>点我发现我能get到Vue原型对象中的x</button>
				</div>`,
            data () {
                return {
                    name: '尚硅谷',
                    address: '北京'
                }
            }, methods: {
                showX () {
                    console.log(this.x)
                }
            }
        })
        //创建一个vm
        const vm = new Vue({
            el: '#root',
            data: {
                msg: '你好'
            }, components: {
                school
            }
        })
        // 不要写VueComponent  死记硬背:我们通过调用extend函数返回值VueComponent并且赋值给school  
        //这里按理说应该是true  但是不知道怎么回事是false
        console.log(school.prototype._proto_ === Vue.prototype)

        /*  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._proto_.x)
         // 缩写
         console.log, ('@', d.x)
         // 表示关于demo函数的实例对象
         console.log(d); */
    </script>

组件实例对象小型vm 他的data必须写成函数式，也不能配置el

2.3 单文件组件

首先是xxx.vue，不能直接展示在浏览器，需要编译成js文件
方法1：使用webpack
方法2：使用脚手架
命名类似于组件名称 推荐首字母大写或者大驼峰命名
安装插件 识别vue文件
在这里插入图片描述

vue文件的编写依据组件的定义：实现应用中局部功能的代码和资源的集合，包括html结构、css样式、js交互

书写顺序
在这里插入图片描述
在②中通过如下将组件引入：在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
现成代码见资源

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

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

相关文章

算能BM1684+FPGA+AI+Camera推理边缘计算盒

算能BM1684+FPGA+AI+Camera推理边缘计算盒

搭载算丰智算芯片BM1684&#xff0c;是面向AI推理的边缘计算盒。高效适配市场上所有AI算法&#xff0c;实现视频结构化、人脸识别、行为分析、状态监测等应用&#xff0c;为智慧城市、智慧交通、智慧能源、智慧金融、智慧电信、智慧工业等领域进行AI赋能。 产品规格 处理器芯片…
阅读更多...
企业微信接入系列-上传临时素材

企业微信接入系列-上传临时素材

企业微信接入系列-上传临时素材 文档介绍上传临时素材写在最后 文档介绍 创建企业群发的文档地址&#xff1a;https://developer.work.weixin.qq.com/document/path/92135&#xff0c;在创建企业群发消息或者群发群消息接口中涉及到上传临时素材的操作&#xff0c;具体文档地址…
阅读更多...
数据结构与算法02-排序算法

数据结构与算法02-排序算法

介绍 排序算法是计算机科学中被广泛研究的一个课题。历时多年&#xff0c;它发展出了数十种算法&#xff0c;这些 算法都着眼于一个问题&#xff1a;如何将一个无序的数字数组整理成升序&#xff1f;先来学习一些“简单排序”&#xff0c;它们很好懂&#xff0c;但效率不如其他…
阅读更多...
最佳实践：REST API 的 HTTP 请求参数

最佳实践：REST API 的 HTTP 请求参数

HTTP 请求中的请求参数解释 当客户端发起 HTTP 请求 时&#xff0c;它们可以在 URL 末尾添加请求参数&#xff08;也叫查询参数或 URL 参数&#xff09;来传递数据。这些参数以键值对的形式出现在 URL 中&#xff0c;方便浏览和操作。 请求参数示例 以下是一些带有请求参数的…
阅读更多...
springboot基本使用十二（PageHelper分页查询）

springboot基本使用十二（PageHelper分页查询）

引入依赖&#xff1a; <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.3.0</version> </dependency> 通个PageHelper.startPage(page,pageSize)方…
阅读更多...
SpringBoot的第二大核心AOP系统梳理

SpringBoot的第二大核心AOP系统梳理

目录 1 事务管理 1.1 事务 1.2 Transactional注解 1.2.1 rollbackFor 1.2.2 propagation 2 AOP 基础 2.1 AOP入门 2.2 AOP核心概念 3. AOP进阶 3.1 通知类型 3.2 通知顺序 3.3 切入点表达式 execution切入点表达式 annotion注解 3.4 连接点 1 事务管理 1.1 事务…
阅读更多...
20.Redis之缓存

20.Redis之缓存

1.什么是缓存&#xff1f; Redis 最主要的用途,三个方面:1.存储数据(内存数据库)2.缓存 【redis 最常用的场景】3.消息队列【很少见】 缓存 (cache) 是计算机中的⼀个经典的概念. 在很多场景中都会涉及到. 核⼼思路就是把⼀些常⽤的数据放到触⼿可及(访问速度更快)的地⽅, ⽅…
阅读更多...
一维时间序列信号的改进小波降噪方法（MATLAB R2021B）

一维时间序列信号的改进小波降噪方法（MATLAB R2021B）

目前国内外对于小波分析在降噪方面的方法研究中&#xff0c;主要有小波分解与重构法降噪、小波阈值降噪、小波变换模极大值法降噪等三类方法。 (1)小波分解与重构法降噪 早在1988 年&#xff0c;Mallat提出了多分辨率分析的概念&#xff0c;利用小波分析的多分辨率特性进行分…
阅读更多...
Facebook开户|Facebook做落地页的标准和建议

Facebook开户|Facebook做落地页的标准和建议

哈喽呀家人们下午好~今天Zoey来跟大家带来Facebook做落地页的标准和建议&#xff01;需要的家人建议点赞收藏啦&#xff01;&#xff01;用户通过点击你的推广链接、搜索引擎搜索结果页面的快照链接、社交媒体中的网页链接、电子邮件中的链接等进入你网站的特定页面&#xff0c…
阅读更多...
Microsoft的Copilot现已登陆Telegram

Microsoft的Copilot现已登陆Telegram

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
AdroitFisherman模块测试日志(2024/5/28)

AdroitFisherman模块测试日志(2024/5/28)

测试内容 测试AdroitFisherman分发包中Base64Util模块。 测试用具 Django5.0.3框架&#xff0c;AdroitFisherman0.0.29 项目结构 路由设置 总路由 from django.contrib import admin from django.urls import path,include from Base64Util import urls urlpatterns [path…
阅读更多...
OrangePi AIpro--新手上路

OrangePi AIpro--新手上路

目录 一、SSH登录二、安装VNC Sevice&#xff08;经测试Xrdp远程桌面安装不上&#xff09;2.1安装xface桌面2.2 配置vnc服务2.2.1 设置vnc server6-8位的密码2.2.2 创建vnc文件夹&#xff0c;写入xstartup文件2.2.3 给xstartup文件提高权限2.2.4 在安装产生的vnc文件夹创建xsta…
阅读更多...
北京仁爱堂李艳波主任如何预约挂号？

北京仁爱堂李艳波主任如何预约挂号？

北京仁爱堂擅长治疗神经系统疾病&#xff0c;例如&#xff1a;痉挛性斜颈&#xff0c;特发性震颤&#xff0c;眼球震颤&#xff0c;帕金森&#xff0c;眼球震颤等。 北京仁爱堂国医馆是一所集治疗、 预防、保健、养生于一体的传统中医诊所&#xff0c;具有精湛技术和丰富经验的…
阅读更多...
ad18学习笔记20：焊盘设置Solder Mask Expansion（阻焊层延伸）

ad18学习笔记20：焊盘设置Solder Mask Expansion（阻焊层延伸）

【AD18新手入门】从零开始制造自己的PCB_ad18教程-CSDN博客 Altium Designer绘制焊盘孔&#xff08;Pad孔&#xff09;封装库的技巧&#xff0c;包括原理图封装和PCB封装_哔哩哔哩_bilibili 默认的焊盘中间是有个过孔的&#xff0c;单层焊盘&#xff08;表贴烛盘&#xff09;…
阅读更多...
怎么使用Python代码在图片里面加文字

怎么使用Python代码在图片里面加文字

在Python中&#xff0c;给图片添加文字可以使用Pillow库&#xff08;PIL的一个分支&#xff09;&#xff0c;它是一个强大的图像处理库。如果你还没有安装Pillow&#xff0c;可以通过pip安装&#xff1a; pip install Pillow下面使用一个简单的示例&#xff0c;演示如何使用Pi…
阅读更多...
算法（十四）动态规划

算法（十四）动态规划

算法概念 动态规划&#xff08;Dynamic Programming&#xff09;是一种分阶段求解的算法思想&#xff0c;通过拆分问题&#xff0c;定义问题状态和状态之间的关系&#xff0c;使得问题能够以递推&#xff08;分治&#xff09;的方式去解决。动态规划中有三个重点概念&#xff…
阅读更多...
工厂数字化!数据治理是基础

工厂数字化!数据治理是基础

数据治理是基础 在当今的工业生产中&#xff0c;数字化转型已成为企业提升竞争力的必由之路。然而&#xff0c;数字化转型并非一蹴而就&#xff0c;它需要战略驱动、数据治理和数据智能的协同发展。本文将围绕如何进行数字化、数据治理的内涵以及数据治理作为数字化转型基础的原…
阅读更多...
AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试5月31日预测第7弹

AI预测体彩排3采取888=3策略+和值012路一缩定乾坤测试5月31日预测第7弹

今天继续基于8883的大底进行测试&#xff0c;今天继续测试&#xff0c;好了&#xff0c;直接上结果吧~ 首先&#xff0c;888定位如下&#xff1a; 百位&#xff1a;8,6,7,5,9,3,1,0 十位&#xff1a;5,7,6,4,2,9,1,0 个位&#xff1a;9,8,7,6,…
阅读更多...
设计模式在芯片验证中的应用——迭代器

设计模式在芯片验证中的应用——迭代器

一、迭代器设计模式 迭代器设计模式(iterator)是一种行为设计模式&#xff0c; 让你能在不暴露集合底层表现形式 &#xff08;列表、 栈和树等数据结构&#xff09; 的情况下遍历集合中所有的元素。 在验证环境中的checker会收集各个monitor上送过来的transactions&#xff0…
阅读更多...
java家政上门系统源码，App端采用uniapp开发编写，可打包H5 、微信小程序、微信公众号、Android、IOS等。

java家政上门系统源码，App端采用uniapp开发编写，可打包H5 、微信小程序、微信公众号、Android、IOS等。

家政上门系统是一种通过互联网或移动应用平台&#xff0c;为用户提供在线预约、下单、支付和评价家政服务的系统。该系统整合了家政服务资源&#xff0c;使用户能够便捷地找到合适的服务人员&#xff0c;同时也为家政服务人员提供了更多的工作机会。 本套家政上门系统源码&…
阅读更多...
最新文章

Copyright @ 2022~2023