程序员经验分享-hwhale

尚硅谷 Vue 2.0 + Vue 3.0 入门到精通教程学习笔记 （二）

2023-11-01

第二章：Vue 组件化编程

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

2.1.1 模块

      1. 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件

      2. 为什么：js 文件很多很复杂

      3. 作用：复用 js, 简化 js 的编写，提高 js 运行效率

2.1.2 组件

      1. 理解：用来实现局部（特定）功能效果的代码集合（ html/css/js/image...... ）

      2. 为什么：一个界面的功能很复杂

      3. 作用：复用编码, 简化项目编码, 提高运行效率 

2.1.3 模块化

         当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。

2.1.4 组件化

         当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

2.2 非单文件组件

2.2.1 基本使用

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

	//创建vm
	new Vue({
		el: '#root',
		data: {
			msg: '你好啊！'
		},
		//第二步：注册组件（局部注册）
		components: {
			school,
			student
		}
	})

	new Vue({
		el: '#root2',
	})
</script>
</html>

效果：

总结：

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

       1. 定义组件(创建组件)

       2. 注册组件

       3. 使用组件(写组件标签)

  • 如何定义一个组件？

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

2.2.2 组件的注意事项

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

效果：

总结：

        几个注意点：

       ■ 关于组件名 ：

          ○ 一个单词组成 ：

            ● 第一种写法(首字母小写)：school

            ● 第二种写法(首字母大写)：School

         ○ 多个单词组成 ：

            ● 第一种写法(kebab-case命名)：my-school

            ● 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

         ○ 备注：

            ● 组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2 都不行

            ● 可以使用 name 配置项指定组件在开发者工具中呈现的名字

       ■ 关于组件标签 ：

          ○ 第一种写法：<school></school>

          ○ 第二种写法：<school/>

          ○ 备注：不用使用脚手架时，<school/> 会导致后续组件不能渲染

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

 2.2.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
		}
	})

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

 效果：

2.2.4 VueComponent

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

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

效果：

总结：

关于 VueComponent：

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

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

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

   4. 关于 this 指向：

  • 组件配置中：

    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。

  • new Vue(options) 配置中：

      data 函数、methods 中的函数、watch 中的函数、computed 中的函数 它们的 this 均是【Vue实例对象】。

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

【注】Vue 的实例对象，以后简称 vm

2.2.5 一个重要的内置关系

<!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)
			}
		},
	})

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

</script>
</html>

效果：

总结：

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

2.3 单文件组件

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

【注】：VSCode 默认不认识 .vue 文件，需要安装一个插件 例如：Vetur

其他插件也可以，只要能让 VSCode 识别到 .vue 文件 

但直接编译 Open with Live Serve 控制台报错，因为浏览器无法直接支持 ES6 的模块化语法：

因此需要 Vue 脚手架（vue cli command line interface）去将 .vue 文件 加工成浏览器可识别的 .js文件 。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Vue学习笔记和案例

学习

vuejs

前端

开发语言

尚硅谷 Vue 2.0 + Vue 3.0 入门到精通教程学习笔记 （二） 的相关文章

随机推荐

  • C++安装库

    这里以安装libLAS为例 去github下载文件 https github com libLAS libLAS 在该文件下输入以下指令 mkdir build cd build cmake make sudo make install 主

  • JavaWeb(四) 请求(request)与响应(response)

    1 请求响应流程图 Request 请求对象 tomcat服务器为我们创建 使用这个对象获取请求相关的数据 父接口 ServletRequest 子接口 HttpServletRequest Response 响应对象 tomcat服务器为

  • OpenAI首席科学家最新访谈：对模型创业两点建议、安全与对齐、Transformer够好吗？...

    导读 OpenAI首席科学家Ilya Sutskever最近和他的朋友Sven Strohband进行了一次简短的对话 访谈中主要提及了以下几个问题 对深度学习的信仰 对AGI的畅想 Transformer够不够好 让人震惊的涌现能力 安全

  • videojs 销毁重新初始化问题及其他使用

    1 videojs 销毁 this myvideo videojs myvideo bigPlayButton false textTrackDisplay false posterImage true errorDisplay false

  • 火狐浏览器不能上网

    只有火狐浏览器不能上网 用windows edge可以正常上网 尝试了一些方案 例如关闭火狐的网络代理 排障模式 重新安装等依然不能上网 解决方案 这种情况重置下Winsock 方法 单击 开始 找到 Windows PowerShell

  • 初始化int类型data1[ ]={1,3,5,7,9,11,13,15,17,19,2,4,6,8,10,12,14,16,18,20}先使用任意一种算法对其排序提示用户输入一个数字，再折半查找

    初始化int类型data1 1 3 5 7 9 11 13 15 17 19 2 4 6 8 10 12 14 16 18 20 先使用任意一种算法对其排序提示用户输入一个数字 应用折半查找函数模板找出它的位置 include using

  • 一些计算机方面的感悟

    1 架构设计的本质是深入理解业务场景之后用工程经验做出最佳权衡 2 计算机解决问题其实没有任何奇技淫巧 它唯一的解决办法就是穷举 穷举所有可能性 算法设计无非就是先思考 如何穷举 然后再追求 如何聪明地穷举

  • Android项目针对libs(armeabi,armeabi-v7a,x86)进行平台兼容

    1 Android设备如何加载 so文件 不同CPU架构的Android手机加载时会在libs下找自己对应的目录 从对应的目录下寻找需要的 so文件 如果没有对应的目录 就会去armeabi下去寻找 如果已经有对应的目录 但是如果没有找到对

  • , trailing comma 逗号的问题

    PHP 数组元素最好加上逗号 因为可以方便其他人添加内容JAVASCRIPT 其实也应该加上逗号的 但可惜IE9以下不认 所以 可以不加逗号JSON JSON hates trailing commasPYTHON 希望尾部元素有逗号 转载

  • _mm_pause

    翻译自Intel指令 PAUSE指令提升了自旋等待循环 spin wait loop 的性能 当执行一个循环等待时 Intel P4或Intel Xeon处理器会因为检测到一个可能的内存顺序违规 memory order violation

  • 1.2冯•诺依曼模型

    文章目录 1 2 1 4个子系统 1 2 2 存储程序概念 1 2 3 指令的顺序执行 前一节中讲到的基于图灵机所建造的计算机是在存储器中存储数据 在1944 1945年期间 冯 诺依曼指出 程序和数据在逻辑上是相同的 因此程序也能存储在计

  • Mariadb主从复制之MHA配置

    Mariadb主从复制之MHA配置 一 环境介绍 1 主从复制及半同步复制配置链接 2 IP规划 二 检查一主两从数据库状态 1 主库状态 2 从库状态 三 MHA高可用介绍 1 MAH介绍 2 MAH作用 四 MHA基本环境配置 1 所有

  • linux线程使用

    概念 1 PCB Process Control Block 进程管理块 系统中存放进程的管理和控制信息的数据结构体 每一个进程均有一个PCB 在创建进程时建立 直到进程撤销而撤销 2 程序段 是进程中能被进程调度程序在CPU上执行的程序代

  • STL空间配置

    SGI STL有两级配置器 第一级配置器的allocate 和 realloc 都是在调用malloc 和 realloc 不成功后 改调用oom malloc 和 oom realloc 后两者都有内循环 不断调用 内存不足处理例程 期望

  • Unity3D中读取CSV文件

    转自 https www cnblogs com lingLuoChengMi p 9990488 html 本人对原文进行了整理 适当加上注释和小部分修改 不过大部分代码也是转载 说明 1 写入一个单元格时 如果含有逗号 则需要将整个字段

  • NVIDIA可编程推理加速器TensorRT学习笔记（三）——加速推理

    文章目录 简单张量RT示例 将预训练的图像分割 PyTorch 模型转换为 ONNX 将 ONNX 模型导入 TensorRT 生成引擎并执行推理 对输入进行批处理 分析应用程序 优化您的应用程序 使用混合精度计算 更改工作区大小 重用 T

  • 主成分分析二级指标权重_权重赋值之“主成分分析法”

    主成分分析 Principal Component Analysis PCA 最早是由K 皮尔森 Karl Pearson 对非随机变量引入的一种统计方法 尔后H 霍特林将此方法推广到随机向量的情形 主成分是指通过正交变换将一组可能存在相关

  • 阿里云物联网Iot设备上下线状态数据流转的设置

    要想通过物联网平台实现远程监控设备 那么就要建立监控端设备 比如手机 和被监控端设备的数据交互 在阿里云物联网平台完成这个交互功能的方法就是建立两个设备之间的数据流转 对于设备要流转的物模型数据 阿里云网站上已经有详细的示例介绍 但是对于设

  • 最大上升序列Super Jumping! Jumping! Jumping!

    多组输入 第一个数代表有多少个数据 输入0结束 Sample Input 3 1 3 2 4 1 2 3 4 4 3 3 2 1 0 Sample Output 4 10 3 1到3最大 1到2到3到4最大 直接到三最大 include

  • 尚硅谷 Vue 2.0 + Vue 3.0 入门到精通教程学习笔记 （二）

    第二章 Vue 组件化编程 2 1 模块与组件 模块化与组件化 2 1 1 模块 1 理解 向外提供特定功能的 js 程序 一般就是一个 js 文件 2 为什么 js 文件很多很复杂 3 作用 复用 js 简化 js 的编写 提高 js 运

热门标签