VUE模板,用户代码片段,快捷代码

VUE整体模板

"vuexx": {
		"prefix": "vuexx",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"	<div class=''>$2</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 lang='scss' scoped>",
			"		//@import url(); 引入公共css类",
			"",
			"</style>",
		]
		}

watch监听模板

	"watch监听": {
		"prefix": "watchObj",
		"body": [
			"$1:{",
        "  handler(newVal,oldVal){",
        "    console.log('$1监听值:',newVal, oldVal)",
        "    $2",
      "  },",
      "  deep: false, // 深度监听",
      "  immediate: false // 当值第一次绑定时,不会执行监听函数,只有值发生改变才会执行。需要最初绑定值时候也执行handler,需改为true",
      "},"
		],
	},

END

抛砖引玉,大家还有一些比较实用的可以放到评论区中一起分享。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值