用户代码片段也叫 snippets ,使用它可以跳过写一些重复性格式的内容，节约工作效率
-
第一步，打开 vScode ,点击左下角设置，接着点击“用户代码片段”
-
看到如下内容，可以选择新建全局代码片段，也可以选择创建特定类型的代码片，或者对当前文件新建代码片段，选择不同的创建方式，作用域就不同
- 这里我们我们 js 为例，打开会有例子告诉你如何创建代码片段
- 以下是封装好的常见用户代码片段(复制粘贴即可)，也可以自行修改或创建
{
// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible letiables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
],
"description": "Log output to console"
},
"yulan tupian": {
"prefix": "ajax_yulan",
"body": [
"//1.给file表单元素注册onchange事件",
"$('file表单').change(function () {",
"\t//1.2 获取用户选择的图片",
"\tlet file = this.files[0];",
"\t//1.3 将文件转为src路径",
"\tlet url = URL.createObjectURL(file);",
"\t//1.4 将url路径赋值给img标签的src",
"\t$('img元素').attr('src', url);",
"});"
],
"description": "图片预览固定四个步骤"
},
"comment for function": {
"prefix": "///",
"body": [
"/**",
"* @description:",
"* @param {type} ",
"* @return: ",
"*/",
],
"description": "函数标准注释快捷键"
},
"jquery to ajax": {
"prefix": "ajax",
"body": [
"$.ajax({",
"\turl:'',",
"\ttype:'get',",
"\tdataType:'json',",
"\tdata:'',",
"\tsuccess: function(backData){",
"",
"\t}",
"});"
],
"description": "ajax请求"
},
"get for XMLHTTPRequest": {
"prefix": "ajax1",
"body": [
"//(1).实例化ajax对象",
"let xhr = new XMLHttpRequest();",
"//(2).设置请求方法和地址",
"//get请求的数据直接添加在url的后面 格式是 url?key=value",
"xhr.open('get', '接口url');",
"//(3).发送请求",
"xhr.send();",
"//(4).注册回调函数",
"xhr.onload = function() {",
"\tconsole.log(xhr.responseText)",
"};",
],
"description": "get-原生XMLHTTPRequest实现ajax"
},
"post for XMLHTTPRequest": {
"prefix": "ajax2",
"body": [
"//(1).实例化ajax对象",
"let xhr = new XMLHttpRequest();",
"//(2).设置请求方法和地址",
"xhr.open('post', '$1');",
"//(3).设置请求头（post请求才需要设置）",
"xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');",
"//(4).发送请求 ： 参数格式 'key=value' ",
"xhr.send('key=value');",
"//(5).注册回调函数",
"xhr.onload = function () {",
"\tconsole.log(xhr.responseText);",
"};"
],
"description": "post-原生XMLHTTPRequest实现ajax"
},
"file to ajax": {
"prefix": "ajax-file",
"body": [
"$('提交按钮').on('click',function(e){",
"\t//禁用表单默认提交事件",
"\te.preventDefault();",
"\t//创建FormData对象：参数是表单dom对象",
"\tlet fd = new FormData('form表单DOM对象')",
"\t$.ajax({",
"\t\turl:'',",
"\t\ttype:'post',",
"\t\tdataType:'json',",
"\t\tdata:fd,",
"\t\tcontentType: false,",
"\t\tprocessData: false,",
"\t\tsuccess: function(backData){",
"\t\t}",
"\t});",
"});"
],
"description": "表单提交ajax请求"
},
"express-server": {
"prefix": "express",
"body": [
"//1.导入模块",
"const express = require('express');",
"//2.创建服务器",
"let app = express();",
"//3.开启服务器",
"app.listen(3000,()=>{",
"console.log('success');",
"});"
],
"description": "快速搭建express服务器"
},
"http-server": {
"prefix": "http",
"body": [
"//1.导入模块",
"const http = require('http');",
"\n//2.创建服务器",
"let server = http.createServer((req,res)=>{\n});",
"\n//3.开启服务器",
"server.listen(3000,()=>{",
"\tconsole.log('服务器开启成功');",
"});"
],
"description": "快速搭建http服务器"
},
"get element by id": {
"prefix": "query",
"body": [
"let box = document.querySelector('.box')",
],
"description": "根据id获取元素"
},
"enmu arr": {
"prefix": "forin",
"body": [
"for(let i = 0;i<arr.length;i++){",
"\tconsole.log(arr[i]);",
"};",
],
"description": "数组快速for循环遍历"
},
"get elment by tagname": {
"prefix": "gtg",
"body": [
"let liList = document.getElementsByTagName('li')",
],
"description": "根据标签名获取元素"
},
"get elment by classname": {
"prefix": "gcn",
"body": [
"let oneList = document.getElementsByClassName('one')",
],
"description": "根据类名获取元素"
},
"quick event": {
"prefix": "click",
"body": [
"//注册事件",
"box.onclick = function(){}",
],
"description": "快速注册点击事件"
},
"需求分析": {
"prefix": "silu1",
"body": [
"/*",
"1.分析需求(交互)：",
"2.思路分析（事件三要素）",
"\t获取元素：事件源：",
"\t注册事件：事件类型",
"\t事件处理：",
"*/",
],
"description": "分析需求"
},
"根据思路实现需求": {
"prefix": "silu2",
"body": [
"//1.获取元素",
"let box = document.querySelector('css选择器');",
"//2.注册事件",
"box.onclick = function () {",
"\t//3.事件处理:",
"};",
],
"description": "根据思路实现需求"
},
"遍历对象": {
"prefix": "forin1",
"body": [
"for(let key in obj){",
"\tlet value = obj[key];",
"};",
],
"description": "遍历对象快捷语法"
},
"axios": {
"prefix": "axios",
"body": [
"axios({",
"\turl:'请求路径',",
"\tmethod:'get',",
"\tdata: { 'post请求参数'},",
"\tparams: { 'get请求参数'}",
"}).then(res=>{",
"\t//成功回调",
"\tconsole.log(res)",
"});",
],
"description": "axios请求"
},
"backgroundColor": {
"prefix": "bgc",
"body": [
"backgroundColor",
],
"description": "背景颜色"
},
"vue-router": {
"prefix": "vr",
"body": [
"//1.创建组件",
"let ym1 = {template:''};",
"let ym2 = {template:''};",
"let ym3 = {template:''};",
"//2.创建路由规则",
"let routes = [",
"\t{path:'/ym1',component:ym1},",
"\t{path:'/ym2',component:ym2},",
"\t{path:'/ym3',component:ym3},",
"]",
"//3.创建路由对象",
"let router = new VueRouter({routes});",
"//4.挂载路由",
"let app = new Vue({",
"\trouter,",
"}).$$mount('#app');",
],
"description": "快速生成路由"
},
}
