vue2版本
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"export default {",
" // 组件名称",
" name: 'demo',",
" // 组件参数 接收来自父组件的数据",
" props: {},",
" // 局部注册的组件",
" components: {},",
" // 组件状态值",
" data () {",
" return {}",
" },",
" // 计算属性",
" computed: {},",
" // 侦听器",
" watch: {},",
" // 组件方法",
" methods: {},",
" // 以下是生命周期钩子 注：没用到的钩子请自行删除",
" /**",
" * 在实例初始化之后，组件属性计算之前，如data属性等",
" */",
" beforeCreate () {",
" },",
" /**",
" * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在",
" */",
" created () {",
" },",
" /**",
" * 在挂载开始之前被调用：相关的 render 函数首次被调用。",
" */",
" beforeMount () {",
" },",
" /**",
" * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。",
" * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。",
" */",
" mounted () {",
" },",
" /**",
" * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。",
" * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。",
" */",
" beforeUpdate () {",
" },",
" /**",
" * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。",
" * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。",
" */",
" updated () {",
" },",
" /**",
" * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效",
" */",
" activated () {",
" },",
" /**",
" * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效",
" */",
" deactivated () {",
" },",
" /**",
" * 实例销毁之前调用。在这一步，实例仍然完全可用。",
" */",
" beforeDestroy () {",
" },",
" /**",
" * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，",
" * 所有的事件监听器会被移除，所有的子实例也会被销毁。",
" */",
" destroyed () {",
" }",
"}",
"</script> ",
"",
"<style lang='less' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
vue3版本
{
"Print to console": {
"prefix": "vue3",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//setup替代beforeCreate和created",
"setup(){},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"onMounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"onBeforeMount() {}, //生命周期 - 挂载之前",
"onBeforeUpdate() {}, //生命周期 - 更新之前",
"onUpdated() {}, //生命周期 - 更新之后",
"onBeforeDestroy() {}, //生命周期 - 销毁之前",
"onUnmounted() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"onErrorCaptured() {}, //错误处理",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}