非常实用的5个Vue高级实战技巧

更新日期: 2021-11-15阅读: 1k标签: 技巧

自动注册组件

我们平时可能这样引入注册组件。每次都得需要在头部引入,然后注册,最后在模板上使用。

<template>
<div id="app">
<HelloWorld msg="Welcome to Your vue.js App"/>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'App',
components: {
HelloWorld
}
}
</script>

那么,有没有更加方便快捷的方法呢?我们不妨这样。

创建一个名为globalRC.js文件,假设我们这里与组件平级,即存放在组件文件夹中。

目录结构如:

-src
--components
---component1.vue
---globalRC.js

globalRC.js:

import Vue from 'vue'

function changeStr (str){
return str.charAt(0).toUpperCase() + str.slice(1);
}

const requireComponent = require.context('./',false,/\.vue$/); // './'操作对象为当前目录

requireComponent.keys().forEach(element => {
const config = requireComponent(element);

const componentName = changeStr(
element.replace(/^\.\//,'').replace(/\.\w+$/,'')
)

Vue.component(componentName, config.default || config)
});

然后,我们需要在main.js文件中引入。

import './components/globalRC.js'

最后,我们只需要在模板直接使用就可以了。

<template>
<div id="app">
<Component1 />
</div>
</template>

<script>
export default {
name: 'App'
}
</script>
注意,require.context是webpack的一个api,所以,需要基于webpack环境才可以使用。

自动注册路由

这是我们之前注册路由的方式。如果路由文件多了,会显得特别臃肿。

import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "../views/home.vue";
import about from "../views/about.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
{
path:"/",
component: home
},
{
path: "/about",
component: about
}
]

var router = new VueRouter({
routes
})

export default router;

我们可以这样优化一下。

在路由文件夹下,这里假设是名为router文件夹下,创建一个routeModule.js文件。

目录结构如:

-src
--router
---index.js
---login.module.js
---routeModule.js

routeModule.js:

const routerList = [];

function importAll(r){
r.keys().forEach(element => {
routerList.push(r(element).default);
});
}

importAll(require.context('./',true,/\.module\.js/));// 这里自定义为.module.js 结尾的文件
export default routerList

然后,我们只需要创建对应的路由文件,如:login.module.js。

export default {
path:'/login',
name:'login',
component:()=>import('../views/login.vue')
}

最后,在路由配置文件index.js中引入routeModule.js文件即可,


import Vue from "vue";
import VueRouter from "vue-router";
import routerList from './routeModule.js'

Vue.use(VueRouter);

var router = new VueRouter({
routerList
})

export default router;
注意,require.context是webpack的一个API,所以,需要基于webpack环境才可以使用。

权限自定义指令

平常,我们可能会遇到按钮级别或者页面内操作权限的需求,我们可以写一个全局自定义指令。首先,可以在入口文件main.js文件中。

import Vue from 'vue'
import App from './App.vue'

function checkArray(key){
let arr = [1,2,3,4]; // 自定义权限列表
let index = arr.indexOf(key);
if(index>-1){
return true
}else{
return false
}
}

Vue.directive('auth-key',{
inserted(el,binding){
let displayKey = binding.value;
if(displayKey){
let hasPermission = checkArray(displayKey);
if(!hasPermission){
el.parentNode && el.parentNode.removeChild(el);
}
else{
throw new Error('需要key')
}
}
}
})

new Vue({
render: h => h(App),
}).$mount('#app')

在页面中使用。

<button v-auth-key="8">btn</button> 

render渲染函数

我们首先来看下这样一个例子,你会看到模板上特别多的条件判断。

<template>
<div>
<h1 v-if="level === 1"></h1>
<h2 v-else-if="level === 2"></h2>
<h3 v-else-if="level === 3"></h3>
<h4 v-else-if="level === 4"></h4>
</div>
</template>

怎么才能优化呢?接下来,我们可以使用render渲染函数。

Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 标签名称
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
})

局部引入第三方UI框架优化

我们经常使用UI框架,如果我们使用按需加载的话,需要每次都要注册使用一下。就像下面这样:

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/

new Vue({
el: '#app',
render: h => h(App)
});

我们可以这样优化一下,创建一个uIcompontents.js文件。

// 每次只需要在这添加组件即可
import { Button, Select } from 'element-ui';

const components = { Button, Select };

function install(Vue){
Object.keys(components).forEach(key => Vue.use(components[key]))
}

export default { install }

然后,在main.js文件中引入。

import Vue from 'vue'
import App from './App.vue';

import uIcompontents from "./uIcompontents.js";
Vue.use(uIcompontents);

new Vue({
el: '#app',
render: h => h(App)
});

链接: https://fly63.com/article/detial/10801

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!