得心应用的Vue高级技巧---vue中文社区
1,require.context()
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
语法:
/**
* directory {String} -说明需要检索的目录
* useSubdirectories {Boolean} -是否遍历文件的子目录
* regExp {RegExp} - 匹配文件的正则
**/
require.context(directory, useSubdirectories = false, regExp = /^.//);
场景:1,开发vue项目的时候一般都会开发很多自定义的全局组件,
一般写法是:这样的话如果我们封装了50个组件,那么就意味我们要写50个相同的组件引入语句,50个注册语句,大量的重复代码:
如果使用require.context那么就可以是下面这个样子,这样我们可以无限的在components文件下添加组件,自动注册成全局的
const files = require.context('@/components', true, /^\.\/(\w*\/)+index\.(vue|js)$/)
export default {
install (Vue) {
files.keys().forEach((path) => {
const type = this.typeof(path, files(path))
// 针对3中不同的组件设计模式提供不同的组件注册策略
switch (type) {
case 'component':
this.installComonent(Vue, files(path));
break;
case 'componentGroup':
this.instalGroupComponent(Vue, files(path));
break;
case 'serveApi':
this.installServeApi(Vue, files(path));
break;
}
})
},
typeof (path, file) {
if (path.lastIndexOf('.js') === -1) {
return 'component'
} else {
if (file.default.install) {
return 'serveApi'
} else {
return 'componentGroup'
}
}
},
instalGroupComponent (Vue, file) {
const components = file.default
Object.keys(components).forEach((name) => {
Vue.component('Nb'+name, components[name])
})
},
installComonent (Vue, file) {
const options = file.default
const name = options.name
Vue.component('Nb'+name, options)
},
installServeApi (Vue, file) {
Vue.use(file.default)
}
}
2,开发一个svg图标组件,可能需要很多svg文件,需要通过webpack打包,如果全部一个一个引入的话,会比较麻烦,如果使用context api的话可以直接读取文件夹下的所有svg图标
2,watch
场景:
1,立即执行表格初始进来需要调查询接口 fetchList(),然后筛选条件的值发生改变会重新查询
created(){
this.fetchList()
},
watch: {
'filters.type' () {
this.fetchList()
}
}
可以直接利用 watch 的immediate和handler属性简写
watch: {
'filters.type': {
handler: 'getList',
immediate: true
}
}
2,深度监听,有时候我们可能需要监听整个对象,还是上面那个例子,上面我们针对一个对象中的某个属性进行监听,但是这个对象中有很多属性,任何一个属性的改变我们都需要重新发起请求,那么我们可以利用watch的deep属性进行深度监听,也就是监听复杂的数据类型
watch:{
filters: {
handler(newVal,oldVal){
this.getList()
},
deep:true,
immediate: true
}
}
3,mixins
有些组件有些重复的 js 逻辑,比如我们常用的上啦加载更多,而上啦触底事件就是我们每个需要上啦加载功能页面都需要重复去写的逻辑,这部分东西我们都可以使用mixins来实现
4,Vue.nextTick
2.1.0 新增 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
这个api的使用场景主要是为替代updated生命周期,有时候我们可能需要在数据更新后操作新的dom,但是updated生命周期是更新后执行,但是无法确定是那个属性的改变触发的更新,而nextTick是可以写在某个属性改变的后面,这么我们就可以知道是那个属性的改变了,功能其实和react,setState函数的第二个参数
4, Vue.filter 全局过滤器
过滤器的目的主要为了对数据格式进行转换(银行卡号格式化,货币格式化,日期格式化,...)
那么我用computed计算属性也可以呀,为什么要用filter,答案就是computed不能接受参数只能针对某一个vue内部属性进行转换,而filter可以接受参数
场景:时间戳转化成年月日这是一个公共方法,所以可以抽离成过滤器使用
// 使用
// 在双花括号中
{{ message | capitalize }}
// 在 `v-bind` 中
<div v-bind:id="rawId | formatId"></div>
// 全局注册
Vue.filter('stampToYYMMDD', (value) =>{
// 处理逻辑
})
// 局部注册
filters: {
stampToYYMMDD: (value)=> {
// 处理逻辑
}
}
// 多个过滤器全局注册
// /src/common/filters.js
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')
export { dateServer }
// /src/main.js
import * as custom from './common/filters/custom'
Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))
4, css 局部样式
Vue中style标签的scoped属性表示它的样式只作用于当前模块,是样式私有化.
渲染的规则/原理:给HTML的DOM节点添加一个 不重复的data属性 来表示 唯一性在对应的 CSS选择器 末尾添加一个当前组件的 data属性选择器来私有化样式
问题:使用了scoped属性后,我们组件内部的样式无法在外部被控制,(怎么就是改不了样式,... 我要疯了咋没反应)
解决方案:deep属性
.result-tab /deep/ {
.nav-bar {
a {
flex: initial;
height: 50px;
font-size: 36px;
margin-left: 40px;
line-height: 100px;
height: auto;
}
}
.result-content {
padding: 0 40px;
}
}
得心应用的Vue高级技巧---vue中文社区的更多相关文章
- 如何在 vue 中添加权限控制管理?---vue中文社区
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue学习:vue+webpack的快速使用指南(新手向)
一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...
- Vue 项目 Vue + restfulframework
Vue 项目 Vue + restfulframework 实现登录认证 - django views class MyResponse(): def __init__(self): self.sta ...
- 【vue】vue +element 搭建项目,组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- vue的.vue文件是怎么run起来的(vue-loader)
vue的.vue文件是怎么run起来的(vue-loader) 引子:vue的.vue文件是怎么跑起来的? 答:通过vue-loader,解析.vue文件,在webpack解析,拆解vue组件 1.v ...
- vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤
通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...
随机推荐
- C#反射与特性(九):全网最全-解析反射
目录 1,判断类型 1.1 类和委托 1.2 值类型 1.3 接口 1.4 数组 2, 类型成员 2.1 类 2.2 委托 2.3 接口 [微信平台,此文仅授权<NCC 开源社区>订阅号发 ...
- [ZJOI2007]报表统计(splay,堆)
[ZJOI2007]报表统计(luogu) Description 题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. ...
- Shell之信号捕获
前言 当我们在运行某一段代码的时候,希望有类似事物一样的操作,要么成功,要么失败:一般的shell脚本都是自上而下,从左之后运行,碰到异常信号就会出错,从而终止脚本的运行,这个时候脚本可能运行到某一处 ...
- SpringBoot高级篇Ⅸ --- 热部署与监控管理
一.热部署 在开发中我们修改一个Java文件后想看到效果不得不重启应用,这导致大量时间花费,我们不希望重启应用的情况下,程序可以自动部署(热部署). 1.1 模板引擎 在SpringBoot中开发情况 ...
- List容器排序方法的使用
今天在做任务的时候需要对已经存到list容器里的对象数组进行排序,需要根据 其中的一个属性进行排序,最初是根据一个利用冒泡排序的算法进行处理的后来上网查了一下对于list容器进行排序时有自带的方法.所 ...
- 删除我的电脑wps、百度网盘图标
删除我的电脑wps.百度网盘图标 删除下面子项 输入"计算机\HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Expl ...
- C# 接口和继承
转:https://www.cnblogs.com/songhe123/p/9558545.html 接口是方法的抽象,如果不同的类有同样的方法,那么就应该考虑使用接口. 例1: using Syst ...
- Codeforces_731_C
http://codeforces.com/problemset/problem/731/C 并查集,然后找每个集合里颜色的最大数量,求集合中元素数量-这个最大数量,最后总数相加即答案. #inclu ...
- Jdk14 都要出了,Jdk9 的新特性还不了解一下?
Java 9 中最大的亮点是 Java 平台模块化的引入,以及模块化 JDK.但是 Java 9 还有很多其他新功能,这篇文字会将重点介绍开发人员特别感兴趣的几种功能. 这篇文章也是 Java 新特性 ...
- SpringBoot、Spring MVC报错:Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]
出现问题的原因: jdbc配置不正确 解决方案: 1.检查是否已添加数据库驱动jar包 2.检查数据库服务是否启动 3.检查数据库配置文件 主要为:dialect,driver_class,url,u ...