Vue基础（三）-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80277784/article/details/142902926

生命周期

又名生命周期回调函数，生命周期函数，生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是vm或者组件实例对象

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        //mounted生命周期函数
        // Vue完成模板的解析并把初始真实的DOM元素放入页面后（完成挂载），调用mounted
        mounted(){
            setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        }
    })
    // setInterval(()=>{
    //     vm.opacity -= 0.01
    //     if(vm.opacity <= 0) vm.opacity = 1
    // },16)
</script>

在这里插入图片描述

总结

在这里插入图片描述

组件

模块与组件

模块

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

模块化

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

组件

用来实现局部（待定）功能效果的的代码集合
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率

组件化

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

非单文件组件

一个组件中包含有n个组件

单文件组件

一个文件中只包含有一个组件

基本使用

在这里插入图片描述

<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>

    </div>
    <div id="root2">
        <info></info>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //创建组件
    const school = Vue.extend({
        template: `
        <div>
            <h2>学校名称：{{name1}}</h2>
            <h2>学校地址：{{adress1}}</h2>
        </div>
        `,
        data(){
           return {
               name1:'清华大学',
               adress1:'北京'
           }
        }
    })
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: 'zhangsan',
                age: 18
            }
        },
    })

    const info = Vue.extend({
        template: `
        <div>
            <h2>你好{{address}}</h2>
        </div>
        `,
        data() {
            return {
                address: '北京'
            }
        },
    })
    //全局注册
    Vue.component('info',info)

    const vm = new Vue({
        el:'#root',
        // data:{
        //     name: '清华大学',
        //     adress: '北京',
        //     studentName: 'zhangsan',
        //     age: 18
        // },
        // 注册组件（局部注册）
        components:{
            school,
            student
        }
    })
    new Vue({
        el:'#root2'
    })
</script>

注意点

在这里插入图片描述

组件的嵌套

<body>
    <div id="root">
        <school></school>
    </div>
   
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data() {
            return {
                studentName: 'zhangsan',
                age: 18
            }
        },
    })
    //创建组件
    const school = Vue.extend({
        template: `
        <div>
            <h2>学校名称：{{name1}}</h2>
            <h2>学校地址：{{adress1}}</h2>
            <student></student>
        </div>
        `,
        data(){
           return {
               name1:'清华大学',
               adress1:'北京'
           }
        },
        components:{
            student
        }
    })
   
    
   
    new Vue({
        el:'#root',
        data:{
            msg:'你好啊'
        },
        // 注册组件（局部注册）
        components:{
            school,
        }
    })
</script>

VueComponent

在这里插入图片描述

一个重要的内置关系

VueComponent.prototype.proto===Vue.prototype
目的：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

组件自定义事件

在这里插入图片描述

Vue脚手架

是Vue官方提供的标准化开发工具（开发平台）
在这里插入图片描述

安装

# 安装脚手架

npm install -g @vue/cli

# 进入要创建项目的文件夹下

vue create 项目名称

render

vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue.包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版的Vue,只包含核心功能，没有模板解析器
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

修改默认配置

在这里插入图片描述

ref属性

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
使用方式：
打标识：
…
或者
获取：this.$refs.xxx

props配置

在这里插入图片描述

mixin混入

在这里插入图片描述

插件

在这里插入图片描述

scoped样式

让样式在局部生效，防止冲突

写法

<style scoped>

Todo-list案例

//安装
npm i nanoid

//引入
import {nanoid} from 'nanoid'

//调用
nanoid()

//生成唯一的字符串

在这里插入图片描述

浏览器本地存储

在这里插入图片描述

全局事件总线

一种组件间通信的方式，适用于任意组件间通信
最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件

安装

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this
    //安装全局事件总线，$bus就是当前应用的vm
  }
}).$mount('#app')

使用

接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){
  demo(data){.......}
}
  ········
mounted(){
  this.$bus.$on('xxx',this.demo)
}

提供数据：this. $b u s .$ emit(‘xxx’,数据)

消息订阅与发布

一种组件间的通信方式，适用于任意组件间通信
使用

安装pubsub: npm i pubsub-js
引入 import pubsub from ‘pubsub-js’
接收数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
  demo(data){
    ·······
  }
},
········
mounted(){
  this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
}

提供数据 pubsub.publish(‘xxx’,数据)
最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去取消订阅

$nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新结束后执行其指定的回调，要在nextTick所指定的回调函数中执行
使用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
在这里插入图片描述

过渡与动画

作用：在插入，更新，或者移除DOM元素时，在合适的时候给元素添加样式类名
图示
写法
准备好样式
（1）元素进入的样式
● v-enter:进入的起点
● v-enter-active：进入过程中
● v-enter-to：进入的终点
（2）元素离开的样式
● v-leave：离开的起点
● v-leave-active：离开过程中
● v-leave-to：离开的终点
使用包裹要过渡的元素，并配置name属性

<transition name="hello" appear>
            <h1 v-show="isShow"  class="demo">你好啊</h1>
</transition>

若有多个元素需要过渡，则需使用：，且每个元素都要指定key值

Vue基础（三）

生命周期

总结

组件

模块与组件

模块

模块化

组件

组件化

非单文件组件

单文件组件

基本使用

注意点

组件的嵌套

VueComponent

一个重要的内置关系

组件自定义事件

Vue脚手架

安装

render

修改默认配置

ref属性

…

props配置

mixin混入

插件

scoped样式

写法

Todo-list案例

浏览器本地存储

全局事件总线

安装

使用

消息订阅与发布

$nextTick

过渡与动画