VSCode&Vue入门

发布：2023/8/2 16:02:27作者：管理员来源：本站浏览次数：747

一、前端开发工具

二、ES6入门

三、Vue

一、介绍

二、基本语法

三、组件（重点）

四、实例生命周期

五、路由

六、axios

七、element-ui

一、前端开发工具

VSCode下载：https://code.visualstudio.com/

配置

1. 中文界面配置

首先安装中文插件：Chinese (Simplified) Language Pack for Visual Studio Code

右下角弹出是否重启vs，点击“yes”

有些机器重启后如果界面没有变化，则点击左边栏Manage -> Command Paletet…【Ctrl+Shift+p】

在搜索框中输入“configure display language”，回车

打开locale.json文件，修改文件下的属性 “locale”:“zh-cn”

重启

{

// 定义 VS Code 的显示语言。

// 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表。

"locale":"zh-cn" // 更改将在重新启动 VS Code 之后生效。

}

2. 插件安装

为方便后续开发，建议安装如下插件（红色矩形框标记的插件）

3.创建项目

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹，如project_xxxx。

然后打开vscode，再在vscode里面选择 File -> Open Folder 打开文件夹，这样才可以创建项目。

4.保存工作区

打开文件夹后，选择“文件 -> 将工作区另存为…”，为工作区文件起一个名字，存储在刚才的文件夹下即可。

5.新建文件夹和网页

6.预览网页

以文件路径方式打开网页预览

需要安装“open in browser”插件：

文件右键 -> Open In Default Browser

以服务器方式打开网页预览

需要安装“Live Server”插件：

文件右键 -> Open with Live Server

7.设置字体大小

左边栏Manage -> settings -> 搜索 “font” -> Font size

8.开启完整的Emmet语法支持

设置中搜索 Emmet：启用如下选项，必要时重启vs

二、ES6入门

一、ECMAScript 6 简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1. ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）

2. ES6 与 ECMAScript 2015 的关系

ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。它与 ES6 是什么关系呢？

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。

ES6 的第一个版本，在 2015 年 6 月发布，正式名称是《ECMAScript 2015 标准》（简称 ES2015）。

2016 年 6 月，小幅修订的《ECMAScript 2016 标准》（简称 ES2016）如期发布，这个版本可以看作是 ES6.1 版，因为两者的差异非常小，基本上是同一个标准。根据计划，2017 年 6 月发布 ES2017 标准。

因此，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

二、基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

1、let声明变量

创建 let.html

// var 声明的变量没有局部作用域

// let 声明的变量有局部作用域

{

var a = 0

let b = 1

}

console.log(a) // 0

console.log(b) // ReferenceError: b is not defined

// var 可以声明多次

// let 只能声明一次

var m = 1

var m = 2

let n = 3

let n = 4

console.log(m) // 2

console.log(n) // Identifier 'n' has already been declared

2、const声明常量（只读变量）

创建 const.html

// 1、声明之后不允许改变

const PI = "3.1415926"

PI = 3 // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化，否则会报错

const MY_AGE // SyntaxError: Missing initializer in const declaration

3、解构赋值

创建解构赋值.html

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

//1、数组解构

// 传统

let a = 1, b = 2, c = 3

console.log(a, b, c)

// ES6

let [x, y, z] = [1, 2, 3]

console.log(x, y, z)

//2、对象解构

let user = {name: 'Helen', age: 18}

// 传统

let name1 = user.name

let age1 = user.age

console.log(name1, age1)

// ES6

let { name, age } = user//注意：结构的变量必须是user中的属性

console.log(name, age)

4、模板字符串

创建模板字符串.html

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

// 1、多行字符串

let string1 = `Hey,

can you stop angry now?`

console.log(string1)

// Hey,

// can you stop angry now?

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。

let name = "Mike"

let age = 27

let info = `My Name is ${name},I am ${age+1} years old next year.`

console.log(info)

// My Name is Mike,I am 28 years old next year.

// 3、字符串中调用函数

function f(){

return "have fun!"

}

let string2 = `Game start,${f()}`

console.log(string2); // Game start,have fun!

5、声明对象简写

创建声明对象简写.html

const age = 12

const name = "Amy"

// 传统

const person1 = {age: age, name: name}

console.log(person1)

// ES6

const person2 = {age, name}

console.log(person2) //{age: 12, name: "Amy"}

6、定义方法简写

创建定义方法简写.html

// 传统

const person1 = {

sayHi:function(){

console.log("Hi")

}

person1.sayHi();//"Hi"

// ES6

const person2 = {

sayHi(){

console.log("Hi")

}

person2.sayHi() //"Hi"

7、对象拓展运算符

创建对象拓展运算符.html

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象

let person1 = {name: "Amy", age: 15}

let someone = { ...person1 }

console.log(someone) //{name: "Amy", age: 15}

// 2、合并对象

let age = {age: 15}

let name = {name: "Amy"}

let person2 = {...age, ...name}

console.log(person2) //{age: 15, name: "Amy"}

8、箭头函数

创建箭头函数.html

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

// 传统

var f1 = function(a){

return a

}

console.log(f1(1))

// ES6

var f2 = a => a

console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。

// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，

// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f3 = (a,b) => {

let result = a+b

return result

}

console.log(f3(6,2)) // 8

// 前面代码相当于：

var f4 = (a,b) => a+b

箭头函数多用于匿名函数的定义

三、Vue

一、介绍

1、Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.org

2、初始Vue.js

创建 demo.html

</div>

// 创建一个vue对象

new Vue({

el: '#app',//绑定vue作用的范围

data: {//定义页面中显示的模型数据

message: 'Hello Vue!'

}

})

</script>

这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作。

在vs code中创建代码片段：

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格。

{

"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"

}

二、基本语法

1、基本数据渲染和指令

创建 01-基本数据渲染和指令.html

你看到的 v-bind 特性被称为指令。指令带有前缀 v-

除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:）

data: {

content: '我是标题',

message: '页面加载于 ' + new Date().toLocaleString()

}

<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令

此时title中显示的是模型数据

-->

</h1>

</h1>

2、双向数据绑定

创建 02-双向数据绑定.html

双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定

data: {

searchMap:{

keyWord: '尚硅谷'

}

<p>您要查询的是：{{searchMap.keyWord}}</p>

3、事件

创建 03-事件.html

需求：点击查询按钮，按照输入框中输入的内容查找公司相关信息

在前面的例子基础上，data节点中增加 result，增加 methods节点并定义 search方法

data: {

searchMap:{

keyWord: '尚硅谷'

//查询结果

result: {}

methods:{

search(){

console.log('search')

//TODO

}

html中增加 button 和 p

使用 v-on 进行数件处理，v-on:click 表示处理鼠标点击事件，事件调用的方法定义在 vue 对象声明的 methods 节点中

<p>您要查询的是：{{searchMap.keyWord}}</p>

<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){

console.log('search');

this.result = {

"title":"尚硅谷",

"site":"http://www.atguigu.com"

}

简写

4、修饰符

创建 04-修饰符.html

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为

data: {

user: {}

}

<!-- 修饰符用于指出一个指令应该以特殊方式绑定。

这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：

即阻止表单提交的默认行为 -->

</label>

</form>

methods: {

onSubmit() {

if (this.user.username) {

console.log('提交表单')

} else {

alert('请输入用户名')

}

5、条件渲染

创建 05-条件渲染.html

v-if：条件指令

data: {

ok: false

}

注意：单个复选框绑定到布尔值

<input type="checkbox" v-model="ok">同意许可协议

<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>

v-show：条件指令

使用v-show完成和上面相同的功能

<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6、列表渲染

创建 06-列表渲染.html

v-for：列表循环指令

例1：简单的列表渲染

<ul>

</ul>

<ul>

<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>

</ul>

例2：遍历数据列表

data: {

userList: [

{ id: 1, username: 'helen', age: 18 },

{ id: 2, username: 'peter', age: 28 },

{ id: 3, username: 'andy', age: 38 }

]

}

<td>{{index}}</td>

<td>{{item.username}}</td>

</tr>

</table>

三、组件（重点）

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

1、局部组件

创建 01-1-局部组件.html

定义组件

var app = new Vue({

el: '#app',

// 定义局部组件，这里可以定义多个局部组件

components: {

//组件的名字

'Navbar': {

//组件的内容

template: '<ul><li>首页</li><li>学员管理</li></ul>'

}

})

使用组件

</div>

2、全局组件

创建 01-2-全局组件.html

定义全局组件：components/Navbar.js

// 定义全局组件

Vue.component('Navbar', {

template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'

})

</div>

var app = new Vue({

el: '#app'

})

</script>

四、实例生命周期

创建 03-vue实例的生命周期.html

data: {

message: '床前明月光'

methods: {

show() {

console.log('执行show方法')

update() {

this.message = '玻璃好上霜'

}

<button @click="update">update</button>

<h3 id="h3">{{ message }}</h3>

分析生命周期相关方法的执行时机

//===创建时的四个事件

beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行

console.log(this.message) //undefined

this.show() //TypeError: this.show is not a function

// beforeCreate执行时，data 和 methods 中的数据都还没有没初始化

created() { // 第二个被执行的钩子方法

console.log(this.message) //床前明月光

this.show() //执行show方法

// created执行时，data 和 methods 都已经被初始化好了！

// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

beforeMount() { // 第三个被执行的钩子方法

console.log(document.getElementById('h3').innerText) //{{ message }}

// beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中

mounted() { // 第四个被执行的钩子方法

console.log(document.getElementById('h3').innerText) //床前明月光

// 内存中的模板已经渲染到页面，用户已经可以看见内容

//===运行中的两个事件

beforeUpdate() { // 数据更新的前一刻

console.log('界面显示的内容：' + document.getElementById('h3').innerText)

console.log('data 中的 message 数据是：' + this.message)

// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染

updated() {

console.log('界面显示的内容：' + document.getElementById('h3').innerText)

console.log('data 中的 message 数据是：' + this.message)

// updated执行时，内存中的数据已更新，并且页面已经被渲染

}

五、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

创建 04-路由.html

1、引入js

2、编写html

<h1>Hello App!</h1>

<p>

<router-link to="/">首页</router-link>

<router-link to="/student">会员管理</router-link>

<router-link to="/teacher">讲师管理</router-link>

</p>

<router-view></router-view>

</div>

3、编写js

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

const Welcome = { template: '<div>欢迎</div>' }

const Student = { template: '<div>student list</div>' }

const Teacher = { template: '<div>teacher list</div>' }

// 2. 定义路由

// 每个路由应该映射一个组件。

const routes = [

{ path: '/', redirect: '/welcome' }, //设置默认指向的路径

{ path: '/welcome', component: Welcome },

{ path: '/student', component: Student },

{ path: '/teacher', component: Teacher }

]

// 3. 创建 router 实例，然后传 `routes` 配置

const router = new VueRouter({

routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 从而让整个应用都有路由功能

const app = new Vue({

el: '#app',

router

})

// 现在，应用已经启动了！

</script>

六、axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端

在浏览器中可以帮助我们完成 ajax请求的发送

在node.js中可以向远程接口发送请求

获取数据

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

var app = new Vue({

el: '#app',

data: {

memberList: []//数组

created() {

this.getList()

methods: {

getList(id) {

//vm = this

axios.get('http://localhost:8081/admin/ucenter/member')

.then(response => {

console.log(response)

this.memberList = response.data.data.items

})

.catch(error => {

console.log(error)

})

}

})

控制台查看输出

2、显示数据

<tr>

</tr>

<td>{{item.memberId}}</td>

<td>{{item.nickname}}</td>

</td>

</tr>

</table>

</div>

七、element-ui

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网

http://element-cn.eleme.io/#/zh-CN

创建 06-element-ui.html

将element-ui引入到项目

在这里插入图片描述

1、引入css

2、引入js

3、编写html

<el-button @click="visible = true">Button</el-button>

<el-dialog :visible.sync="visible" title="Hello world">

<p>Try Element</p>

</el-dialog>

</div>

关于.sync的扩展阅读

https://www.jianshu.com/p/d42c508ea9de

4、编写js

new Vue({

el: '#app',

data: function () {//定义Vue中data的另一种方式

return { visible: false }

}

})

</script>

5、测试

　开源基于.Net Core 6.0 +DDD模式开发的通用权限系统

vs code 开发 Vue 基础环境搭建　

linux操作系统入门 cnblogs C# 从代码入门 Mysql 数据库事务 Java快速入门-零基础Java教程 OpenCVSharp入门教程特征提取③——HoughLinesP直线寻找，直线提取 python——selenium爬虫入门 VS2015与VS2017 GitHub 源码管理工具简单入门 Node.js和Redis入门-安装与命令 Python 入门数据结构 list 列表 VSCode&Vue入门 C# NLog入门

柏港建站平台

柏港 Vue

柏港为您推荐了一些相关资讯