【web项目 前端基础知识点 03】
一、es6基本语法
基本语法：
1、定义变量
<script>
/*
var修饰的变量没有作用域，可以在代码块中声明也可以在修改变量值
let修饰的变量是有局部作用域的，不能再代码块中声明并且修饰的值不能修改
*/
{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b) // b is not defined
var m = 12;
var m = 13
let n = 14;
</script>
2、定义常量
<script>
/*
const修饰常量：
不能被修改
一旦声明必须初始化，即：必须赋值
*/
const PY_I = 3.14
console.info(PY_I)
</script>
3、结构赋值
<script>
/*
解构赋值是对赋值运算符的扩展
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
*/
// 常规赋值
let a=11,b=22,c=33
console.info(a,b,c)
//1、数组解构
let [x,y,z] = [1,2,3]
console.log(x,y,z)
// 2、对象解构
let user = {name: '张三',age:18}
let {name,age} = user
console.log(name,age)
</script>
4、模版字符串
<script>
/*
模版字符串相当于加强版的字符串，用反引号'，除了作为普通字符串，还可以
用来定义多行字符串，还可以在字符串中加入变量和表达式
*/
let name = 'lucy'
let age = 18
let info = `My name is ${name},I am ${age+1}`
console.info(info)
</script>
5、声明对象简写
<script> const name='lucy' const age = 18 // es6声明对象简写 const user = {name,age} console.log(user) </script>
6、对象扩展运算符
<script>
/*
扩展运算符（...）用于取出参数对象所有可遍历属性
然后拷贝到当前对象
*/
// 对象复制
let person = {name:'大宝',age:18}
let someone = {...person}
console.info(someone)
// 对象合并
let age = {age:22}
let name = {name:'Amy'}
let person2 = {...name,...age}
console.log(person2)
</script>
7、箭头函数
<script>
/*
语法：参数 = > 函数体
*/
//传统方式，函数的定义
var f1 = function(a){
return a
}
//箭头函数定义
var f2 = a => a
console.log(f2(5))
/*
当箭头函数没有参数或者多个参数，要用（）括起来
当箭头函数体有多行语句，用{}包裹起来，表示代码块
当只有一行语句，并且需要返回结果时，可以省略{}，结果自动返回
*/
var f3 = (m,n) => m+n
console.log(f3(3,4))
</script>
二、vue
1、vscode创建代码片段
文件 => 首选项 => 用户片段 => 新建全局代码片段文件：
{ "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" } }
以后再vue的html文件生成代码，直接敲vuehtml -->就能生成vue标准的代码了
2、vue指令语法：
指令带有前缀v-，除了使用“插值表达式{{}}”进行数据渲染(取值)，也可以使用v-bind指令，它的简写冒号（:）
# 单项绑定：
# 双向绑定：
# 绑定事件：-->主要针对的是方法
#条件指令
v-if: 条件判断 v-else:
# 循环指令（列表渲染）
# 生命周期
三、axios
1、作用：axios独立于vue的一个项目，可以用于浏览器和node.js中发射红ajax请求
#案例模拟：模拟一个后端接口返回的JSON数据，然后前端通过axios取此文件内的data中的items数据
user.json
{ "code":200, "message":"成功", "data":{ "items":[ {"name":"lucy","age":20}, {"name":"tom","age":21}, {"name":"jack","age":22} ] } }
第一步：在html页面引入axios的js文件，包含vue的js文件
第二步：编写具体的代码
四、element-ui
官网：https://element.eleme.cn/#/zh-CN
五、node js
javaScript运行环境（脱离浏览器可以直接运行）；模拟服务端效果
