跟着尚硅谷学vue2—进阶版1.0—组件化编程

2. Vue 组件化编程

1. 传统方式和使用组件方式编写的对比

1. 传统方式编写应用

27

2. 使用组件方式编写应用

28

29

30

2. 模块与组件、模块化与组件化

1. 模块
  1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
  2. 为什么: js 文件很多很复杂
  3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
2. 组件
  1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
  2. 为什么: 一个界面的功能很复杂
  3. 作用: 复用编码, 简化项目编码, 提高运行效率
3. 模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。 (把js按照模块化的标准拆分成好几个js)

4. 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。(应用按照功能点进行拆分，不同的功能点是一个不同的组件)

5. 例子

33

3. 组件的两种编写形式

1. 组件基础

  1. 非单文件组件

    31

  2. 单文件组件

    32

2. 非单文件组件
  1. 模板编写没有提示
  2. 没有构建过程, 无法将 ES6 转换成 ES5
  3. 不支持组件的 CSS
  4. 真正开发中几乎不用
1. 基本使用

Vue中使用组件的三大步骤：

​ 一、定义组件(创建组件)

​ 二、注册组件

​ 三、使用组件(写组件标签)

  1. 如何定义一个组件？

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

  2. 如何注册组件？

    1. 局部注册：靠new Vue的时候传入components选项
    2. 全局注册：靠Vue.component(‘组件名’,组件)

  3. 编写组件标签：

    <school></school>

<body><!-- 准备好一个容器--><div id="root"><hello></hello><hr><h1>{{msg}}</h1><hr><!-- 第三步：编写组件标签 --><school></school><hr><!-- 第三步：编写组件标签 --><student></student></div><div id="root2"><hello></hello></div>
</body><script type="text/javascript">Vue.config.productionTip = false//第一步：创建school组件const school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。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)//创建vmnew Vue({el: '#root',data: {msg: '你好啊！'},//第二步：注册组件（局部注册）components: {school,student}})new Vue({el: '#root2',})
</script>
2. 几个注意点

  1. 关于组件名:

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

  2. 关于组件标签:

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

  3. 一个简写方式：

    const school = Vue.extend(options) 可简写为：const school = options
<body><div id="root"><h1>{{msg}}</h1><school></school></div>
</body><script type="text/javascript">Vue.config.productionTip = false//定义组件const s = Vue.extend({name: 'atguigu',template: `<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	</div>`,data() {return {name: '尚硅谷',address: '北京'}}})// 简写为：// const s = { // 如果我们编写没带extend，那么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: s}})
</script>

​

3. 组件的嵌套
<!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>

26

4. VueComponent

关于VueComponent：

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

  2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，

    即Vue帮我们执行的：new VueComponent(options)。

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

  4. 关于this指向：

    1. 组件配置中：
      1. data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    2. new Vue(options)配置中：
      1. data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

    1. Vue的实例对象，以后简称vm。
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>VueComponent</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><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>
5. Vue实例与组件实例

Vue实例（vm）与组件实例（vc）的区别：

其实 vm 和 vc 本质都是一个组件而已，大家的属性基本是一样的

但是 vm 会比 vc 多出el和router属性，vm可以通过el 指定容器到底为谁所用，但是vc不能写 el 指定容器为谁服务，他只能跟着 vm 走，而且 vc 的data会被要求 必须是函数 ，防止出现 同种组件多实例共享同一个data的事情

Vue实例与组件实例_子非鱼焉非我所愿的博客-CSDN博客_vue组件和vue实例关系描述

vue实例的高逼格写法：

import App from 'app';new Vue({
render: h =>h(App)
}).$mount('#app')

我们经常写出一些整个应用就只有一个组件。

所以为了方便，

原来的 template、components ------变成------> render: h=>h(App)

原来的 el ------变成------> .$mount(‘#app’)

ps: mount是挂载的意思

值得注意的是里面的methods

我们千万不要把里面的方法写成箭头函数的形式

因为我们避免不了在这些方法里面写this，若写成箭头函数，this的指向就会变成 未被编译成vue对象的这个配置obj

6. 一个重要的内置关系
1. 补充知识点：显式原型属性和隐式原型

  • 什么是原型

    • 每一个构造函数（可以理解为类）都拥有一个属性(prototype)，该属性指向一个对象，用于存放公共的属性和方法。 构造函数的定义方式：

      var Fun=new Function()
Function Fun(){} 
//Fun就是创建出来的构造函数

  • 为什么要用原型

    • 虽然常说js中一切皆对象，但js本身不是一项面向对象编程的语言，没有类（class）的说法， 所以说为了让构造函数（Function fun())构造出来的对象拥有公共的属性和方法， 故js使用原型（prototyoe）来存储这些公共的属性和方法`在这里插入代码片

  • 如何使用原型

    • 定义

      Fun.prototype.num = 520;  //添加公共属性
Fun.prototype.getPrice = function() {return `price:${this.num}`
}

    • 使用

      var fun=new Fun()
fun.num;
fun.getPrice()

  • 显示原型和隐式原型？

    • 显示原型：Fun是构造函数(可以理解为类)，Function上的prototype的属性
    • 隐式原型：fun是由构造函数new出来的对象，fun中的__proto__是fun的属性
    • 关联：fun的隐式原型指向Fun构造函数的显示原型

  • 基于原型的执行方法

    • 当我们尝试获取实例（new出来的对象）的属性和方式时，首先会在本身的属性和方法中进行查找，找不到的话就通过隐式原型找到显示原型（也就是找到创造这个对象的类），去这里原型上的属性和方法，找不到就会顺着原型链一直向上，如果再找不到的话Object.__proto__就会抛出underfind，原因是就是因为Object.__proto__永远指向null。

  • 每个class都有显示原型prototype

  • 每个实例都会有隐式原型__proto__

  • 实例的隐式原型(__proto__)对应class的显示原型(prototype)

  • hasOwnProperty 寻找自身属性值是否包含该属性

  • instanceof 寻找自身原型链中是否包含该属性 （ instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。 ）

  • 所有的引用类型instanceof Object返回的都是true

    [] instanceof Array //true 
[] instanceof Object //true
{} instance Object //true

25

2. 分析Vue与VueComponent的关系

  1. 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

    24

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

23

<!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"><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(){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>
</html>
3.单文件组件
1. 一个 .vue 文件的组成(3 个部分)

  1. 模板页面

    <template><!-- 页面模板 -->
</template>

  2. JS 模块对象

    <script>
export default {data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>

  3. 样式

    <style>// 样式定义
</style>
2. 基本使用
  1. 引入组件
  2. 映射成标签
  3. 使用组件标签
3. 例子

  1. 入口文件

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

  2. App组件

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

  3. 绑定vm文件

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

  4. School组件

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

  5. Student组件

    <template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>
</template><script>export default {name:'Student',data(){return {name:'张三',age:18}}}
</script>

  6. 注意，上面的所有文件只有放在脚手架里才能使用，不能直接使用

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

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

相关文章

WebRTC视频 01 - 视频采集整体架构

WebRTC视频 01 - 视频采集整体架构

一、前言&#xff1a; 我们从1对1通信说起&#xff0c;假如有一天&#xff0c;你和你情敌使用X信进行1v1通信&#xff0c;想象一下画面是不是一个大画面中有一个小画面&#xff1f;这在布局中就叫做PIP&#xff08;picture in picture&#xff09;&#xff1b;这个随手一点&am…
阅读更多...
【大数据学习 | HBASE高级】rowkey的设计，hbase的预分区和压缩

【大数据学习 | HBASE高级】rowkey的设计，hbase的预分区和压缩

1. rowkey的设计 ​ RowKey可以是任意字符串&#xff0c;最大长度64KB&#xff0c;实际应用中一般为10~100bytes&#xff0c;字典顺序排序&#xff0c;rowkey的设计至关重要&#xff0c;会影响region分布&#xff0c;如果rowkey设计不合理还会出现region写热点等一系列问题。 …
阅读更多...
Spring Boot编程训练系统：架构设计与实现技巧

Spring Boot编程训练系统：架构设计与实现技巧

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理编程训练系统的相关信息成为必然。开发合适…
阅读更多...
刘知远LLM——大模型微调：prompt-learningdelta tuning

刘知远LLM——大模型微调：prompt-learningdelta tuning

文章目录 背景&概览Prompt-learningdelta tuning增量式指定式重参数化式 OpenPrompt工具包 对应视频P41-P57 如何高效使用大模型&#xff1f;涉及到NLP的前沿技术&#xff0c;如prompt-learning&delta tuning。 prompt-learning对学习大模型范式的改变&#xff0c;del…
阅读更多...
Spring Boot编程训练系统：性能优化实践

Spring Boot编程训练系统：性能优化实践

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了编程训练系统的开发全过程。通过分析编程训练系统管理的不足&#xff0c;创建了一个计算机管理编程训练系统的方案。文章介绍了编程训练系统的系统分析部分&…
阅读更多...
电子应用产品设计方案-4：基于物联网和人工智能的温度控制器设计方案

电子应用产品设计方案-4：基于物联网和人工智能的温度控制器设计方案

一、概述 本温度控制器旨在提供高精度、智能化、远程可控的温度调节解决方案&#xff0c;适用于各种工业和民用场景。 二、系统组成 1. 传感器模块 - 采用高精度的数字式温度传感器&#xff0c;如 TMP117&#xff0c;能够提供精确到 0.01C 的温度测量。 - 配置多个传感器分布在…
阅读更多...
如何在 Ubuntu 24.04 上安装和配置 Fail2ban ?

如何在 Ubuntu 24.04 上安装和配置 Fail2ban ?

确保你的 Ubuntu 24.04 服务器的安全是至关重要的&#xff0c;特别是如果它暴露在互联网上。一个常见的威胁是未经授权的访问尝试&#xff0c;特别是通过 SSH。Fail2ban 是一个强大的工具&#xff0c;可以通过自动阻止可疑活动来帮助保护您的服务器。 在本指南中&#xff0c;我…
阅读更多...
同三维T610UDP-4K60 4K60 DP或HDMI或手机信号采集卡

同三维T610UDP-4K60 4K60 DP或HDMI或手机信号采集卡

1路DP/HDMI/TYPE-C&#xff08;手机/平板等&#xff09;视频信号输入1路MIC1路LINE OUT,带1路HDMI环出&#xff0c;USB免驱&#xff0c;分辨率4K60&#xff0c;可采集3路信号中其中1路&#xff0c;按钮切换&#xff0c;可采集带TYPE-C接口的各品牌手机/平板/笔记本电脑等 同三维…
阅读更多...
Kafka--关于broker的夺命连环问

Kafka--关于broker的夺命连环问

目录 1、zk在kafka集群中有何作用 2、简述kafka集群中的Leader选举机制 3、kafka是如何处理数据乱序问题的。 4、kafka中节点如何服役和退役 4.1 服役新节点 1&#xff09;新节点准备 2&#xff09;执行负载均衡操作 4.2 退役旧节点 5、Kafka中Leader挂了&#xff0c;…
阅读更多...
Web项目版本更新及时通知

Web项目版本更新及时通知

背景 单页应用&#xff0c;项目更新时&#xff0c;部分用户会出更新不及时&#xff0c;导致异常的问题。 技术方案 给出版本号&#xff0c;项目每次更新时通知用户&#xff0c;版本已经更新需要刷新页面。 版本号更新方案版本号变更后通知用户哪些用户需要通知&#xff1f;…
阅读更多...
Android音视频直播低延迟探究之：WLAN低延迟模式

Android音视频直播低延迟探究之：WLAN低延迟模式

Android WLAN低延迟模式 Android WLAN低延迟模式是 Android 10 引入的一种功能&#xff0c;允许对延迟敏感的应用将 Wi-Fi 配置为低延迟模式&#xff0c;以减少网络延迟&#xff0c;启动条件如下&#xff1a; Wi-Fi 已启用且设备可以访问互联网。应用已创建并获得 Wi-Fi 锁&a…
阅读更多...
Appium配置2024.11.12

Appium配置2024.11.12

百度得知&#xff1a;谷歌从安卓9之后不再提供真机layout inspector查看&#xff0c;仅用于支持ide编写的app调试用 所以最新版android studio的android sdk目录下已经没有了布局查看工具... windows x64操作系统 小米k30 pro手机 安卓手机 Android 12 第一步&#xff1a…
阅读更多...
前端使用Canvas实现网页电子签名(兼容移动端和PC端)

前端使用Canvas实现网页电子签名(兼容移动端和PC端)

实现效果&#xff1a; 要使用Canvas实现移动端网页电子签名&#xff0c;可以按照以下步骤&#xff1a; 在HTML文件中创建一个Canvas元素&#xff0c;并设置其宽度和高度&#xff0c;以适配移动设备的屏幕大小。 // 创建一个canvas元素 let canvas document.createElement(&q…
阅读更多...
使用 Python 实现高效网页爬虫——从获取链接到数据保存

使用 Python 实现高效网页爬虫——从获取链接到数据保存

前言 在这个时代，网络爬虫已成为数据分析与信息收集不可或缺的技术之一。本文将通过一个具体的Python项目来介绍如何构建一个简单的网络爬虫，它能够自动抓取指定网站的文章链接、标题、正文内容以及图片链接，并将这些信息保存为CSV文件。 目标网站 一、准备工作 在开始编…
阅读更多...
跟着尚硅谷学vue2—进阶版4.0—Vuex1.0

跟着尚硅谷学vue2—进阶版4.0—Vuex1.0

5. Vuex 1. 理解 Vuex 1. 多组件共享数据-全局事件总线实现 红线是读&#xff0c;绿线是写 2. 多组件共享数据-vuex实现 vuex 不属于任何组件 3. 求和案例-纯vue版 核心代码 1.Count.vue <template><div><h1>当前求和为&#xff1a;{{ sum }}</h1&…
阅读更多...
HTML之列表

HTML之列表

练习题&#xff1a; 图所示为一个问卷调查网页&#xff0c;请制作出来。要求&#xff1a;大标题用h1标签&#xff1b;小题目用h3标签&#xff1b;前两个问题使用有序列表&#xff1b;最后一个问题使用无序列表。 代码&#xff1a; <!DOCTYPE html> <html> <he…
阅读更多...
如何编写jenkins的流水线

如何编写jenkins的流水线

如何编写jenkins的流水线 我们为什么需要编写流水线&#xff1f;新建一个jenkins pipeline的item初识pipeline界面pipeline代码关于取值声明和定义工具使用数据结构 我们为什么需要编写流水线&#xff1f; 这里假如你已经安装了好了jenkins&#xff0c;并且能够正常启动它。 通…
阅读更多...
项目管理人员的自我评估与职业目标设定

项目管理人员的自我评估与职业目标设定

在当今快速发展的商业环境中&#xff0c;项目管理人员的职业规划至关重要。它不仅涉及到个人职业发展的方向、目标和路径选择&#xff0c;还包括如何提升自身的专业技能、管理能力和行业知识。项目管理人员需要明确自己的职业目标、制定合理的职业发展计划、不断学习新知识和技…
阅读更多...
状态空间方程离散化（Matlab符号函数）卡尔曼

状态空间方程离散化（Matlab符号函数）卡尔曼

// 卡尔曼滤波(4)&#xff1a;扩展卡尔曼滤波 - 知乎 // // matlab 连续系统状态空间表达式的离散化&状态转移矩阵求解_matlab状态方程离散化-CSDN博客 // // // %https://blog.csdn.net/weixin_44051006/article/details/107007916 clear all; clc; syms R1 R2 C1 C…
阅读更多...
ubuntu24.04播放语音视频

ubuntu24.04播放语音视频

直接打开ubuntu自带的video播放.mp4文件&#xff0c;弹窗报错如下&#xff1a; 播放此影片需要插件 MPEG-4 AAC 编码器安装方式&#xff1a; sudo apt install gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly sudo apt install ffmpeg验证AA…
阅读更多...
最新文章

Copyright @ 2022~2023