Visual Studio Code Vue代码片段总览

文章目录

- 一、模板篇
- - 1. 初始化.vue 文件模板
  - 2. template 作用域插槽模板
- 二、响应提示篇
- - 1. error 响应！200提示
  - 2. success 响应 200提示
- 三、axios请求篇
- - 1. axios get 请求
  - 2. axios post 请求
  - 3. axios put 请求
  - 4. axios delete请求
- 四、事件篇
- - 4.1. @click Event
  - 4.2.
  - 4.3. 页面跳转 Event
  - 4.4. 重置清空input Event
  - 4.5. 校验通用 Event
  - 4.6. 添加预校验
- 五、日志输出篇
- - 5.1. cons打印输出
- 总览

代码片段设置
【设置】-【用户代码片段】-【xxx.code.snippets】

默认xxx.code.snippets文件内容：
{}

在这里插入图片描述

一、模板篇

1. 初始化.vue 文件模板

"Vue init template": {"prefix": "tss","body": ["<!-- 模板区域 -->","<template>","<div>","<!-- 模板内容 -->","","</div>","</template>","","<!-- 行为区域 -->","<script>","export default {","  // 数据存放区域","  data () {","    return {","    }","  },","  // 生命周期函数","  created () {","  },","  // 方法函数","  methods: {","  },","  // 计算属性","  computed: {","  }","}","</script>","<!-- 样式区域 -->","<style lang='less' scoped>","","</style>",""],"description": "Vue init template"}

2. template 作用域插槽模板

	"template 作用域插槽模板": {"prefix": "tsc","body": ["<template slot-scope=\"scope\">","","</template>",],"description": "template 作用域插槽模板"}

释义：需要安装2个开发依赖
在这里插入图片描述

二、响应提示篇

1. error 响应！200提示

"err200 消息提示": {"prefix": "err2","body": [" if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "err200 消息提示"}

2. success 响应 200提示

"success 消息提示": {"prefix": "sucmsg","body": ["this.\\$message.success('成功')"],"description": "success 消息提示"}

三、axios请求篇

1. axios get 请求

"axios get请求": {"prefix": "aget","body": ["const { data:res } = await this.\\$http.get('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios get请求"}

2. axios post 请求

axios post请求": {"prefix": "apost","body": ["const { data:res } = await this.\\$http.post('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios post请求"}

3. axios put 请求

axios put请求": {"prefix": "apost","body": ["const { data:res } = await this.\\$http.put('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios put请求"}

4. axios delete请求

axios delete请求": {"prefix": "apost","body": ["const { data:res } = await this.\\$http.delete('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios delete请求"}

四、事件篇

4.1. @click Event

"@click 事件": {"prefix": "@cli","body": ["@click=\"\""],"description": "打印输出"}

4.2.

确认删除 Event

"删除确认 事件": {"prefix": "cdel","body": ["async removeById (id) {","  const confirmResult = await this.\\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {","    confirmButtonText: '确定',","    cancelButtonText: '取消',","    type: 'warning'","  }).catch(err => err)","  if (confirmResult !== 'confirm') {","    return this.\\$message.info('已经取消了删除！')","  }","  const { data: res } = await this.\\$http.delete("," `goods/\\${id}`)","  if (res.meta.status !== 200) {","    return this.\\$message.error('删除xx失败')","  }","  this.\\$message.success('删除xx成功！')","  this.getXXXlist()","}",],"description": "删除确认 事件"}

4.3. 页面跳转 Event

"页面跳转 事件": {"prefix": "$ro","body": ["this.$router.push('/xxpage')",],"description": "页面跳转 事件"}

4.4. 重置清空input Event

"取消按钮 清空input 事件": {"prefix": "$refs","body": ["this.\\$refs.xxxFormRef.resetFields()",],"description": "取消按钮 清空input 事件"}

4.5. 校验通用 Event

"校验规则 事件": {"prefix": "rq","body": ["name: [","  { required: true, message: '请输入活动名称', trigger: 'blur' },","  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }","]",],"description": "校验规则 事件"}

4.6. 添加预校验

"添加预校验": {"prefix": "arv","body": ["addUser () {","  this.\\$refs.addFormRef.validate(async valid => {","  // 验证不通过","  if (!valid) return","  // 可以发起添加用户的网络请求","   const { data: res } = await this.\\$http.post('xxxurl', this.addForm)","  // 返回响应判断"," if (res.meta.status !== 201) {","  this.\\$message.error('添加用户失败！')","  }","   this.\\$message.success('添加用户成功！')","  // 隐藏添加用户的对话框","  this.addDialogVisible = false","  // 重新获取用户列表数据","  this.getUserList()","   })","}",],"description": "添加用户预校验"}

五、日志输出篇

5.1. cons打印输出

"cons打印输出": {"prefix": "clog","body": ["console.log()"],"description": "cons打印输出"}

总览

{"Vue init template": {"prefix": "tss","body": ["<!-- 模板区域 -->","<template>","<div>","<!-- 模板内容 -->","","</div>","</template>","","<!-- 行为区域 -->","<script>","export default {","  // 数据存放区域","  data () {","    return {","    }","  },","  // 生命周期函数","  created () {","  },","  // 方法函数","  methods: {","  },","  // 计算属性","  computed: {","  }","}","</script>","<!-- 样式区域 -->","<style lang='less' scoped>","","</style>",""],"description": "Vue init template"},"error消息提示": {"prefix": "errmsg","body": ["return this.\\$message.error('失败')"],"description": "error消息提示"},"err200 消息提示": {"prefix": "err2","body": [" if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "err200 消息提示"},"template 作用域插槽模板": {"prefix": "tsc","body": ["<template slot-scope=\"scope\">","","</template>",],"description": "template 作用域插槽模板"},"success 消息提示": {"prefix": "sucmsg","body": ["this.\\$message.success('成功')"],"description": "success 消息提示"},"axios get请求": {"prefix": "aget","body": ["const { data:res } = await this.\\$http.get('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios get请求"},"axios post请求": {"prefix": "apost","body": ["const { data:res } = await this.\\$http.post('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios post请求"},"axios delete请求": {"prefix": "adel","body": ["const { data:res } = await this.\\$http.delete('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios delete请求"},"axios put请求": {"prefix": "aput","body": ["const { data:res } = await this.\\$http.put('')"," if (res.meta.status !== 200) {","   return this.\\$message.error('失败')"," }"," this.\\$message.success('成功！')"],"description": "axios put请求"},"cons打印输出": {"prefix": "clog","body": ["console.log()"],"description": "cons打印输出"},"@click 事件": {"prefix": "@cli","body": ["@click=\"\""],"description": "打印输出"},"删除确认 事件": {"prefix": "cdel","body": ["async removeById (id) {","  const confirmResult = await this.\\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {","    confirmButtonText: '确定',","    cancelButtonText: '取消',","    type: 'warning'","  }).catch(err => err)","  if (confirmResult !== 'confirm') {","    return this.\\$message.info('已经取消了删除！')","  }","  const { data: res } = await this.\\$http.delete("," `goods/\\${id}`)","  if (res.meta.status !== 200) {","    return this.\\$message.error('删除xx失败')","  }","  this.\\$message.success('删除xx成功！')","  this.getXXXlist()","}",],"description": "删除确认 事件"},"页面跳转 事件": {"prefix": "$ro","body": ["this.$router.push('/xxpage')",],"description": "页面跳转 事件"},"取消按钮 清空input 事件": {"prefix": "$refs","body": ["this.\\$refs.xxxFormRef.resetFields()",],"description": "取消按钮 清空input 事件"},"校验规则 事件": {"prefix": "rv","body": ["name: [","  { required: true, message: '请输入活动名称', trigger: 'blur' },","  { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }","]",],"description": "校验规则 事件"},"添加预校验": {"prefix": "arv","body": ["addUser () {","  this.\\$refs.addFormRef.validate(async valid => {","  // 验证不通过","  if (!valid) return","  // 可以发起添加用户的网络请求","   const { data: res } = await this.\\$http.post('xxxurl', this.addForm)","  // 返回响应判断"," if (res.meta.status !== 201) {","  this.\\$message.error('添加用户失败！')","  }","   this.\\$message.success('添加用户成功！')","  // 隐藏添加用户的对话框","  this.addDialogVisible = false","  // 重新获取用户列表数据","  this.getUserList()","   })","}",],"description": "添加用户预校验"}
}
}