0
点赞
收藏
分享

微信扫一扫

vscode vue2和vue3代码片段

小美人鱼失去的腿 2022-03-11 阅读 74
vue.jsnpm

**

vue2

**

{
	"Print to console": {
		"prefix": "sc",
		"body": [
			"<template>",
			"  <div>",
			"",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  data() {",
			"    return {",
			"",
			"    }",
			"  },",
			"  created() {",
			"",
			"  },",
			"  mouted() {",
			"",
			"  },",
			"  methods: {",
			"",
			"  },",
			"}",
			"</script>",
			"<style scoped>",
			"",
			"</style>"
		],
		"description": "Log output to console"
	}
}

**

vue3

**

{
    "Print to console": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script lang='ts'>",
            "import { reactive, toRefs,onBeforeMount, onMounted } from 'vue'",

            "export default {",
            "  name: '',",
            "  props: [],",
            "  setup() {",
            "    const state = reactive({})",
            "    onBeforeMount(() => {",
            "      console.log('2.组件挂载页面之前执行----onBeforeMount')",
            "    })",
            "    onMounted(() => {",
            "      console.log('3.-组件挂载到页面之后执行-------onMounted')",
            "    })",
            "    const refState = toRefs(state)",
            "    return {",
            "      ...refState",
            "    }",
            "  }",
            "}",
            "</script>",
            "<style scoped></style>"

        ],
        "description": "Log output to console"
    }
}
举报

相关推荐

0 条评论