Vue3用户代码片段
1.defineComponent语法
{
"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"
}
}
2.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"
}
}
Vue3用户代码片段的更多相关文章
- VS code自定义用户代码片段snippet
打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix 就是你自定义的快捷键 body 就是你自定义的代码片段 description 就是这 ...
- vs _ 用户代码片段 _ html模板
自定义模板:首选项 -> 用户代码片段 - >(如果没有自己创个)html.json t : 表示缩进 n:表示换行 ----------------------------------- ...
- VSCode添加用户代码片段,自定义用户代码片段
在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入. VScode中添加用户自定义代码片段很简单. 1.在VScod ...
- vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容
vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...
- vs code 用户代码片段 html.json
{ // Place your snippets for html here. Each snippet is defined under a snippet name and has a p ...
- VSCode 自定义代码片段
Ctrl+Shift+P 输入"代码片段:配置用户代码片段": 搜索你想要设置的语言代码片段,比如,我设置 .vue 文件的代码片段,选择 vue.json: 可以配置多个代码片段 ...
- VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入(snippet)
前言 本来分成三篇来写的,但是想了想没必要,大家都是聪明人...简单的东西点一下就晓得了. 基本配置 快捷键自定义(Ctrl+K Ctrl + S) 那个when支持条件表达式返回一个布尔值 支持的快 ...
- 如何在VScode中添加代码片段
拿 VUE 举例,新建 VUE 文件,输入前缀,出现代码段 文件 ---> 首选项 ---> 用户代码片段 在输入框中输入 vue ,找到 vue.json ,然后在 vue.json ...
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
- visual studio code开发代码片段扩展插件
背景 visual studio code编辑器强大在于可以自己扩展插件,不仅可以去插件市场下载,也可以按照官方的API很方便的制作适合自己的插件: 自己最近在开发一个手机端网站项目,基于vant项目 ...
随机推荐
- 【HZERO】值集翻译
值集翻译 值集管理: https://open.hand-china.com/document-center/doc/component/163/16090?doc_id=156008&doc ...
- Java FTP操作
pom引用: <dependency> <groupId>commons-net</groupId> <artifactId>commons-net&l ...
- 『NexT』,一款 NexT 风格的 Typora 主题
很喜欢 Hexo 中的 Next 主题,便想要在 Typora 中书写时获得和在 Hexo 中一样的预览效果,翻了一下Typora的theme仓库发现已经有dalao (知乎@Bill Chen)写了 ...
- [VS工程技巧]远程调试工具及dump文件来检查程序崩溃及异常等问题
做什么 之前有一次梦中所得,既然可以让vs附加到进程去调试活动的dll,那要是可以让我本地的电脑去调试别人客户端或者测试环境的DLL就好了,这样就可以不通过dbgview去一个个输出看,而是可以直接调 ...
- Java应用架构演变史
垂直应用架构 也叫单体架构.以 MVC 的垂直架构举例,MVC 架构通常分为 3 层,展示层.控制层.模型层.通常基于 MVC 架构开发的应用代码会打成一个 war 包,部署在 Tomcat 等 We ...
- nohup 与 >/dev/null 与 2>&1 作用与区别
转载请注明出处: 在 Linux 中,>/dev/null 和 2>&1 是两个常用的重定向操作,它们用于控制命令的输出和错误信息.而且这两个参数经常 与 nohup 命令一起使用 ...
- Hive(3)-Hive数据类型
1. 基本数据类型 对于Hive的String类型相当于数据库的varchar类型,该类型是一个可变的字符串,不过它不能声明其中最多能存储多少个字符,理论上它可以存储2GB的字符数 Hive数据类型 ...
- 使用WTM框架创建博客系统后台并在云服务器发布
阅读导航 关于lqclass.com 博客后台前后端部署 2.1 已部署访问链接 2.2 nginx 部署 2.2.1 后台后端发布 2.2.2 后台前端发布 2.2.3 云服务器部署 下次分享 1. ...
- [转帖]History of Unicode Release and Publication Dates
www.unicode.org For ease of reference, this page collects together information about the dates for v ...
- [转帖]sql_exporter的使用
https://www.jianshu.com/p/df4b7a7cfc0d 一.背景 有些时候,我们想看每天系统的登录人数.或者系统中订单的数据,比如:成功的订单.异常的订单等等.这些数据都在我们的 ...