文章目錄

• • 一、模板篇
  • • 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": "添加用戶預校驗"} } }

總結

以上是生活随笔為你收集整理的Visual Studio Code Vue代码片段 总览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。