安装vscode基础配置,es6基础语法,

本文介绍了在VisualStudioCode中使用ES6的几个关键特性,如const声明常量、结构赋值、箭头函数的简洁语法,以及Vue框架中的单项绑定、双向绑定和基本事件处理。还提供了创建默认Vue页面的基础代码示例。
摘要由CSDN通过智能技术生成

https://code.visualstudio.com/

在这里插入图片描述在这里插入图片描述

es6

定义变量

在这里插入图片描述

const声明常量(只读变量)

// 1、声明之后不允许改变
const PI = “3.1415926”
PI = 3 // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化,否则会报错
const MY_AGE // Missing initializer in const declaration

结构赋值

在这里插入图片描述在这里插入图片描述

声明对象简写

在这里插入图片描述在这里插入图片描述

箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是:
参数 => 函数体
箭头函数多用于匿名函数的定义

在这里插入图片描述在这里插入图片描述

创建默认页面基础代码

文件 => 首选项 => 用户片段 => 新建全局代码片段文件:

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\">",
			"",
			"    </div>",
			"    <script src=\"vue.min.js\"></script>",
			"    <script>",
			"        new Vue({",
			"            el: '#app',",
			"            data: {",
			"                $1",
			"            }",
			"        })",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "my vue template in html"
	}
}

单项绑定

在这里插入图片描述

双向绑定

在这里插入图片描述在这里插入图片描述

事件

在这里插入图片描述

条件渲染

在这里插入图片描述
在这里插入图片描述

对于在VSCode设置ES6语法支持,您可以按照以下步骤进行操作: 1. 打开VSCode并打开您的项目文件夹。 2. 在左侧的侧边栏中,点击菜单中的“文件”选项。 3. 在文件菜单中,选择“首选项”。 4. 在首选项菜单中,选择“设置”。 5. 这将打开一个名为“settings.json”的文件,其中包含您的用户设置。如果您之前已经更改过该文件,请确保不会覆盖现有设置。 在"settings.json"文件中添加以下内容: ```json { "javascript.updateImportsOnFileMove.enabled": "always", "javascript.implicitProjectConfig.experimentalDecorators": true, "javascript.format.enable": false, "typescript.format.enable": false, "editor.codeActionsOnSave": { "source.organizeImports": true }, "eslint.enable": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ``` 以上配置将启用以下功能: - 自动更新导入语句 - 支持实验性的装饰器语法 - 在保存文件时自动整理代码 - 启用ESLint进行代码检查 - 使用Prettier插件格式化代码 请注意,您还需要确保已安装以下VSCode插件: - ESLint:用于代码检查和规范。 - Prettier:用于代码格式化。 完成这些步骤后,您应该可以在VSCode中使用ES6语法了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值