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项目 ...
随机推荐
- mysql--ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory
问题背景: 1.在授权机器上连接mysql 8.0的数据库,账号.密码都没有问题,报错 2.使用 navicat工具连接8.0版本,报错 排查思路: 可能是创建用户没有指定插件使用了8.0自带的插件, ...
- 【营】在开局,提升【豹】发力 - vivo活动插件管理平台
一.背景 随着vivo悟空活动中台活动组件越来越多,活动中台开发的小伙伴们愈发的感知到我们缺少一个可以沉淀通用能力,提升代码复用性的组件库.在这个目标基础之上诞生了acitivity-componen ...
- springboot启动类源码探索一波
举个例子: 这是一个原始的Spring IOC容器启动方法,我们需要AnnotationConfigApplicationContext这个类有如下几个步骤 1. 创建构造方法,根据我们所传入的Ap ...
- <vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak
代码结构 一. Mustache 1.效果 展示如何将数据展示在页面上 2.代码 01-Mustache.html <!DOCTYPE html> <html lang=&q ...
- Vue中生成二维码 组件库qrcode使用
qrcode网址: https://www.npmjs.com/package/qrcode 安装代码如下: npm install qrcodeqrcode文档中生成二维码有很多环境下的用法.我们这 ...
- P1228-递归【黄】
这道大递归我一开始就找对了方向,不过了MLE,然后从网上搜索到了一个贼有用的概念--尾递归,即如果递归的下一句就是return且没有返回值或者返回值不含有递归函数则编译器会做优化,不会压入新的函数而是 ...
- Liunx常用操作(七)-文件上传下载方法
如下介绍了几个比较方便的liunx软件的文件维护方法 一.SZ,RZ liunx服务器上安装 通过apt来安装z.sz:安装后直接上传下载文件 apt-get install lrzsz 用法: # ...
- Redis 集群模式搭建
本文为博主原创,未经允许不得转载: 目录: 1. 哨兵模式与集群模式对比 2. Redis 集群架构搭建 3. 集群原理分析 4. 集群元数据维护方式对比 5. redis 分布式寻址 6. 集群选举 ...
- C#/.Net Core/WPF框架初建(国际化、主题色)
C#/.Net Core/WPF框架初建(国际化.主题色) English | 简体中文 作为 TerminalMACS 的一个子进程模块 - WPF管理端,目前搭建框架部分功能:本地化.国际化.主题 ...
- 码农的转型之路-IoTBrowser(物联网浏览器)雏形上线
消失了半个月闭门造轮子去了,最近干了几件大事: 1.工控盒子,win10系统长时间跑物联网服务测试.运行快2周了,稳定性效果还满意,除了windows自动更新重启了一次. 2 .接触了一些新概念MQT ...