Vue学习笔记（四）

已于 2022-07-31 12:01:24 修改
阅读量1.2k 收藏
点赞数
分类专栏： # Vue 文章标签： vue.js javascript 前端 前端框架 npm
于 2021-12-14 21:34:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45075124/article/details/121940543
版权

点击跳转：Vue学习（一）

点击跳转：Vue学习（二）

点击跳转：Vue学习（三）

点击跳转：Vue学习（五）

点击跳转：Vue学习（六）

点击跳转：Vue学习（七）

点击跳转：Vue学习（八）

文章预览：

3、Vue组件化编程

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.1、模块

  • 理解：向外提供特定功能的js程序,一般就是一个js文件
  • 为什么：js文件很多很复杂
  • 作用：复用js,简化js的编写,提高js运行效率

3.2、组件

  1. 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码,简化项目编码,提高运行效率

3.3、模块化

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

3.4、组件化

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

3.5、非单文件组件

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

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> <student></student> <hello></hello>

<!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>
            <student></student>
        </div>

        <div id="root2">
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        //第一步：创建school组件
        const school1 = Vue.extend({
            // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
            template: `
                <div class="demo">
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName()">点我提示学校名</button>	
        	    </div>
			`,	
            data() {//写成函数
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            },
        })

        //第一步：创建student组件
        const student1 = Vue.extend({
            template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        })

        //第一步：创建hello组件
        const hello1 = Vue.extend({
            template: `
            <div>	
            	<h2>你好啊！{{name}}</h2>
            </div>
            `,
            data() {
                return {
                    name: 'Tom'
                }
            }
        })

        //第二步：全局注册组件
        Vue.component('hello', hello1)

        //创建vm
        new Vue({
            el: '#root',
            data: {
                msg: '你好啊！'
            },
            //第二步：注册组件（局部注册）
            components: {
                school: school1,
                student: student1
                // 组件名：中转变量，如果组件名和中转变量一致如school:school则可以写为school
            }
        })

        new Vue({
            el: '#root2',
        })
    </script>
</html>
2、组件的几个注意点

几个注意点：
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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>几个注意点</title>
	<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

	//定义组件
	const s = {
		name: 'atguigu',
		template: `
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
				</div>
			`,
		data() {
			return {
				name: '尚硅谷',
				address: '北京'
			}
		}
	}
	new Vue({
		el: '#root',
		components: {
			"school": s
		}
	})
</script>
</html>
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: 'pink老师',
				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>

在这里插入图片描述

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).组件配置中：

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

​ (2).new Vue(options)配置中：

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

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

​ Vue的实例对象，以后简称vm。vm管理着vc

如图所示：打印出vm，展开，$children中包含着两个vc

在这里插入图片描述

<!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 }
	})
	console.log(vm);
</script>

</html>
5、一个重要的内置关系

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

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

在这里插入图片描述

Vue构造函数:

Vue构造函数的prototype是Vue的原型对象

vm（Vue构造函数构造的实例对象）：

vm对象的原型等于其构造函数的prototype，即是Vue的prototype,即指向Vue的原型对象：vm.__proto__===Vue.prototype

Vue的原型对象的原型：

即Vue.prototype.__proto__等于其构造函数的prototype：Vue.prototype.__proto__===Object.prototype

VueComponent构造函数：

VueComponent构造函数的prototype是VueComponent的原型对象

vc（VueComponent构造函数构造的实例对象）：

vc对象的原型等于其构造函数的prototype，即是VueComponent的prototype,即指向VueComponent的原型对象：

最后，强行改变VueComponent原型对象的.__proto__指向，让其指向从Object原型对象到Vue的原型对象

VueComponent.prototype.__proto__ === Vue.prototype

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

	console.log(school.prototype.__proto__ === Vue.prototype)
	console.dir(school)
	

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

	//定义一个构造函数
	/*	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)
	*/
</script>

</html>

3.6、单文件组件

大体结构是这样的：
在这里插入图片描述

1、其余文件(这些文件内创建组件)

School.vue文件

<template>
  <div>
    <h1>学校的名称：{{schoolName}}</h1>
    <h1>学校的地址：{{address}}</h1>
  </div>
</template>

<script>
export default {
  name: "School ",
  data(){
    return{
      schoolName:'xxx',
      address:2333
    }
  }
}
</script>

<style>

</style>

Student.vue文件

<template>
  <div>
    <h1>学生的名称：{{studentName}}</h1>
    <h1>学生的性别：{{gender}}</h1>
  </div>
</template>

<script>
export default {
  name: "Student ",
  data(){
    return{
      studentName:'sx',
      gender:'男'
    }
  }
}
</script>
<style scoped>

</style>
2、App.vue文件
<template>
  <!--使用组件-->
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
  // 引入组件
  import Student from './School.vue'
  import School from './Student.vue'

  export default {
    name: "App",
    // 注册组件
    component:{
      School,
      Student
    }
  }
</script>

<style scoped>

</style>
3、main.js文件
import App from "./App.vue";

Vue.config.productionTip = false;
new Vue({
    el:'#root',
    // 注册组件App
    component:{App}
})
4、index.html文件，准备一个容器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件组件</title>
</head>
<body>
    <div id="root">
        <!--使用组件App-->
        <App></App>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="main.js"></script>

</body>

</html>
Zzz小白飞
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue 学习笔记
weixin_43971312的博客
05-22 2294
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
vue学习笔记四
hbnight的专栏
05-03 893
Vue学习笔记四 vue学习笔记一  vue学习笔记二 vue学习笔记三 今天写个todolist， 在前几篇的基础上做的。需要的同学可以点击上面的链接； 在template文件夹下新建一个list.vue； 现在是空的，先写上一点假数据 data(){ return{ items:[ // 模拟一些数据 {
Vue 3 学习笔记
qq_46735055的博客
05-23 3221
禹神最新Vue3教程学习笔记
vue3学习笔记
qq_43276836的博客
07-02 933
自定义事件发射this.$emit("todo-added",参数);v-on监听事件触发函数读取事件参数。
VUE学习笔记
weixin_51660483的博客
05-30 1852
什么是VUE？vue是一个用于构建用户界面的渐进式框架vue是一个基于数据渲染出用户能够看到的页面渐进式框架。
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1265
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
Vue3学习笔记
Python_Ghost的博客
10-13 1360
鼠标位置X轴:{{ x }}Y轴{{ y }}
Vue速成学习笔记
TRXCX的博客
05-24 1194
三、ElementUI。
vue3学习笔记（黑马）
Z_Y_R_的博客
09-28 1406
vue3学习内容
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
TypeError: Cannot read property ‘parentNode‘ of undefined.
DN金猿的博客
10-29 318
使用node js+vue+element plus开发。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 469
使用filterable。
扩展el-table，实现当showOverflowTooltip时，鼠标可移入tooltip功能
最新发布
Bitter的博客
11-01 44
1.在utils里创建elTable.js。2.在main.js中引入 并绑在vue上。
基于SSM+VUE历史车轮网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解
卓越软件开发的博客
11-01 369
源代码+数据库+LW文档（1万字以上）+开题报告+答辩稿部署教程+代码讲解+代码时间修改教程。
el-data-pick 选出的时间为2024-10-22T16:00:00.000Z样子的与期待的不符合 使用value-format解决
weixin_51687565的博客
10-28 363
在发送到后端时可能会因时区自动转换引起日期错位（如显示的日期是 2024-10-22，而绑定的数据是 2024-10-23）。的字符串形式绑定，并不会因为时区问题导致日期变化。默认会返回 UTC 格式的日期时间，比如。可以让绑定的数据以标准化的格式保存。在日期选择器中，希望用户看到的是。这样设置后，当用户选择。
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值