VScode設置用戶代碼片段快捷方式


一、創建步驟
a、

b、

二、創建模板

                          {
"生成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請求"
}
  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM