• vue学习53~60（Vue组件化编程）

    2 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 非单文件组件

    基本使用

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

    • 定义组件(创建组件)
    • 注册组件
    • 使用组件(写组件标签)

    定义组件

    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

    区别如下：

    • el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
    • data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

    讲解一下面试小问题：data必须写成函数：

    这是 js 底层设计的原因：举个例子

    对象形式

    let data = {
    a: 99,
    b: 100
}

let x = data;
let y = data;
// x 和 y 引用的都是同一个对象，修改 x 的值， y 的值也会改变
x.a = 66;
console.loh(x); // a:66 b:100
console.log(y); // a:66 b:100

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

    函数形式

    function data() {
    return {
        a: 99,
        b: 100
    }
}
let x = data();
let y = data();
console.log(x === y); // false
// 我的理解是函数每调用一次就创建一个新的对象返回给他们

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    备注：使用template可以配置组件结构。

    创建一个组件案例：Vue.extend() 创建

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

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

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

    //第一步：创建hello组件
    const hello = Vue.extend({
        template:`
				
    	
					
    你好啊！{{name}}
    
    
    
			    `    ,
        data(){
            return {
                name:'Tom'
            }
        }
    })
    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

    注册组件

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

    局部注册

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

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

    全局注册

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

    • 1
    • 2
    • 3
    • 4

    写组件标签

    
<div id="root">
    <hello>hello>
    <hr>
    <h1>{{msg}}h1>
    <hr>
    
    <school>school>
    <hr>
    
    <student>student>
div>

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

    几个注意点：

    关于组件名：

    一个单词组成：

    • 第一种写法(首字母小写)：school
    • 第二种写法(首字母大写)：School

    多个单词组成：

    • 第一种写法(kebab-case命名)：my-school
    • 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

    备注：

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

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

    eg:

    const s = Vue.extend({
    name: 'atguigu',
    template: `
        
    
            
    学校名称：{{name}}
    
            
    学校地址：{{address}}
    
        
    
        `    ,
    data() {
        return {
            name: 'yaya',
            address:'北京'
        }
    }
})

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

    在这里插入图片描述

    关于组件标签:

    第一种写法：

    第二种写法：

    备注：不用使用脚手架时，会导致后续组件不能渲染。

    一个简写方式：

    const school = Vue.extend(options) 可简写为：const school = options

    组件的嵌套

    比较简单，直接展示代码：

    
<div id="root">

div>

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

    • 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

    VueComponent

    • school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
    • 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
    • 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！(这个VueComponent可不是实例对象)
    • 关于this指向：
      • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
      • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
    • VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

    Vue 在哪管理 VueComponent

    在这里插入图片描述

    一个重要的内置关系

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

    在这里插入图片描述

    2.3 单文件组件

    单文件组件就是将一个组件的代码写在 .vue 这种格式的文件中，webpack 会将 .vue 文件解析成 html,css,js这些形式。

    来做个单文件组件的案例：

    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

    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

    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

    main.js

    在这个文件里面创建 vue 实例

    import App from './App.vue'

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

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

    index.html

    在这写 vue 要绑定的容器

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
  • 相关阅读:
    HiveSQL在使用聚合类函数的时候性能分析和优化详解
    7-4链表去重
    【编译原理】机测笔记
    单片机论文参考：5、基于单片机的自动打铃系统
    v-if失效原因
    *.pcd文件格式
    linux下磁盘分区和逻辑卷管理
    如何使用 NFTScan 的 TON API 实现 NFT 应用开发?
    写了这么久Java项目，是否还记得你的第一行Java代码
    前端面试题日常练-day45 【面试题】
  • 原文地址：https://blog.csdn.net/m0_57809042/article/details/128141118