• Vue2+Vue3笔记（尚硅谷张天禹老师）day02

    声明:只是记录，初心是为了让页面更好看,会有错误,我并不是一个会记录的人，所以有点杂乱无章的感觉，我先花点时间把视频迅速过掉，再来整理这些杂乱无章的内容

    组件化编程

    按照视频来的话，这里应该有一些概念的东西，但我不管这些东西，我这里只做一个浅显得记录

    1. 组件:实现局部功能效果的代码,复用编码，简化开发
    2. 模块:提供特定功能的js程序,这样可以提高复用性，简化开发
    3. 模块化: 都是以模块来编写的
    4. 组件化:都是以组件来编写的

    Vue中使用组件的三大步骤

    1. 定义组件
      使用Vue.extend创建，注意点
    • el不要写，因为组件都受vm的管理，由vm中的el决定服务哪个容器
    • data必须写成函数，要不然组件复用的时候，组件a改了数据，那组件b存储的数据也发生了改变，但我们本意只想改变a，写成函数的话可以保证每次返回的都是一个新的值
    1. 注册组件
    • 局部注册：new Vue的时候传入compoents选项
    • 全局注册:靠Vue.component(‘组件名’,组件)
    1. 使用组件
      这个特别简单，如果组件名叫做demo,那么直接写上即可

    非单文件组件

    这个基本上不用，一般是作为过渡的，不得不说这个template没有提示是真的烦

    DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <div id="root">
    	
        <student>student>
        <school>school>
        <common>common>
    div>
    
     
    <script src="../../js/vue.js">script>
    <script type="text/javascript">
        
       //①
        const student = Vue.extend({
        	name:'andong',//指定开发者工具中呈现的名字
            template:
                `
                
    
                    
    姓名:{{name}}
    
                    
    年龄:{{age}}
                    
                
    
                    
    
                `    ,
            data() {
                return { name: '王矽疑', age: 19 }
            }
        })
        // 局部
        const school = Vue.extend({
            template: `
                
    
                    
    学校:{{name}}
    
                
    地址:{{address}}
    
                
    校龄{{age}}
    
                
    
                    
    
                `    ,
            data() {
                return { name: '安东大', address: '安天', age: 200 }
            }
        })
        //②
        const common  = Vue.extend({
            template:`
                
    
                    
    我是全局组件 a的值是{{a}}
    
                    
                    
    
                
    
            
                `    ,
            data(){
                return {a:10}
            },
            methods: {
                change(){
                    this.a++;
                }
            },
        })
        //注册全局组件
        // 单引号里面的内容是组件名字，这个任意取，但要见名知义
        // 第二个参数是组件的位置(说成变量更好理解点) 名字要和②处定义的保持一致
        Vue.component('common',common) 
        new Vue({
            el: "#root",
            components: {
                // 完整的是student:student,但由于键与值一样，只写一个也可以
                //冒号之前的是组件名(若其没有name属性那么这个可以随便写，但是名字最好见名知意)
                //冒号之后的是变量名，和①处保持一致
                student,
                school
            }
        })
        script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126

    VueComponent

    在这里插入图片描述

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponenttitle>
		<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:`
				
    
					
    学校名称：{{name}}
    	
					
    学校地址：{{address}}
    	
					
				
    
			    `    ,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`atguigu`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				
    
					
    {{msg}}
    
						
				
    
			    `    ,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})


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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88

    组件的嵌套

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>组件的嵌套title>
		
		<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:`
				
    
					
    学生姓名：{{name}}
    	
					
    学生年龄：{{age}}
    	
				
    
			    `    ,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				
    
					
    学校名称：{{name}}
    	
					
    学校地址：{{address}}
    	
					
				
    
			    `    ,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
    {{msg}}
    `    ,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				
    	
					
					
				
    
			    `    ,
			components:{
				school,
				hello
			}
		})

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90

    一个重要的关系

    这个主要是理解这一个等式:VueComponentName.prototype.__proto__ === Vue.prototype，理解下面的这张图
    在这里插入图片描述
    实例的隐式原型属性永远指向缔造者的原型对象，终点是Object，Object的隐式原型属性的值是null
    隐式原型属性:__proto__
    console.dir(object) object是对象，该语句是查看obj对象有哪些属性

    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 //阻止 vue 在启动时生成生产提示。
		Vue.prototype.x = 99

		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				
    
					
    学校名称：{{name}}
    	
					
    学校地址：{{address}}
    	
					
				
    
			    `    ,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showX(){
					//这个是vc(VueComponent)
					console.log(this.x)
				}
			},
		})

		//创建一个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) */
		    script> 


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    单文件组件

    单文件的三个部分

    • template标签部分:组件的结构
    • script部分 组件交互相关的代码（数据、方法等等）
    • style部分:组件的样式(css样式)

    index.html

    DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法title>
	head>
	<body>
		
		<div id="root">div>
		
		
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    main.js

    import App from './App.vue'

new Vue({
	el:'#root',
	template:``,
	components:{App},
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    Student.vue

    <template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'王矽疑',
				age:18
			}
		}
	}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
  • 相关阅读:
    [opencv]图像和特征点旋转
    yo！这里是c++中的多态
    java ssh校园拼餐系统
    测开 - 自动化测试selenium（WebDriver API） - 细节狂魔
    Redis入门讲解（介绍、安装、常用命令）
    开发中的常见安全威胁问题与应对策略
    云原生gitlab在k8s上配置ingress ssh端口访问仓库
    Waymo dataset+mmdet3d的坐标系问题
    小米为什么造不出芯片
    weapp-tailwindcss for uni-app 样式条件编译语法插件
  • 原文地址：https://blog.csdn.net/qq_45418837/article/details/132629299