vscode用户代码片段（vue2,vue3）

最新推荐文章于 2024-07-22 08:55:10 发布

Forevermoremo

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量614

点赞数

文章标签： vscode javascript vue.js

本文链接：https://blog.csdn.net/sunny123x/article/details/129624045

版权

vue2模板：

{
	"Print to console": {
		"prefix": "vue2",
		"body": [
			"<template>",
				"<div class=\"container\">", 
				
				"</div>",
			"</template>",
			"<script> ",
			"export default {",
				"name: '',",
				"data: function () {",
				"return {",
				" ",
				"}",
				"},",
				"watch: {",
				" ",
				"},",
				"components: {",
				" ",
				" },",
				"methods:{",
				" ",
				" },",
				"mounted: function () {",
				" ",
				"},",
				"beforeCreate: function () {",
				" ",
				"}",
			"}",
			"</script>",
			"<style scoped lang=\"scss\">", 
			" ",
			"</style>"
		],
		"description": "Log output to console"
	}
}

vue3模板：

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
				"<div class=\"container\">", 
				" ",
				"</div>",
            "</template>",
            "<script>",
			" ",
            "import { defineComponent, getCurrentInstance, onMounted, onBeforeMount, reactive, toRefs } from 'vue'", 
            "export default defineComponent({",
				"name:'',",
				"props: { },",
				"emits:[],",
				"components: {", 
				" ",
				"},",
				"setup(props, ctx){",
					"const { proxy } = getCurrentInstance();",
					"const state = reactive({",
					" ",
					"})",
					"onMounted(() => {",
					" ",
					"})",
					"onBeforeMount(() => {",
					" ",
					"})",
					" ",
					"return {",
						"...toRefs(state),",
						" ",
					"}",
				"}",
			"})",
            "</script>",
            "<style scoped lang=\"scss\">", 
			" ",
            "</style>",
			" "
			],
			"description": "A vue file template"
	}
}

vue3的setup语法糖：

{
	"Print to console": {
		"prefix": "v-setup",
		"body": [
		"<template>",
		"<div class=\"container\">", 
		" ",
		"</div>",
		"</template>",
		"<script setup>",
		"import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue'",
		"const { proxy } = getCurrentInstance();",
		"const emits = defineEmits([])",
		"const props = defineProps({",
		" ",
		"})",
		"const state = reactive({",
		" ",
		"})",

		"onBeforeMount(() => {",
		" ",
		"})",
		"onMounted(() => {",
		" ",
		"})",
		"defineExpose({ state })",
		" ",
		"</script> ",
		"<style lang=\"scss\" scoped>",
		" ",
		"</style>"
	],
	"description": "vue3"
	}
}

函数：

{
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "cfun",
		"body": [
			"const func$1 = () => {",
			"$0",
			"}"
		],
		"description": "Log output to console"
	}
}