得心应用的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目录重整 在项 ...
随机推荐
- 数据库及ORM之Mysql
1. 数据库介绍 1.1什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可 ...
- linux-->yii2报yii\db\Exception错
linux 中yii2 yii\db\Exception报错 报错显示:Database Exception – yii\db\Exception SQLSTATE[HY000] [2002] No ...
- php--->php 缓冲区 buffer 原理
php 缓冲区 buffer 原理 1.缓冲流程 从php脚本echo(print.print_r...)内容之后,是如何显示给用户的呢,下面看看流程 echo.print => php out ...
- java实现字符串翻转
public class StringReverse { /*一共写了三个函数func1 func2 func3 * 时间: 2019年9月12日9:00 * func1用的反向输出到一个新的字符串中 ...
- 网络流(最大流-Dinic算法)
摘自https://www.cnblogs.com/SYCstudio/p/7260613.html 网络流定义 在图论中,网络流(Network flow)是指在一个每条边都有容量(Capacity ...
- git上传本地代码到远程失败
出现这种错误的原因是由于我不小心勾选了这个
- ROS机器人之话题(一)
将消息发布到话题上 首先建立一个basic包(名称自己定)其命令为: 1.创建功能包,应用catkin_create_pkg命令 cd ~/catkin_ws/src #切换到代码空间,也 ...
- 练习:等待用户输入input()
等待用户输入 执行下面的程序在按回车键后就会等待用户输入: 实例(Python 3.0+) #!/usr/bin/python3 input("\n\n按下 enter 键后退出." ...
- WeChall_Training: ASCII (Training, Encoding)
In a computer, you can only work with numbers.In this challenge you have to decode the following mes ...
- Burpsuite--安装和环境配置
1.引子 Burpsuite是一款安全人员常用的工具.在渗透测试中,我们使用Burp Suite将使得测试工作变得更加容易和方便,即使在不需要娴熟的技巧的情况下,只有我们熟悉Burp Suite的使用 ...