本文主要是介绍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过度与动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
