Vue开发中的一些常见套路和技巧
属性排放
export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 }
管理请求加载状态
async beforeMount(){
// 开始加载
this.loading = true
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {
// 停止加载
this.loading = false
}
}
Proxy跨域
proxy: {
"/api": {
target: 'http://.......',
changeOrigin: true, // 是否改变域名
ws: true, // socket
pathRewrite: {
// 路径重写
"/api": '' // 对拼接内容进行重写
}
},
....
}
对developer和build的打包进行不同配置
大部分开发者都喜欢将Vue的config写在一个文件中,看起来是没有问题,但是随着环境的变化,项目优化,WebPack插件,等等具有针对性的配置进来后,就会显得稍微杂乱了,这个时候就可以考虑做单独的配置,通过process.dev分别对不同的环境进行一个config的引入,下面贴出我的配置方式。我在项目根目录下新建了一个config目录,里面将公共的方法进行拆包成一个public.js其他的根据生产环境和线下环境进行一个区分的编译。
-- config
--- dev.js
--- build.js
--- public.js
vue.config.js # 代码 vue.config.js
const devConfig = require('./config/dev')
const buildConfig = require('./config/build')
module.exports = process.env.NODE_ENV === 'development' ? devConfig : buildConfig
计算属性实用
// 计算属性
computed: {
filterList: function () {
return this.showData.filter(function (data) {
// 返回需要显示的数据
return data.isShow
})
} // DOM <ul>
<li v-for="item in filterList" :key="item.id">
{{ item.name }}
</li>
</ul>
集合方法
tableFactory(action) {
switch (action) {
case 'update':
...
break; case 'create':
...
break; case 'delete':
...
break; default:
// ...默认获取列表
break;
}
}
保持对Props的数据验证规范
props: {
test: {
type: String,
default: ''
},
test2: {
type: [Number, String],
default: 1
},
test3: {
required: false,
type: Object
}
}
组件名称使用
大多时候,我们在组件中定义的name都是作为在template模板中使用的名称,这里建议使用驼峰命名,因为在vue中对驼峰命名做出了很好的解析。
// GanMessage.vue组件
export default {
name: 'GanMessage'
.....
} // 引入后使用
components: {
[GanMessage.name]: GanMessage
} // 模板中使用
<template>
<gan-message/>
</template>
模板引擎调试
大多数时候,在template上面写一些逻辑非常难调试,都是直接看效果的,对于一些值来说,变得无法掌控,所以说在开发环境中,我都会在原型上挂一个全局的console.log方法进行调试
vue.prototype.$logs = window.console.log; // 使用
<template>
{{$logs('1111')}}
</template>
获取数据的生命周期
对于数据的获取一直都是又存在争议的,大部分同学都是在created中获取的吧,我个人是在beforeMount中进行后台数据请求获取的
async beforeMount(){
const data = await getUserInfo();
}
使用async 和 await
大多数时候,在使用Promise的时候都是通过.then,.catch,.finally来进行处理的。但其实我更加的推荐使用async异步函数的方式来进行Pormise的处理,我们只需要进行数据的获取就好了,通过try异常捕获可以快速的对错误进行一个好的排查和抛出。参考上面获取数据的生命周期可以看到
async beforeMount(){
try {
const data = await getUserInfo()
} catch (error) {
console.log(error)
} finally {}
}
watch
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep:true
},
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
// deep: true
} }
在自定义事件中,该值是从其子组件中捕获的值
<!-- Child -->
<template>
<input type="text" @input="$emit('custom-event', 'hello')" />
</template> <!-- Parent -->
<template>
<Child @custom-event="handleCustomevent" />
</template> <script>
export default {
methods: {
handleCustomevent (value) {
console.log(value) // hello
}
}
}
</script>
Vue开发中的一些常见套路和技巧的更多相关文章
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- vue开发中的"骚操作"
前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标 ...
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现? asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
项目开发中的一些注意事项以及技巧总结 1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...
- (转)webpack从零开始第6课:在Vue开发中使用webpack
vue官方已经写好一个vue-webpack模板vue_cli,原本自己写一个,发现官方写得已经够好了,自己写显得有点多余,但为了让大家熟悉webpack,决定还是一步一步从0开始写,但源文件就直接拷 ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- vue开发中v-for在Eslint的规则检查下出现:Elements in iteration expect to have 'v-bind:key' directives
在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' direct ...
- vue开发中利用正则限制input框的输入(手机号、非0开头的正整数等)
我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...
- vue 开发中的常见问题
(一)eslint静态检查 在大家用vue-cli创建工程的时候,会有一项,使用使用eslint,如果选择了y,那么工程就会安装并启用eslint. 这里列举一下常见的错误: 1.多余的分号 2.定义 ...
- Vue开发中的移动端适配(px转换成vw)
1.项目根目录下,创建 .postcssrc.js 文件. 2.安装插件. -D (开发依赖) postcss-import postcss-url cssnano-preset-advanced - ...
随机推荐
- Spring mvc与springboot
org.springframework.boot.autoconfigure.web.servlet.WebMvcAutoConfiguration: viewResolver 类路径文件 把类路径下 ...
- mq checkpoint文件
记录comitlog,consumeQueue,Index文件的刷盘时间点,文件固定长度4k,其中只用该文件的24个字节,其存储格式: 8字节physicMsgtimestamp+8字节logicsM ...
- Spring Boot 内置定时任务
启用定时任务 @SpringBootApplication @EnableScheduling // 启动类添加 @EnableScheduling 注解 public class ScheduleD ...
- day7(redis的pipline使用)
1.pipeline原理 redis基本语法:https://www.cnblogs.com/xiaonq/p/7919111.html redis四篇:https://www.cnblogs.com ...
- java并发编程实战《七》安全性、活跃性以及性能问题
安全性.活跃性以及性能问题 安全性问题 那什么是线程安全呢?其实本质上就是正确性,而正确性的含义就是程序按照我们期望的执行,不要让我们感到意外. 存在共享数据并且该数据会发生变化,通俗地讲就是有多个线 ...
- PyQt(Python+Qt)学习随笔:QTabWidget选项卡部件概述和属性介绍
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 TabWidget选项卡组件是一个带一到多个选项卡栏和对应页面区域的组件,对应类QTabW ...
- [BJDCTF2020]Mark loves cat && [BJDCTF 2nd]简单注入 && [BJDCTF2020]The mystery of ip
[BJDCTF2020]Mark loves cat 源码泄露 使用GitHack.py下载源码 下载之后对源代码进行审计 flag.php代码为: <?php $flag = file_get ...
- flask实现分类搜索的小测试
最新学长要求实现一个搜索的功能呢,也费了一点功夫.这个案例也没有学长写的好,比学长的实现差了不少,待我仔细研究习再发出相应代码 项目要求,搜索语法如下: titile: xxx #搜索titile的所 ...
- .Net Core ABP应用如何在阿里云Linux Docker中开启Https
.Net Core应用开启Https本身就有很多种方式:1.代码配置2.环境变量3.反向代理 这里主要记录下阿里云的ECS,加阿里云免费的SSL证书,通过程序代码,如何进行配置. 首先从阿里云下载证书 ...
- 使用JMeter进行负载测试快速入门
相信JMeter是很多测试人员必备技能之一,今天简单讲一下开发人员如何使用JMeter进行简单的压力测试快速入门. 安装JMeter Jmter官方地址 按提示下载JMeter,然后直接解压就可以用了 ...