Vue第三章脚手架之最全render函数、props、mixin混入、插件、浏览器本地存储、组件自定义事件_绑定、解绑、全局事件总线、消息订阅与发布、nextTick、Vue过度与动画

本文主要是介绍Vue第三章脚手架之最全render函数、props、mixin混入、插件、浏览器本地存储、组件自定义事件_绑定、解绑、全局事件总线、消息订阅与发布、nextTick、Vue过度与动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第三章——开始简写

安装脚手架

npm i -g @vue/cli

vue创建脚手架

vue create 项目名称

cd 项目名称

npm run sever

http://localhost:8080/

Vue:核心+模板解析器(解析template)

一、render函数

利用模块化的引用方法引用vue

vue包中的package.json中的module控制ES6引入的哪个具体的js文件

render函数有返回值

没有用到this就可以用箭头函数

1、vue.js完整版

核心+模板解析器(解析template)

2、vue.runtime.xxx.js没有模板解析器,需使用render函数接收到的createElement函数去接收指定内容

new Vue({render:h => h(App)
})

二、修改配置文件

输出脚手架配置文件命令:vue inspect > output.js

创建vue.config.js自定义配置

common暴露:

module.exports = {pages:{index:{entry:'src/main.js'}},lintOnSave:false //关闭语法检查
}

三、props

在App.vue写入标签属性

<Student name="李四" :age="18"/>  利用v-bind

在组件

export default {//props:['name','sex']  //简单接收/*接收同时对数据类型进行限制props:{name:String,age:Number}}*///接收的同时对数据进行类型限制+默认值指定+必要性限制props:{name:{type:String,required:true},age:{type:Number,default:0}}
}

四、mixin混入

mixins.js

功能:可以把多个组件共用的配置提取成一个混入对象

//定义混合
{data(){
...
},
methods:{
...
}
}//使用混入全局混入:Vue.mixin(xxx)局部混入:mixins:['xxx']

五、插件

plugins.js

在main.js中使用插件

//引入插件
import plugins from './plugins'
//使用插件
Vue.use(plugins)

用于增强Vue

包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

定义插件:

对象.install = function(Vue,options) {
...
}

scoped样式

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

<style scoped>

六、浏览器本地存储

本地存储localStorage:

将会话存储中的sessionStorage全部替换为localStorage

会话存储sessionStorage:

<body><h2>localStorage</h2><button οnclick="saveData()">点我保存</button><button οnclick="readData()">点我读取</button><button οnclick="deleteData()">点我删除</button><button οnclick="deleteAllData()">点我清空</button><script type="text/javascript">let p = {name:'张三',age:18}function saveData(){sessionStorage.setItem('msg','hello')sessionStorage.setItem('msg2',666)sessionStorage.setItem('person',JSON.stringify(p))}function saveData(){console.log(sessionStorage.getItem('msg'))console.log(sessionStorage.getItem('msg2'))const result = sessionStorage.getItem('person')console.log(JSON.parse(result))}function deleteData(){sessionStorage.removeItem('msg2')}function deleteAllData(){sessionStorage.clear}</script>
</body> 

七、组件自定义事件_绑定

在APP.vue中

通过父组件给子组件传递函数类型的props实现
<School :getSchoolName="getStudentName" />
通过父组件给子组件绑定一个自定义事件实现: 子给付传递数据(使用@或v-on)
<Student @yourname.once="getStudentName" />
通过父组件给子组件绑定一个自定义事件实现: 子给付传递数据(使用ref)
<Student ref="student"/>ref写法使用mounted钩子
<script>export default{name:"App",components:{School,Student},data(){...},methonds:{getSchoolName(name){console.log('App收到了学校名:',name)},getStudentName(name,...params){console.log('App收到了学生名')}},mounted(){this.$refs.student.$on('yourname',this.getStudentName)//绑定自定义事件this.$refs.student.$once('yourname',this.getStudentName)//绑定自定义事件(一次性)}}</script>

八、在组件Student.vue中解绑

<button @click="sendStudentName">把学生名给App
</button>
<script>
export default{name:'Student',data({...})
},methods:{sendStudentName(){//触发Student组件实例身上的yourname事件this.$emit('yourname',this.name,666,888,999)this.$emit('yourname')},unbind(){this.$off('yourname')//解绑一个自定义事件this.$off(['yourname','yourname'])//解绑多个自定义事件this.$off()//解绑所有自定义事件}} 
</script>

九、组件的自定义事件总结:

适用于子组件===>父组件

在组件后写原生标签属性需加上.native

<Student @click.native="dianwo()">点我
</Student>

触发自定义事件:this.$emit('atguigu',数据)

注意:通过this.$refs.xxx.$on('yourname',回调)绑定自定义事件,回调要么配置在methods中,要么用箭头函数,否则this指向该组件而不指向vm

十、全局事件总线(GlobalEventBus):任意组件间通信

1、安装全局事件总线

new Vue({.....beforeCreate(){Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm},.....
})

2、使用事件总线

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

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

提供数据:this.$bus.$emit('xxxx',数据)

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

十一、消息订阅与发布(pubsub)

导入库npm i pubsub.js

接收数据:

<script>//引入import pubsub from 'pubsub-js'export default {name:'School',data(){return{....}},mounted(){this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{console.log('有人发布了xxx消息,xxx消息的回调执行了',msgName,data)})},beforeDestroy(){pubsub.unsubscribe(this.pubId)}}
</script>

提供数据:

pubsub.publish('xxx',数据)

随后最好在beforeDestroy钩子中取消订阅

十二、nextTick

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

作用:在下一次DOM更新结束后执行器指定的回调

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

十三、Vue过度与动画

1、使用

元素进入的样式:

v-enter: 进入的起点

v-enter-active:进入过程中

v-enter-to:进入的终点

2.元素离开的样式:

v-leave:离开的起点

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

v-leave-to:离开的终点

2、使用 transition包裹要过度的元素并配置name属性

3、多个元素过度使用 <transition-group>,且指定key值

 <transition-group name="hello" appear><h1 v-show="isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">你也好啊</h1>
</transition-group>

使用animate.css

官网:animate.style

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group name="animate__animated animate__bounce"  appear enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">你好啊</h1><h1 v-show="isShow" key="2">你也好啊</h1></transition-group></div>
</template>
<script>
import 'animate.css'
export default{name:'Test',data() {return {isShow:true}},
}
</script>
<style scoped>h1{background-color:skyblue ;transition: 0.5s linear;}</style>

十四、配置代理

方法一:

在vue.config.js中添加如下配置:

devServer:{proxy:"http://localhost:5000"
}

1、优点:配置简单,请求资源直接发给前端即可

2、缺点:不能配置多个代理,不能灵活的控制请求是否走代理

3.工作方式:若按照上述配置代理(优先匹配前端资源)

方法二:

module.exports = {devServer:{proxy:{'/api1':{//匹配所有以'/api1'开头的请求路径target:'http://localhost:5000',changeOrigin:true,pathRewrite:{'^/api1s:':''}},'/api2':{//匹配所有以'/api1'开头的请求路径target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2:':''}},}}
}

1、优点:可以配置多个代理,且可以灵活的控制请求是否走代理

2、缺点:略微繁琐

十五、vue-resource

npm i vue-resource

import vueResource from 'vue-resource'
Vue.use(vueResource)

这篇关于Vue第三章脚手架之最全render函数、props、mixin混入、插件、浏览器本地存储、组件自定义事件_绑定、解绑、全局事件总线、消息订阅与发布、nextTick、Vue过度与动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/872838

相关文章

Linux进程CPU绑定优化与实践过程

《Linux进程CPU绑定优化与实践过程》Linux支持进程绑定至特定CPU核心,通过sched_setaffinity系统调用和taskset工具实现,优化缓存效率与上下文切换,提升多核计算性能,适... 目录1. 多核处理器及并行计算概念1.1 多核处理器架构概述1.2 并行计算的含义及重要性1.3 并

SpringBoot3.X 整合 MinIO 存储原生方案

《SpringBoot3.X整合MinIO存储原生方案》本文详细介绍了SpringBoot3.X整合MinIO的原生方案,从环境搭建到核心功能实现,涵盖了文件上传、下载、删除等常用操作,并补充了... 目录SpringBoot3.X整合MinIO存储原生方案:从环境搭建到实战开发一、前言:为什么选择MinI

Linux下进程的CPU配置与线程绑定过程

《Linux下进程的CPU配置与线程绑定过程》本文介绍Linux系统中基于进程和线程的CPU配置方法,通过taskset命令和pthread库调整亲和力,将进程/线程绑定到特定CPU核心以优化资源分配... 目录1 基于进程的CPU配置1.1 对CPU亲和力的配置1.2 绑定进程到指定CPU核上运行2 基于

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

MySQL中的锁机制详解之全局锁,表级锁,行级锁

《MySQL中的锁机制详解之全局锁,表级锁,行级锁》MySQL锁机制通过全局、表级、行级锁控制并发,保障数据一致性与隔离性,全局锁适用于全库备份,表级锁适合读多写少场景,行级锁(InnoDB)实现高并... 目录一、锁机制基础:从并发问题到锁分类1.1 并发访问的三大问题1.2 锁的核心作用1.3 锁粒度分

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

MySQL之InnoDB存储引擎中的索引用法及说明

《MySQL之InnoDB存储引擎中的索引用法及说明》:本文主要介绍MySQL之InnoDB存储引擎中的索引用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录1、背景2、准备3、正篇【1】存储用户记录的数据页【2】存储目录项记录的数据页【3】聚簇索引【4】二