vue2(5)

生命周期

对组件的理解

非单文件组件

几个注意点

生命周期

this.$el是真实DOM

常用的生命周期钩子：

mounted：发送ajax请求，启动定时器、绑定自定义事件、订阅消息等初始化操作
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何消息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，因为i即便操作数据，也不会再触发更新流程

对组件的理解

模块：

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

组件：

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

模块化：

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

组件化：

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

非单文件组件

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

定义组件（创建组件）
注册组件
使用组件（写组件标签）

1.如何定义一个组件？

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

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

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

2.如何注册组件？

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

3.编写组件标签：

非单文件组件和单文件组件的区别：

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

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

为什么data要用对象式？


// 当data用对象式式
    let data={
        a:1,
        b:2
    }
    const x1=data
    const x2=data


function data(){
        return{
            a:1,
            b:2
        }
    }
    const x1=data()
    const x2=data()


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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
 
head>
<body>
    <div id="root">
        <hello>hello>
        <hr>
        
        <school>school>
        <hr>
        <student>student>
    div>
    <div id="root2">
        <hello>hello>
    div>
body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
// 第一步，创建school组件
    const school=Vue.extend({
        template:`
        <div>
            <h2>学校名称：{{schoolName}}h2>
            <h2>学校地址：{{address}}h2>
            <button @click="showName">点我提示学校名button>
        div>
        `,
        data(){
            return{
                schoolName:'尚硅谷',
                address:'北京',
            }
        },
        methods:{
            showName(){
                alert(this.schoolName)
            }
        }
    })
    const student=Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{studentName}}h2>
            <h2>学生年龄：{{age}}h2>
        div>
        `,
        data(){
            return{
                studentName:'a',
                age:18
            }
        }
    })
 
    const hello=Vue.extend({
        template:`
        <div>
            <h2>你好呀！{{name}}h2>
        div>
        `,
        data(){
            return{
                name:'田园犬'
            }
        }
    })
    
    // 第二步，全局注册组件
    Vue.component('hello',hello)
    // 创建vm
    new Vue({
        el:'#root',
        // 第二步，注册组件（局部注册）
        components:{
            school,
            student
        }
 
    })
    new Vue({
        el:'#root2'
    })
script>
html>

几个注意点

1.关于组件名：

一个单词组成：

首字母小写：school
首字母大写：School

多个单词组成：

kebab-case命名：my-school
CamelCase命名：Myschool（需要Vue脚手架支持）

备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2，H2都不行
可以使用name配置指定组件在开发者工具中呈现的名字

2.关于组件标签

第一种写法：
第二种写法：

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

3.一个简写方式：


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


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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
 
head>
<body>
    <div id="root">
        <h1>{{msg}}h1>
        <my-school>my-school>
    div>
body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    // 简写
    const s={
        template:`
        
            学校名称：{{name}}
            学校地址：{{address}}

`,
data(){
return{
name:'atguigu',
address:'北京'
}
}
}
new Vue({
el:'#root',
data:{
msg:'你好呀'
},
components:{
'my-school':s
}
})
script>
html>

组件嵌套


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>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
 
head>
<body>
    <div id="root">
        <app>app>
    div>
body>
<script>
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示
    // 定义student组件
    const student=Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{name}}h2>
            <h2>学生年龄：{{age}}h2>
        div>
        `,
        data(){
            return{
                name:'a',
                age:18
            }
        }
    })
    // 定义school组件
    const school={
        template:`
        <div>
            <h2>学校名称：{{name}}h2>
            <h2>学校地址：{{address}}h2>
            <student>student>
        div>
        `,
        data(){
            return{
                name:'atguigu',
                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
        }
    })
    
    new Vue({
        template:`<app>app>`,
        el:'#root',
        // 注册组件
        components:{
            app,
        }
    })
script>
html>

VueCompomponent

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

2.我们只需要写,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

一个重要的内置关系

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

单文件组件

index.html


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>测试一下单文件组件的语法title>
head>
<body>
    
    <div id="root">div>
    <script src="./vue.js">script>
    <script src="./153.main.js">script>
 
body>
html>

main.js


import App from './152.App.vue'
 
new Vue({
    el:'#root',
    template:``,
    components:{App},
})

App.vue


 
<script>
// 引入组件
import School from './150.School.vue'
import Student from './151.Student.vue'
    export default {
    name:'App',
    components:{
        School,
        Student
    }
    }
script>

School.vue


 
<script>
// 引入组件
import School from './150.School.vue'
import Student from './151.Student.vue'
    export default {
    name:'App',
    components:{
        School,
        Student
    }
    }
script>

Student.vue


 
<script>
// 组件交互相关的代码（数据、方法等）
// 分别暴露、统一暴露   在school前加export
export default{
    name:'Student',
    data(){
        return{
            name:'张三',
            age:18
        }
    }
}
script>