Vue+Node.js+ES6+VScode

Vue+Node.js+ES6+VScode

一、VScode的使用

1. 安装常用插件

1.Chinese (Simplified) Language Pack for Visual Studio Code ——中文插件
2.Auto Close Tag
3.Auto Rename Tag
4.ESLint
5.HTML CSS Support
6.HTML Snippets
7.JavaScript (ES6) code snippets
8.Live Server
9.open in browser ——打开运行展示到浏览器
10.vue

2. vscode快捷键

ctrl+shift+f 全局搜索

alt+shift+f 格式化代码

二、ES6

1. 简介

ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商

协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本

程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且

从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是 ECMAScript6。

它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

每年一个新版本

2.ES6新特性

1. let 声明变量

   1. var 声明的变量往往会越域 —— let 声明的变量有严格局部作用域 
   
   2. var 可以声明多次 —— let 只能声明一次 
   
   3. var 会变量提升 —— let 不存在变量提升 
   console.log(x); // undefined 
   var x = 10; 
   console.log(y); //ReferenceError: y is not defined 
   let y = 20;
   

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

   1. 声明之后不允许改变 
   2. 一但声明必须初始化，否则会报错 
   const a = 1; 
   a = 3; //Uncaught TypeError: Assignment to constant variable.
   

3. 解构表达式

1. 数组结构式

   let arr = [1,2,3]; 
   //以前我们想获取其中的值，只能通过角标。ES6 可以这样： 
   const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值 
   // 然后打印 
   console.log(x,y,z);
   

2. 对象解构

   const person = { 
     name: "jack", 
     age: 21, 
     language: ['java', 'js', 'css'] 
   }
   // 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 
   const { name, age, language } = person; 
   // 等价于下面 
   // const name = person.name; 
   // const age = person.age; 
   // const language = person.language; 
   // 可以分别打印 
   console.log(name); 
   console.log(age); 
   console.log(language); 
   //扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 
   const { name: nn, age, language } = person; console.log(nn); 
   console.log(age); 
   console.log(language);
   

4.箭头函数

//以前声明一个方法 
// var print = function (obj) {
// 		console.log(obj); 
// } 
// 可以简写为： 
var print = obj => console.log(obj); 
// 测试调用 
print(100);

//需求，声明一个对象，hello 方法需要对象的个别属性 
//以前的方式： 
const person = { 
  name: "jack", 
  age: 21, 
  language: ['java', 'js', 'css'] 
}
function hello(person) { 
  console.log("hello," + person.name)
}

//现在的方式 
var hello2 = ({ name }) => { console.log("hello," + name) }; 
//测试 
hello2(person);

5.新增API

ES6 给 Object 拓展了许多新的方法，如：

- keys(obj)：获取对象的所有 key 形成的数组

- values(obj)：获取对象的所有 value 形成的数组

- entries(obj)：获取对象的所有 key 和 value 形成的二维数组。格式：[[k1,v1],[k2,v2],...]

- assign(dest, …src) ：将多个 src 对象的值 拷贝到 dest 中。（第一层为深拷贝，第二层为浅

拷贝）

6.map 和 reduce

​ 数组中新增了 map 和 reduce 方法。

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3']; 
console.log(arr) 
arr = arr.map(s => parseInt(s)); //把字符串转换成数字类型
console.log(arr)

语法： 
arr.reduce(callback,[initialValue]) 
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元 素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调 用 reduce 的数组。 

callback （执行数组中每个值的函数，包含四个参数） 
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue）） 
2、currentValue （数组中当前被处理的元素） 
3、index （当前元素在数组中的索引） 
4、array （调用 reduce 的数组） 
initialValue （作为第一次调用 callback 的第一个参数。）

示例： 
const arr = [1,20,-5,3]; 
//没有初始值： 
console.log(arr.reduce((a,b)=>a+b));//19 
console.log(arr.reduce((a,b)=>a*b));//-300

//指定初始值： 
console.log(arr.reduce((a,b)=>a+b,1));//20 
console.log(arr.reduce((a,b)=>a*b,0));//-0

7. Promise 异步编排

const promise = new Promise((resolve, reject) =>{ 
  // 执行异步操作 
  if (/* 异步操作成功 */) { 
      resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果 
} else { 
      reject(error);// 调用 reject，代表 Promise 会返回失败结果 
} 
}); 
//这样，在 promise 中就封装了一段异步执行的结果。

处理异步结果
如果我们想要等待异步执行完成，做一些事情，我们可以通过 promise 的 then 方法来实现。 如果想要处理 promise 异步执行失败的事件，还可以跟上 catch：

promise.then(function (value) { 
  // 异步执行成功后的回调 
}).catch(function (error) { 
  // 异步执行失败后的回调 
})

new Promise((resolve, reject) => { 
  $.ajax({ 
    url: "mock/user.json", 
    success(data) { 
      console.log("查询用户：", data); 
      resolve(data.id); 
    },
    error(error) { 
      console.log("出现异常了：" + error); 
    } 
  }); 
}).then((userId) => { 
  return new Promise((resolve, reject) => {
    $.ajax({ 
      url: `mock/user_corse_${userId}.json`,
	  success(data) { 
        console.log("查询到课程：", data); 
        resolve(data.id); 
      },
      error(error) { 
        console.log("出现异常了：" + error); 
      } 
    }); 
  }); 
}).then((corseId) => { 
  console.log(corseId); 
  $.ajax({ 
    url: `mock/corse_score_${corseId}.json`, 
    success(data) { 
      console.log("查询到分数：", data); 
    },
    error(error) { 
      console.log("出现异常了：" + error); 
    } 
  }); 
});

8. Promise优化处理

​ 优化：通常在企业开发中，会把 promise 封装成通用方法，如下：封装了一个通用的 get 请

​ 求方法；

```js

let get = function (url, data) { // 实际开发中会单独放到 common.js 中
return new Promise((resolve, reject) => {
$.ajax({
url: url,
type: “GET”,
data: data,
success(result) {
resolve(result);
},
error(error) {
reject(error);
}
});
})
}

// 使用封装的 get 方法，例：
get(“mock/user.json”).then((result) => {
console.log(“查询用户：”, result);
return get(mock/user_corse_${result.id}.json);
}).then((result) => {
console.log(“查询到课程：”, result);
return get(mock/corse_score_${result.id}.json)
}).then((result) => {
console.log(“查询到分数：”, result);
}).catch(() => {
console.log(“出现异常了：” + error);
});
```

9. 模块化

1. 什么是模块化

   模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先

   导包。而 JS 中没有包的概念，换来的是模块。

   模块功能主要由两个命令构成：export和import。

   • export命令用于规定模块的对外接口。
   • import命令用于导入其他模块提供的功能。

三、Node.js

​ 官方中文文档：http://nodejs.cn/api/

​ 下载官方地址：https://nodejs.org/en/download/

​ 1）、官网下载安装 node.js，并使用 node -v 检查版本

​ 2）、配置 npm 使用淘宝镜像

     ```bash

npm config set registry http://registry.npm.taobao.org/
```

​ 3）、大家如果 npm install 安装依赖出现 chromedriver 之类问题，先在项目里运行下面命令

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 

​ 然后再运行

npm install

四、Vue

1. Vue简介

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

同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上

手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库

结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

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

参考：https://cn.vuejs.org/v2/guide/

Git 地址：https://github.com/vuejs

尤雨溪，Vue.js 创作者，Vue Technology 创始人，致力于 Vue 的研究开发。

运行流程 
1、 进入页面首先加载 index.html 和 main.js 文件。 
2、 main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的
元素。使用了 router，导入了 App 组件。并且使用标签 引用了这个组件 
3、 第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。 但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。 
4、 所以第一次访问，显示图片和 HelloWorld 组件。 
5、 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签

2. MVVM 思想

• M：即 Model，模型，包括数据和一些基本操作
• V：即 View，视图，页面渲染结果
• VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）
• 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染

到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到

Model 中

• 而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model

和 View 之间是如何互相影响的：

3. Vue.js指令

1. 第一个Vue程序

a.导入开发版本的Vue.js
b.创建Vue实例对象,设置el属性和data属性
c.使用简洁的模板语法把数据渲染到页面上

2. el:挂载点

   1.el是用来设置Vue实例挂载（管理)的元素
   2.Vue会管理el选项命中的元素及其内部的后代元素可以使用其他的选择器,但是建议使用ID 3.选择器可以使用其他的双标签,不能使用HTML和BODY

3. data数据对象

1.Vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂类型数据时,遵守js的语法即可

4. v-html 、v-text 、

1.v-html指令的作用是:设置元素的innerHTML , 内容中有html结构会被解析为标签
2.v-text指令无论内容是什么,只会解析为文本
3.解析文本使用v-text,需要解析html结构使用v-html

5. v-on

例如：<div id="app">
	<button v-on:click="say()">click</button>
         </div>
	<script>
		var vm = new Vue({
			el:app,
			methods:{
				say:function(){
					alert("hello")
				} 
			}
		})
1.v-on指令的作用是:为元素绑定事件事件名不需要写on、
2.指令可以简写为@click="调用的方法"
3.绑定的方法定义在methods属性中
4.事件绑定的方法写成函数调用的形式，可以传入自定义参数
5.定义方法时需要定义形参来接收传入的实参
6.事件的后面跟上.修饰符可以对事件进行限制
7. .enter可以限制触发的按键为回车

6. v-show

1.v-show指令的作用是:根据真假切换元素的显示状态
2.原理是修改元素的display,实现显示隐藏
3.指令后面的内容,最终都会解析为布尔值
4.值为true元素显示,值为false元素隐藏

7. v-if

1.v-if指令的作用是:根据表达式的真假切换
2.元素的显示状态本质是通过操纵dom元素来切换显示状态
3.表达式的值为true,元素存在于dom树中,为false,从dom树中移除
4.频繁的切换v-show,反之使用v-if,前者的切换消耗小

8. v-for

1.v-for指令的作用是:根据数据生成列表结构
2.数组经常和v-for结合使用
3.语法是( item,index ) in数据
4.item和index可以结合其他指令一起使用
5.数组长度的更新会同步到页面上,是响应式的

9. v-model

1.v-model指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单元素值相关联
3.绑定的数据——表单元素的值

4. 侦听（watch）

watch 可以让我们监控一个值的变化。从而做出相应的反应。

5. 过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的

情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

6. 钩子函数

• beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调 用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是init。

• created：在创建实例之后进行调用。

• beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

• mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在 用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就 是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成三

• beforeDestroy：该函数将在销毁实例前进行调用 。

• destroyed：改函数将在销毁实例时进行调用。

• beforeUpdate：组件更新之前。

• updated：组件更新之后。

7. vue 模块化开发

1、npm install webpack -g 
全局安装 webpack 

2、npm install -g @vue/cli-init 
全局安装 vue 脚手架 

3、初始化 vue 项目； 
vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目

4、启动 vue 项目； 
项目的 package.json 中有 scripts，代表我们能运行的命令 
npm start = npm run dev：启动项目 
npm run build：将项目打包

8. 项目结构

目录文件	说明
build	项目构建（webpack）相关代码
config	配置目录，包括端口号
node_modules	npm install 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets:放置一些图片,如logo等。 components:目录里面放了一个组件文件,可以不用。 App.vue:项目入口文件，我们也可以直接将组件写这里,而不使用components目录。main.js:项目的核心文件。
static	静态资源目录、如图片、字体等
index.html	首页入口文件
package.json	项目配置文件

五、Babel

Babel 是一个 JavaScript 编译器，我们可以使用 es 的最新语法编程，而不用担心浏览器兼

容问题。他会自动转化为浏览器兼容的代码

六、Webpack

自动化项目构建工具。gulp 也是同类产品