写好一套.vue文件模板大大提高了我们的开发效率,欢迎使用!
方法:打开vscode — 文件 — 首选项 — 用户片段 — 新增 vue.json — 粘贴代码
{
"vue": {
"prefix": "VUE", // 触发的关键字
"body": [
"<template>",
" <div>",
" <MyComponents />$1",
" </div>",
"</template>",
"",
"<script>",
"// 接口模块,",
"import { myapi } from '@/api/'",
"// 组件模块,@=src,.=当前",
"import MyComponents from '@/components/'",
"// 混入模块,@=src,.=当前",
"import mymixins from './mixins/'",
"",
"export default {",
" name: 'Name',",
" components: { MyComponents },",
" mixins: [mymixins],",
" props: {",
" value1: { type: String, default: '' },",
" value2: { type: Number, default: 1 },",
" value3: { type: Boolean, default: true },",
" value4: { type: Array, default: function() { return [] } },",
" value5: { type: Object, default: function() { return {} } }",
" value6: { type: Function, default: function() { return true } }",
" },",
" data() {",
" return {",
" data1: '',",
" data2: true,",
" data3: []",
" }",
" },",
" // 属性计算",
" computed: {",
" test: function() {",
" return this.data1",
" }",
" },",
" // 监听器",
" watch: {",
" data1: function(newVal, oldVal) {",
" this.data2 = newVal",
" }",
" },",
" // 创建之前(数据没有挂载,只是一个空壳,无法操作真实的DOM和访问数据)",
" beforeCreate() {",
"",
" },",
" // 创建完成(可以访问当前this实例,获得初始数据,无法渲染DOM)",
" created() {",
"",
" },",
" // 即将挂载(可以访问到DOM也可以访问原始数据)",
" beforeMount() {",
"",
" },",
" // 挂载完成(可以访问DOM元素)",
" mounted() {",
" // 触发方法",
" this.getTest()",
" // 发送异步请求",
" myapi().then(res => {",
" console.log(res)",
" })",
" },",
" // 更新之前",
" beforeUpdate() {",
"",
" },",
" // 更新之后",
" updated() {",
"",
" },",
" // 销毁之前",
" beforeDestroy() {",
"",
" },",
" // 销毁完成",
" destroyed() {",
"",
" },",
" // 有keep-alive并且进入时",
" activated() {",
"",
" },",
" // 有keep-alive并且离开时",
" deactivated() {",
"",
" },",
" // 方法",
" methods: {",
" getTest() {",
" this.data1 = ''",
" }",
" }",
"}",
"</script>",
"",
"<style lang='scss' scoped>",
"$4",
"</style>"
"",
],
"description": "vh components"
}
}
打开一个 .vue文件,点击右下角的Vue,选择语言模式:vue.json,试试在代码里面输入vue就弹出我们预设的模板了,快看看效果吧!
<template>
<div>
<MyComponents />
</div>
</template>
<script>
// 接口模块,
import { myapi } from '@/api/'
// 组件模块,@=src,.=当前
import MyComponents from '@/components/'
// 混入模块,@=src,.=当前
import mymixins from './mixins/'
export default {
name: 'Name',
components: { MyComponents },
mixins: [mymixins],
props: {
value1: { type: String, default: '' },
value2: { type: Number, default: 1 },
value3: { type: Boolean, default: true },
value4: { type: Array, default: function() { return [] } },
value5: { type: Object, default: function() { return {} } },
value6: { type: Function, default: function() { return true } }
},
data() {
return {
data1: '',
data2: true,
data3: []
}
},
// 属性计算
computed: {
test: function() {
return this.data1
}
},
// 监听器
watch: {
data1: function(newVal, oldVal) {
this.data2 = newVal
}
},
// 创建之前(数据没有挂载,只是一个空壳,无法操作真实的DOM和访问数据)
beforeCreate() {
},
// 创建完成(可以访问当前this实例,获得初始数据,无法渲染DOM)
created() {
},
// 即将挂载(可以访问到DOM也可以访问原始数据)
beforeMount() {
},
// 挂载完成(可以访问DOM元素)
mounted() {
// 触发方法
this.getTest()
// 发送异步请求
myapi().then(res => {
console.log(res)
})
},
// 更新之前
beforeUpdate() {
},
// 更新之后
updated() {
},
// 销毁之前
beforeDestroy() {
},
// 销毁完成
destroyed() {
},
// 有keep-alive并且进入时
activated() {
},
// 有keep-alive并且离开时
deactivated() {
},
// 方法
methods: {
getTest() {
this.data1 = ''
}
}
}
</script>
<style lang='scss' scoped>
</style>