我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
vue 异步组件
传统的vue组件切换,无非是Vue.component
定义一个组件,然后设置一个名字,再通过component
自定义html元素加上is属性去动态切换组件。
vue-cli的话,在components里面将import的组件激活,然后也是is属性配合component
自定义html元素进行切换。
那么异步组件的优点在哪里呢?
无非是组件会作为一个单独的js文件存在,需要时才被调用,这个特性再开发单页的时候最明显,他是会在打包后将异步组件单独生成一个js文件,在调用时下载并使用。
如何创建一个异步组件
Vue.component创建异步组件
这个方法适合script引入vue.js的那种方式,估计也用处不大,做个演示
Vue.component("async-hello", function (resolve) {
setTimeout(function () {
resolve({
template: `<div>async-hello</div>`
});
}, 1000)
});
将这个组件保存为js文件在vue.js文件引入后引入。
然后可以在后面的new Vue对象中使用该组件。
vue-cli 单页创建一个异步组件
首先我们创建一个hello.vue文件:
<template>
<div>hello word</div>
</template>
然后在需要引入的地方,通过components异步引入激活:
components: {
"async-hello": (resolve) => {
require(["@/components/hello"], resolve);
},
},
然后就可以使用自定义标签使用该组件
<async-hello/>
这样写的话默认是直接就加载了,但是组件会作为一个单独的js文件引入使用。
我们可以加点if判断
<template>
<div id="app">
<async-hello v-if="show" />
<button @click="toggle">加载</button>
</div>
</template>
<script>
export default {
data: () => ({
show: false,
}),
methods: {
toggle() {
this.show = !this.show;
},
},
components: {
"async-hello": (resolve) => {
require(["@/components/hello"], resolve);
},
},
};
</script>
这样我们可以通过f12查看网络资源,当我们点击加载后,可以看到一个js文件被下载。
并且打包后也会发现会多生成一个组件js文件。
promise写法
这个写法相对来说就简单很多了,好记的很,我目前所有的路由页都是使用的该方式
components: {
"async-hello": (resolve) => import("@/components/hello"),
},
效果相同
0
评论(2)

风水学知识
木灵鱼儿