大前端进阶
前端三剑客：HTML+CSS+JS
前端框架：jQuery、BootStrap、Vue
vue的思想是模块化，需要了解vue的各个模块的使用。熟悉开源脚手架element—ui的使用。
VsCode使用
熟悉vscode插件安装：离线和在线安装手册
常见需要安装的插件：chinese、eslint、liveserver、node.js modules intellisence、Vetur、VueHelper
NodeJs
注意：安装nodejs之前需要安装Python。
安装nodejs：详见官方文档
安装nodejs之后默认安装npm，该命令类似服务器的yum命令。
npm install vue 下周vue依赖的包
node test.js (程序名) 可以直接运行js文件，无须浏览器访问
服务端js示例：
const http=require('http')
http.createServer(function (request,response){
response.writeHead(200,{'content-type':'text/plain'})
response.end('hello world node server')
}).listen(8080)
console.log('server running at ')
ES6语法详解
es6是一个规范，JavaScript的下一代标准。js可以面向对象编程，
idea配置es6的语法支持
语法：
变量的命令
var：申明的变量没有作用域，都可以访问，var可以申明多次
let：申明的变量作用域仅限制于{}内，同一个let只能申明一次
const ：常量，常量不可以被使用，es6中常量必须初始化。 （早期var PI='3.14' 全部大写就是常量）
结构化赋值
传统模式
let a=1，b=1，c=3
es6语法
let [a,b,c]=[1,2,3]
Console.log（a,b,c）
对象赋值：
let user={name:'zhangsan',age:18}
let {name,age}=user //结构的变量名和对象的属性名相同
Console.log(name,age)
模板字符串
let name = 'hello'
let age = 3
// 传统的，大家的习惯! {name} age:${age}` // 模板字符串，真正的前端开发console.log(infoes6)
对象申明简写
const age = 3
const name = '张三'
// 传统的赋值
const person1 = { age: age, name: name } console.log(person1)
// es6赋值
const person2 = { name, age } console.log(person2)
定义方案简写
const person1 = { // 方法
sayHi: function () { console.log("hi")
} }
person1.sayHi();
// ES6
const person2 = {
sayHi() {
console.log('Hi 2') }
} person2.sayHi();
对象拓展运算符
let person = { name: 'coding', age: 3 } let someoneOld = person // 引用赋值
// 对象拷贝,两个独立的对象
let someone = { ...person }
someoneOld.name = 'kuangshen' someone.name = 'kuangshen new' console.log(person) console.log(someoneOld) console.log(someone)
默认参数设置
function showInfo(name, age = 3) {
console.log(name + ',' + age)
}
// 测试
showInfo('coding', 18)
showInfo('coding')
showInfo('coding', undefined)
showInfo('coding', null)
箭头函数：参数=>函数体
