VSCode中snippets(代码模板)的使用

news2024/11/14 14:51:40

首先安装Vue VSCode Snippets,在组件库中搜索并安装。

然后打开插件文件夹 
文件夹名是 "作者名.vscode-插件名-版本号"组成的.

C:\Users\Administrator\.vscode\extensions\sdras.vue-vscode-snippets-3.1.1\snippets
打开vue.json

"prefix": "vbase" 就是代码块的关键词,输入vbase就会提示代码块 选择vbase2

在代码中插入以下代码:

  "Vue Single File Component2": {
    "prefix": "vb2",
    "body": [
      "<template>",
      "\t<div>",
      "\t</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "\t//接受父组件传过来的数据",
      "\tprops: {",
      "\t},",
      "\t//DOM组件",
      "\tcomponents: {",
      "\t},",
      "\tdata() {",
      "\t\treturn {",
      "\t\t\tproperty: 'vue test',",
      "\t\t};",
      "\t},",
      "\t//计算属性",
      "\tcomputed: {",
      "\t},",
      "\t//监听",
      "\twatched: {",
      "\t},",
      "\t//DOM在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图",
      "\tcreated() {",
      "\t",
      "\t},",
      "\t//DOM渲染完成,组件挂载完成",
      "\tmounted() {",
      "\t",
      "\t},",
      "\t//组件销毁",
      "\tdestroyed() {",
      "\t",
      "\t},",
      "\tmethods: {",
      "\t\tlog(str) {",
      "\t\t    console.log('log', str);",
      "\t\t}",
      "\t},",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      "",
      "</style>"
    ],
    "description": "Base for VueTT File with SCSS"
  },

然后保存,重启VSCode,新建文件测试,输入vb即可,选择刚才输入的vb2即可 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1702484.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++系列-定位new表达式(placement-new)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们先来强调一个很关键的问题&#xff0c;那就是在new和delete中的一一对应的问题&#xff0c; 我们先来看一段代码&#xff1a; #include<iostream> using namespace …

K8s的CRI机制是什么?

1. 概述 进入 K8s 的世界&#xff0c;会发现有很多方便扩展的 Interface&#xff0c;包括 CRI, CSI, CNI 等&#xff0c;将这些接口抽象出来&#xff0c;是为了更好的提供开放、扩展、规范等能力。 K8s CRI(Container Runtime Interface) 是 K8s 定义的一组与容器运行时进行交…

Web3 游戏周报(5.19 - 5.25)

【5.19 - 5.25】Web3 游戏行业动态&#xff1a; Arbitrum 已开启 “2 亿枚 ARB 游戏催化剂计划”的提案投票。 STEPN 在官方 X 宣布将推出全新社交健身应用 STEPN GO。 Oasys 正式推出《足球小将》漫改 Web3 游戏《Captain Tsubasa-RIVALS-》。 Gala Games &#xff1a;已销…

8.Redis之hash类型

1.hash类型的基本介绍 哈希表[之前学过的所有数据结构中,最最重要的] 1.日常开发中,出场频率非常高. 2.面试中,非常重要的考点, Redis 自身已经是键值对结构了Redis 自身的键值对就是通过 哈希 的方式来组织的 把 key 这一层组织完成之后, 到了 value 这一层~~ value 的其中…

C++容器之向量(std::vector)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 rezize3.6 reserve3.7 shrink_to_fit3.8 access3.9 assign3.10 push_back3.11 pop_back3.12 insert3.13 erase3.14 swap3.15 clear3.16 emplace3.17 emplace_back3.18 get_allocator1 概…

智慧树下做游戏

游戏开发工程师致力于游戏总体设计 &#xff0c;负责游戏开发工具和运营维护工具的设计与开发 &#xff0c;并配合主程序完成游戏架构及各大功能的设计、开发、调试和其他技术支持 就业方向&#xff1a; 一般有客户端游戏开发和服务器游戏开发 客户端开发&#xff1a; 主要负…

【漏洞复现】Gradio component_server 任意文件读取漏洞(CVE-2024-1561)

0x01 产品简介 Gradi0是一个开源的 Python库&#xff0c;用于创建机器学习模型的交互式界面。它使得展示和测试模型变得简单快捷&#xff0c;无需深入了解复杂的前端技术。广泛应用于数据科学、教育、研究和软件开发领域&#xff0c;尤其适合于快速原型设计、模型验证、演示和…

在没有足够测试数据的请情况下,如何验证前端页面的分页展示和渲染情况

问题描述&#xff1a;测试过程中&#xff0c;为了验证前端页面的展示效果及分页组件的展示情况&#xff0c;测试人员一般都会选择在数据库造数据&#xff0c;但遇到表格管理逻辑特别复杂的情况&#xff0c;可能会耗费大量的时间&#xff0c;此时我们可以选择使用工具模拟返回值…

关于kube-prometheus拉取镜像的问题

由于国内网络环境的问题想通过kube-prometheus配置监控但是拉取镜像会报错 包已经打好下载好镜像就可以使用&#xff1a; https://download.csdn.net/download/m0_59744084/89349768 kubectl get pod -n monitoring 问题&#xff1a;"Failed to pull image "regist…

IC解析之SN74HCS595QPWRQ1

目录 1.主要参数2. 接口定义3. 工作原理分析移位寄存器器的作用SN74HCS595QPWRQ1工作原理 4.总结 1.主要参数 2. 接口定义 其中QH‘为串行输出接口&#xff0c;QA~QH为并行输出接口&#xff0c;SER为串行输入接口&#xff0c;其他未移位以及储存控制引脚 3. 工作原理分析 移位…

26计算机操作系统408考研--操作系统设备管理篇章(五)

文章目录 一、设备是什么&#xff1f;设备管理目标和任务I/O设备分类 二、I/O系统控制方式程序直接控制方式中断控制方式DMA控制方式通道控制方式 I/O软件的组成I/O软件设计目标和原则I/O软件结构设备驱动程序设备无关软件用户层软件用户层的I/O软件 具有通道的设备管理通 道通…

R绘图学习笔记

1、R语言绘制海岸线边界 参考&#xff1a; Drawing beautiful maps programmatically with R, sf and ggplot2 — Part 1: Basics 使用R绘制世界地图及纬度统计图 Drawing maps with R. A basic tutorial&#xff1a;https://dr2blog.hcommons.org/2020/03/23/drawing-maps-wit…

第 52 期:MySQL 半同步复制频繁报错

社区王牌专栏《一问一实验&#xff1a;AI 版》全新改版归来&#xff0c;得到了新老读者们的关注。其中不乏对 ChatDBA 感兴趣的读者前来咨询&#xff0c;表达了想试用体验 ChatDBA 的意愿&#xff0c;对此我们表示感谢 &#x1f91f;。 目前&#xff0c;ChatDBA 还在最后的准备…

keepalived交叉编译

前言 Keepalived可以实现对服务器的健康检查&#xff0c;当主服务器出现故障时&#xff0c;自动将服务切换到备份服务器上&#xff0c;确保服务的连续性&#xff0c;避免单点故障。它还可以管理一个虚拟 IP 地址&#xff0c;在主备服务器之间进行灵活切换&#xff0c;对外提供…

Linux如何在目录下灵活创建、浏览、删除百万个文件

文章目录 一、创建百万级小文件1、单核CPU情况2、多核CPU情况3、执行效率对比3.1、单核的顺序执行3.2、多核的并发执行 二、如何列出/浏览这些文件1、查看目录下文件的数量2、列出&#xff1f;3、ls -f&#xff08;关闭排序功能&#xff09;3.1、执行效率对比 4、通过重定向导入…

2024深圳数字能源展推介会在巴西圣保罗举行

4月26日&#xff0c;深圳市发展和改革委员会在巴西圣保罗国际工程机械及矿山机械展上举行专题推介会&#xff0c;介绍将于今年下半年在深圳市举办的2024国际数字能源展。 深圳市发展和改革委员会主任郭子平在推介会上介绍&#xff0c;为进一步深化数字能源领域互利共赢&#xf…

“二叉堆:不是,啊?”

目录 前言一、堆的概念及结构堆的性质&#xff1a;堆的结构:最大堆最小堆堆顶注意 二、堆的实现1.初始化堆2. 堆的插入什么是堆的向上调整算法&#xff1f; 3.堆的删除什么是堆的向下调整算法&#xff1f; 4.获取堆顶的数据5.获取堆的数据个数6.堆的判空7.堆的销毁 三、建堆的时…

逻辑分析仪的调试使用

调试软件下载&#xff1a;点击跳转 一、接线 逻辑分析仪 设备 GND --- GND CHX&#xff08;数据通道&#xff09; --- 通信引脚 二、数据采集 图中两个可以选择数字大小的地方分别表示 采样深度 &#xff08;10M Samples&a…

eBay运营账号防关联成功的关键因素是什么?

一、什么是eBay&#xff1f; eBay如今的发展现状呈现出积极且充满活力的态势。作为全球知名的在线拍卖和购物平台&#xff0c;随着全球消费者对线上购物的需求不断增长&#xff0c;这为卖家提供了广阔的市场空间和盈利机会&#xff0c;但多账号的运营若处理不好容易引起账号被关…

宝塔下新增站点 No Input File Specified.错误修复

今天明月收到了一个购买【站长必备在线工具源码含上百款工具-博客优化修复版】用户的求助&#xff0c;在宝塔里新增网站部署好工具源码后&#xff0c;访问出现“No input file specified.”的提示。其实出现这个提示一般都是 PHP 文件无法被解析造成的。 简单排查了一下宝塔相关…