Vue基础(三)

生命周期

又名生命周期回调函数,生命周期函数,生命周期钩子

是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数

生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的

生命周期函数中的this指向是vm或者组件实例对象

html 复制代码
<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个组件

单文件组件

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

基本使用

html 复制代码
<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>

注意点

组件的嵌套

html 复制代码
<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官方提供的标准化开发工具(开发平台)

安装

bash 复制代码
# 安装脚手架

npm install -g @vue/cli

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

vue create 项目名称

render

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

修改默认配置

ref属性

  1. 被用来给元素或子组件注册引用信息(id的替代者)

  2. 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc)

  3. 使用方式:
    打标识:

    ...

    或者
    获取:this.$refs.xxx

props配置

mixin混入

插件

scoped样式

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

写法
html 复制代码
<style scoped>

Todo-list案例

bash 复制代码
//安装
npm i nanoid

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

//调用
nanoid()

//生成唯一的字符串

浏览器本地存储

全局事件总线

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

最好在beforeDestory钩子中,用$off去解绑当前组件所用到的事件

安装

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

使用

  1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
javascript 复制代码
methods(){
  demo(data){.......}
}
  ········
mounted(){
  this.$bus.$on('xxx',this.demo)
}
  1. 提供数据:this. b u s . bus. bus.emit('xxx',数据)

消息订阅与发布

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

使用

  1. 安装pubsub: npm i pubsub-js
  2. 引入 import pubsub from 'pubsub-js'
  3. 接收数据:A组件想接受数据,则在A组件中订阅消息,订阅的回调留在A组件自身
javascript 复制代码
methods(){
  demo(data){
    ·······
  }
},
········
mounted(){
  this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
}
  1. 提供数据 pubsub.publish('xxx',数据)
  2. 最好在beforeDestroy钩子中,用pubsub.unsubscribe(pid)去取消订阅

$nextTick

语法:this.$nextTick(回调函数)

作用:在下一次DOM更新结束后执行其指定的回调,要在nextTick所指定的回调函数中执行

使用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行

过渡与动画

  1. 作用:在插入,更新,或者移除DOM元素时,在合适的时候给元素添加样式类名

  2. 图示

  3. 写法

    准备好样式

    (1)元素进入的样式

    ● v-enter:进入的起点

    ● v-enter-active:进入过程中

    ● v-enter-to:进入的终点

    (2)元素离开的样式

    ● v-leave:离开的起点

    ● v-leave-active:离开过程中

    ● v-leave-to:离开的终点

    使用包裹要过渡的元素,并配置name属性

html 复制代码
<transition name="hello" appear>
            <h1 v-show="isShow"  class="demo">你好啊</h1>
</transition>

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

相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!6 小时前
优选算法系列(5.位运算)
java·前端·c++·算法