首页 > 其他分享 >vscode 设置vue的用户片段-- vue文件 httpget httppost 请求 模板

vscode 设置vue的用户片段-- vue文件 httpget httppost 请求 模板

时间:2022-10-24 22:39:10浏览次数:73  
标签:生命周期 http vscode prefix vue httppost 组件 data


   文件 -> 首选项->用户片段

vscode 设置vue的用户片段-- vue文件 httpget httppost 请求 模板_vue.js

{
"生成vue模板": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
},
"http-get请求": {
"prefix": "httpget",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'get',",
"params: this.\\$http.adornParams({})",
"}).then(({ data }) => {",
"})"
],
"description": "httpGET请求"
},
"http-post请求": {
"prefix": "httppost",
"body": [
"this.\\$http({",
"url: this.\\$http.adornUrl(''),",
"method: 'post',",
"data: this.\\$http.adornData(data, false)",
"}).then(({ data }) => { });"
],
"description": "httpPOST请求"
}
}

 

标签:生命周期,http,vscode,prefix,vue,httppost,组件,data
From: https://blog.51cto.com/u_4981212/5791460

相关文章

  • Vue的父传子与子传父
    Vue的父传子与子传父子传父要点:通过自定义事件触发父级方法来进行修改父级数据总结:1.在父组件中定义修改数据方法2.在模板中绑定触发自定义事件的事件3.调用子组件......
  • 【2022.10.24】Vue基础学习(1)
    内容概要1.前端发展介绍2.Vue的快速使用3.差值语法4.指令系统之文本指令5.指令系统之事件指令6.指令系统之属性指令内容详细1前端发展介绍#HTML(5)、CSS(......
  • Vue学习-01
    Vue入门零:前端目前形式前端的发展史HTML(5)、css(3)、JavaScript(ESS、ES6):编写一个个的页面——给后端(PHP、Python、Go、Java)——后端嵌入模板语法——后端渲染完数据——返......
  • vue 笔记12 vue-router路由2 导航守卫
              Vue被创建,挂载,更新时调用函数。      网页标题                    登录......
  • 【2022-10-24】前端Vue框架(一)
    前端发展介绍1.HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端-......
  • Vue学习(一)
    Vue学习(一)笔记记录学习B站狂神说Vuehttps://www.bilibili.com/video/BV18E411a7mC?p=1&vd_source=6800c7920d132926607a6fa073817ebb1、MVVM1.1、什么是MVVMMVVM(Mo......
  • 【转】VUE 组件注册使用示例
    首先是main.jsimport{createApp}from'vue'importAppfrom'./App.vue'import'./index.css'importSwiperfrom'./components/01.globalReg/Swiper.vue'imp......
  • 安装、更新、卸载vueCli
    一、全局安装vue-cli,在cmd中输入命令:npminstall--globalvue-cli;安装指定版本:npminstall-g@vue/[email protected]二、如果原来已经安装了vue-cli的话需要先卸载原来的安装......
  • vue中keep-alive的使用
    vue中keep-alive的使用什么是keep-alivekeep-alive是vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和transition相似,keep-alive是一个抽象组......
  • [转] VUE 组件的构成
    一个基本的vue组件结构类似这样:<template><h1>这是App.vue根组件</h1><h3>abc--{{username}}</h3><hr/><p>count值是:{{count}}</p><button@c......