VUE(四)：生命周期+非单文件组件

1.14 生命周期

常用的生命周期钩子：

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestory:清除定时器、解绑自定义事件、取消订阅等【首位操作】

关于销毁vue实例

1.销毁后借助vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

  big(element,binding){
                console.log('big',this);//!!此处的this是window
                element.innerText = binding.value*10
                // console.log(element,binding.value);
            },
            /* 'big-number':(element,binding){
                element.innerText = binding.value*10
                // console.log(element,binding.value);
            }, */
            fbind:{
                //1.指令与元素成功绑定时(一上来)
                bind(element,binding){
                    // console.log('bind');
                    element.value = binding.value
                },
                //指令所在元素插入页面时
                inserted(element,binding){
                    // console.log('inserted');
                    element.focus()
                
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    // console.log('update');
                    element.value = binding.value
                }
            }
          }
        })

第二章：Vue组件化编程

2.1 非单文件组件

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

<div id="root">
        <!-- 第三步：编写组件标签 -->
        <hello></hello>
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
    <script>
        //第一步：创建school组件
        const school = Vue.extend({
            // el:'#root',//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务对象
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
            `,
          data(){
           return {
            schoolName:'清华大学',
            address:'北京',
           }
          },
          methods: {
            showName(){
                alert("清华")
            }
          }
        })

        //创建student组件
        const student = Vue.extend({
            // el:'#root',//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务对象
          template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生姓名：{{age}}</h2>
            </div>
            `,
          data(){
           return {
            studentName:'hxx',
            age:18
           }
          }
        })
        
        //创建hello组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>{{msg}}</h2>    
                </div>
            `,
            data(){
                return {
                    msg:'你好'
                }
            }
        })
        //注册全局组件
        Vue.component('hello',hello)

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

        new Vue({
            el:'#root2'
        })
        //创建vm
       /*  new Vue({
          el:'#root',
          data:{
            schoolName:'清华大学',
            address:'北京',
            studentName:'hxx',
            age:18
          }
        }) */
    </script>

2.1.2 几个注意点：

1.关于组件名：

​ 一个单词组成：

​ 第一种写法(首字母小写):school

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

​ 多个单词组成：

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

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

​ 备注：

​ (1).组件名尽可能回避HTML中已有的元素名称

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

2.关于组件标签:

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

​ 第二种写法：<school/>

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

3.一个简写方式：

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

2.1.3 组件的嵌套

 <div id="root">
    </div>
    <script>
        //定义student组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{name}}</h2>
                    <h2>学生年龄：{{age}}</h2>    
                </div>
            `,
            data(){
                return{
                    name:'hxx',
                    age:18
                }
            }
        })

        //定义school组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <student></student>    
                </div>
            `,
            data(){
                return{
                    name:'尚硅谷',
                    address:'北京'
                }
            },
            components:{
                student
            }
        })

        const hello = Vue.extend({
            template:`<h1>北京欢迎你</h1>`,
        })
        
        //定义app组件
        const app = Vue.extend({
            template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
            `,
            components:{
                school,
                hello
            }
        })
        new Vue({
            el:'#root',
            template:`<app></app>`,
            //注册组件(局部)
            components: {
             app
            }
        })
    </script>

2.1.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()配置中：

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

​ 5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)

​ Vue的实例对象，以后简称vm

2.1.5 一个重要的内置关系

1.VueComponent.prototype._proto___ === Vue.prototype

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

2.2 单文件组件

1.School.vue

<template>
    <div class="demo">
        <!-- 组件的结构 -->
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    // 组件交互相关的代码(数据、方法等等)
    export default {
        name:'School',
        data(){
            return{
                name:'清华大学',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
     /* 组件的样式 */
     .demo {
        background-color: orange;
     }
</style>

2.Student.vue

<template>
    <div>
        <!-- 组件的结构 -->
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    // 组件交互相关的代码(数据、方法等等)
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name:'Student',
        data(){
            return{
                name:'hxx',
                age:'18'
            }
        }
    }
</script>

3.App.vue

<template>
  <div>
    <img src="./assets/logo.png" alt="logo">
    <School></School>
    <Student></Student>
  </div>
</template>

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

<style>

</style>

4.main.js

import App from './App.vue'

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

5.index.html

 <div id="root">
        <App></App>
    </div>
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>