【Vue】学习笔记-组件化编程

news/2025/3/15 8:31:34/

学习笔记-组件化编程

  • 模块与组件、模块化与组件化
  • 非单文件组件
    • 基本使用
    • 组件注意事项
    • 组件的嵌套
    • VueComponent
    • 一个重要的内置关系
  • 单文件组件

模块与组件、模块化与组件化

在这里插入图片描述
在这里插入图片描述
模块
a.理解：向外提供特定功能的js程序，一般就是一个js文件
b.为什么：js文件很多很复杂
c.作用：复用、简化js的编写，提高js运行效率
组件
a.定义：用来实现局部功能的代码和资源的集合(html/css/js/image…)
b.为什么：一个界面的功能很复杂
c.作用:复用编码，简化项目编码，提高运行效率
模块化
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件

非单文件组件：一个文件中包含有n个组件
单文件组件：一个文件中只包含有1个组件

基本使用

vue中使用组件的三大步骤
1. 定义组件
- 使用vue.extend(options) 创建，其中options和*new Vue(options)时传入的options几乎一样，但也有点区别
a.el 不要写，以为最终所有的组件都要经过一个vm的管理，由vm中的el才决定哪个容器
b.data 必须要写成函数，避免组件被复用时，数据存在引用关系
2. 注册组件
a. 局部注册： new Vue()的时候options传入components选项
b.全局注册： Vue.component(‘组件名’,组件)
3. 使用组件
编写组件标签如***

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script></head><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>
</html>

在这里插入图片描述

组件注意事项

关于组件名

  • 一个单词组成
    第一种写法(首字母小写):school
    第二种写法(首字母大写):school
  • 多个单词组成
    第一种写法(kebab-case 命名): my-school
    第二种写法(CamelCase 命名): MySchool(需要Vue脚手架支持)
  • 备注
    组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
    可以使用name配置项指定组件在开发者工具中呈现的名字
    关于组件标签
  • 第一种写法：
  • 第二种写法：(需要vue脚手架支持)
  • 备注：不使用脚手架时，会导致后续组件不能渲染
    一个简单方式：const school= **Vue.extend(options)**可简写为const school=options,因为父组件components 引入的时候会自动创建
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>几个注意点</title><script type="text/javascript" src="../js/vue.js"></script></head><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:'北京'}}})new Vue({el:'#root',data:{msg:'欢迎学习Vue!'},components:{school:s}})</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>

在这里插入图片描述

VueComponent

关于VueComponent

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

  2. 我们只需要写**或**，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。

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

在这里插入图片描述

一个重要的内置关系

在这里插入图片描述

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

单文件组件

  • School.vue
<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>
  • 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 Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script>
  • main.js
import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})
  • 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>

http://www.ppmy.cn/news/52622.html

相关文章

Docker 常用命令

Docker 常用命令

1.Docker常用命令 Docker 命令 查看命令 命令解释docker ps查看正在运行的容器docker ps -a查看所有已经创建的容器docker images列出镜像列表docker container ls效果同ps命令(加-a效果同) docker ps 详细参数 -a :显示所有的容器&#xff0c;包括未运行的。-f :根据条件…
阅读更多...
程序测试方法

程序测试方法

程序测试是软件开发中非常重要的一步&#xff0c;通过测试可以检查程序的正确性、稳定性、可靠性等方面&#xff0c;保证软件质量。下面介绍一些常见的程序测试方法&#xff1a; 单元测试&#xff1a;测试单个程序单元&#xff08;函数、方法、类等&#xff09;的正确性&#x…
阅读更多...
MyBatisPlus学习

MyBatisPlus学习

官网&#xff1a;https://mp.baomidou.com/ MyBatis Plus&#xff0c;简化 MyBatis &#xff01; 1.概述 需要的基础&#xff1a;把我的MyBatis、Spring、SpringMVC就可以学习这个了&#xff01; 为什么要学习它呢&#xff1f;MyBatisPlus可以节省我们大量工作时间&#xff0…
阅读更多...
如何在项目中使用不同版本的包?

如何在项目中使用不同版本的包?

如何在项目中使用不同版本的包&#xff1f; 随着时间的推移&#xff0c;我们的项目可能需要使用同一个包的不同版本。这可能是因为新版本包含了一些新功能或修复了一些问题&#xff0c;但我们不想升级旧版本&#xff0c;因为这可能会导致项目兼容性问题。在这种情况下&#xf…
阅读更多...
（一）Kubernetes - 介绍

（一）Kubernetes - 介绍

Kubernetes介绍 1. 介绍1.1 什么是Kubernetes1.2 K8s主要功能1.3 K8s架构1.4 K8S核心概念1.5 完整流程 2. K8S安装方式选择2.1 kubeadm2.2 手动部署(二进制)2.3 Rancher2.4 kubespray 3. 思维导图 1. 介绍 1.1 什么是Kubernetes ​ Kubernetes是Google公司在2014年6月开源的一…
阅读更多...
用python创建一个路径文件夹

用python创建一个路径文件夹

#首先给一个路径path&#xff1a; path r"C:\A\B\C" def mkdir_work(path): if path r"C:": return if os.path.exists(path): return else&#xff1a; path_one,path_two os.path.split(path) if os.path.exists(path_one): os.mkdir(path) else: m…
阅读更多...
【C++】—— STL简介（了解）

【C++】—— STL简介（了解）

前言&#xff1a; 在上节&#xff0c;我们简单的认识了模板的基本概念。今天我简单的给大家介绍一下关于 STL 。 目录 &#xff08;一&#xff09; 什么是STL &#xff08;二&#xff09; STL的版本 &#xff08;三&#xff09; STL的六大组件 &#xff08;四&#xff09;…
阅读更多...
C/C++|物联网开发入门+项目实战|函数输入与输出|值传递|地址传递|连续空间的传递|嵌入式C语言高级|C语言函数的使用（1）-学习笔记（11）

C/C++|物联网开发入门+项目实战|函数输入与输出|值传递|地址传递|连续空间的传递|嵌入式C语言高级|C语言函数的使用（1）-学习笔记（11）

文章目录 函数概述输入参数示例&#xff1a;值传递地址传递连续空间的传递 参考&#xff1a; 麦子学院-嵌入式C语言高级-C语言函数的使用 函数概述 一堆代码的集合,用一个标签去描述它 复用化&#xff0c;降低冗余度 标签 ------ 函数名 函数和数组都属于内存空间&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023