得心应用的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目录重整 在项 ...
随机推荐
- Java多线程,对锁机制的进一步分析
1 可重入锁 可重入锁,也叫递归锁.它有两层含义,第一,当一个线程在外层函数得到可重入锁后,能直接递归地调用该函数,第二,同一线程在外层函数获得可重入锁后,内层函数可以直接获取该锁对应其它代码的控制权 ...
- ThreeJS 物理材质shader源码分析(像素着色器)
再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ 像素着色器(meshphysical_frag.glsl) #define PHYSICAL uniform ve ...
- flask中使用SQLAlchemy操作mysql的一些注意事项和坑
一 ImportError: cannot import name 'db' 由于app最后才加载,所以其他文件,比如models.py不能从app.py导入任何变量, 要使用db可以先定义一个,之后 ...
- 马尔科夫随机场(MRF)及其在图像降噪中的matlab实现
(Markov Random Field)马尔科夫随机场,本质上是一种概率无向图模型 下面从概率图模型说起,主要参考PR&ML 第八章 Graphical Model (图模型) 定义:A g ...
- vim 实用快捷键
删除当前行:dd 删除上一行:dj 删除下一行:dk 拷贝当前行:yy 交换当前行和其下一行 交换当前字符和其后的一个字符 剪切当前字符:x 剪切当前光标开始向后三个字符:3x 撤销最近一次修改:u ...
- js的三种输出语句,以及html的运行循序
js最常见的三种输出语句 1.console.log()这个语句是在浏览器控制台输出的.进入网页点击f12可查看 2.alert()弹出一个对话框, 3.document.write这个语句是在页面输 ...
- ROS机器人之动作(一)
前面我们探讨了ros的两种通信方式,话题和服务,服务机制常用于同步的请求/响应交互方式. 话题则是单工通信,尤其是接收方有多时(比如传感器数据流),然而,当需要完成的任务比较复杂时, 服务和话题都不是 ...
- QT5如何设置QLabel中字体的颜色
修改了wd的文章: 如何使用Qt5,设置QLabel中字体的颜色. 大致有几种做法: 一是使用setPalette()方法: 二是使用样式表: 三是可以使用QStyle: 四是可以在其中使用一些简单的 ...
- C++ traits技法的一点理解
为了更好的理解traits技法.我们一步一步的深入.先从实际写代码的过程中我们遇到诸如下面伪码说起. template< typename T,typename B> void (T a, ...
- [python之路]变量和字符编码
变量和字符编码 #变量##声明变量```#_*_coding:utf-8_*_ name = "Tom"```上述代码声明了一个变量,变量名为: name,变量name的值为:&q ...