Vue
Vue
易山易酒易诗
这个作者很懒,什么都没留下…
展开
-
基于VUE的可隐藏的顶部菜单栏组件
效果图:<template> <nav class="menu"> <a><div>HOME</div></a> <ul> <li>HOME11111</li> <li>HOME22222</li> <li>HOME33333</li> </ul> <a>原创 2022-04-20 15:08:20 · 1842 阅读 · 1 评论 -
Vue中computed和watch区别
watch: { num: { handler(newNum, oldNum) { console.log(newNum, oldNum); }, immediate: true, deep: true }}computed: { numA: function(){return this.num * 2},}1、computed有缓存,watch没有。2、computed,计算属性,依赖其他属性。watch用来监听其他属性。3、comp原创 2021-08-16 16:02:17 · 201 阅读 · 0 评论 -
Vue嵌套组件的生命周期函数的执行顺序
生命周期函数子组件在父组件进行DOM创建时,开始进行实例化,并且父组件需要等待子组件完成挂载后,才可以完成DOM的渲染,即完成挂载。同理,父组件销毁时,需要等待子组件销毁完毕后,才会销毁。...原创 2021-08-16 15:28:36 · 326 阅读 · 0 评论 -
Vue的生命周期钩子函数
1、beforeCreate()在调用beforeCreate()函数前,vue主要做了vm实例一些属性的定义和createElement()方法的封装。此时函数的this指向vm,但还获取不到data中的数据、methods中的方法、watch中的事件,想要在这个阶段获取data中的数据的话,可以通过 $options获取父组件的data,或者通过 $nextTick或者setTimeout等异步方法,等待实例vm完成data的配置后获取。beforeCreate() { console.log(原创 2021-08-16 15:09:35 · 395 阅读 · 0 评论 -
Vue中v-show和v-if的区别
<template> <div> <button v-show="num < 10" @click="add">+show</button> <button v-if="num < 10" @click="add">+if</button> <p>{{num}}</p> <button v-show="num > 0" @click="reduce"&g原创 2021-08-14 20:55:33 · 106 阅读 · 0 评论 -
Vue中组件间的通讯方式
1、$emit/props(父子组件)在父组件中,引用子组件,并将子组件需要的name属性传递过去。<Son :name="name"></Son>在子组件中通过props进行接收。父组件传过来的值是不允许修改的,想要修改必须通知父组件,让父组件来改props: ['name']在子组件中通过$emit方法,来触发一个名为‘send’的方法,并将参数传递过去。send() { this.$emit('send', '收到名字');}在父组件中将‘send’绑原创 2021-08-14 17:05:46 · 542 阅读 · 1 评论