ES6
let关键字
<script>
// es6 定义变量
// js定义：var 没有范围，同一变量可以声明多次
// es6: let 作用范围代码快，同一变量只能声明一次
{
var a = 1
let b = 2
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
</script>
const
<script>
// 定义常量：必须初始化，不能改变
const PI = 3.14
PI = 3 // Uncaught TypeError：Assignment to constant variable.
const C // Unvaught SyntaxError：Missing initializer in const declaration
</script>
创建解构赋值
解构赋值是对赋值运算符的扩展，它针对数组/对象进行匹配，赋值；
<script>
//数组
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
//es6
let [x, y ,z] = [10, 20, 30]
console.log(x, y ,z)
// 对象
let user = {name: 'a', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// es6
let{name, age} = user // 注意：结的变量必须是user中的属性
console.log(name, age)
</script>
模版字符串
模版字符串，可以定义普通字符串、多行字符串、加入变量和表达式、调用函数；
<script>
// 多行字符串
let str1 = `hello,
es6`
console.log(str1)
// 字符串插入变量/表达式
let name = "张三"
let age = 18
let str2 = `你是${name},今年${age + 10}岁`
console.log(str2)
// 字符串中调用函数
function f(){
return "have function"
}
let str3 = `str3 = ${f()}`
console.log(str3)
</script>
对象
<script>
const name = "张三"
const age = 18
// 传统方式
const p1 ={name: name, age: age}
console.log(p1)
// es6
const p2 = {name, age}
console.log(p2)
</script>
方法简写
<script>
// 传统
const person1 = {
sayHi:function(){
console.log("传统方法")
}
}
// es6
const person2 = {
sayHi(){
console.log("es6")
}
}
person1.sayHi()
person2.sayHi()
</script>
对象扩展运算符
<script>
// 1、拷贝对象
let person1 = {"name": "张三", age: 18}
let person2 = {...person1}
console.log(person2)
// 2、合并对象
let name = {"name": "张三"}
let age = {age: 18}
let person3 = {...name, ...age}
console.log(person3)
</script>
箭头函数
<script>
// 传统
var f1 = function(a, b){
let sum = a + b
return sum
}
console.log(f1(1, 2))
// es6
var f2 = (a, b) => a+b
console.log(f2(3, 4))
</script>
Vue
入门
1、创建html页面，生成基础代码
2、引入vue.js依赖
3、创建div标签
4、编写vue代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app', // 绑定vue作用的范围
data: { // 定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
抽取代码片段
{
"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、单向数据绑定 v-bind
v-bind特性被称为指令。指令带有前缀v-
出了使用插值{{}}表达式进行数据渲染，也可以使用v-bind指令，它的简写形式就是冒号(😃
<!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">
<!-- v-bind 单向数据绑定 -->
<h1 v-bind:title="message">
{{conent}}
</h1>
<!-- 简写 -->
<h2 :title="message">
{{conent}}
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
conent: '我是标题',
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
2、双向数据绑定 v-model
<!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">
<input type="text" v-bind:value="aObject.keyword"/>
<input type="text" v-model:value="aObject.keyword"/>
<p>{{aObject.keyword}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
aObject:{
keyword: '键值'
}
}
})
</script>
</body>
</html>
条件
v-if/v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="message==='A'">是A</h1>
<h1 v-else>不是A</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'A'
}
})
</script>
</body>
</html>
循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--从数组中取对象 -->
<li v-for="(array, index) in arrays">
{{array.messages}}--{{index}}
</li>
</div>
<!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arrays:[
{messages:'aa'},
{messages:'bb'}
]
}
})
</script>
</body>
</html>
vue7大属性
JavaScript
概述
JavaScript是一门弱类型脚本语言；JavaScript为了在浏览器中运行。
环境：IDEA配置ES6；
原理
javascript中一切皆对象，只有一个全局作用域window对象，全局变量都在window对象里。
格式：
对象：{}
数组：[]
键值对：key:value
外部引入JavaScript.js
// 外部引入数据类型
数值、文本、图形、音频、视频…
var 变量
var a = 1;
let a = 1; // 局部变量
number
123 // 整数
12.3 // 小数
1.12e // 科学计数法
-99 // 复数
NAN // not a number不是一个数值
Infinity// 无穷大
字符串
‘abc’ “abc”
布尔值
true false
逻辑运算符
&& 与
|| 或
! 非
比较运算符
= 赋值
== 等于 （类型不一样，值一样）
=== 绝对等于 （类型一样，值一样）
null和undefind
● null 空
● undefind 未定义
数组
// 不需要相同对象，越界汇报undefind
var arr = [1, 2, “sda”, null, true];
对象
// 大括号，每个属性之间用逗号隔开，最后一个不需要
var person = {
name:“123”,
tage:[1, 2, 3]
}
字符串
字符串不可变
// 多行字符串
var m =
sda as sd 你好
// 模板字符串
let name = “zui”;
let msg = ‘你好，&{name}’
str.length // 字符串长度
str.substring(1) // 字符串截取,1到最后一个
str.substring(1,3) // 字符串截取
数组
// Array可包含任意类型
// 假如给arrlength赋值，数组大小会变化，赋值过小元素会丢失；
arr.indexof() // 通过元素获取第一次出现时下标索引
arr.slice() // 截取字符串一部分，返回一个新数组
arr.push() // 压入到尾部
arr.pop() // 弹出尾部元素
arr.unshift() // 压入到头部
arr.shift() // 弹出头部元素
arr.sort() // 排序
arr.reverse() // 元素反转
arr.concat() // 拼接，返回一个新数组
arr.join(’-’) // 打印拼接数组，使用特定字符串连接
// 多维数组
arr = [[1, 2], [3, 4]];
arr[1, 1]; // 访问
对象
// 若干个键值对
// {…} 表示一个对象，键值对描述属性 xxx:xxx,多属性逗号隔开，最后一个不用。
// 所有键都是字符串，值是任意对象！
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person = {
name:‘zui’,
age:20,
email:‘123@.163.com’
}
delete.person.name // 动态删除
person.aa = ‘添加’ // 动态添加
‘age’ in person // 判断元素/方法person是否拥有
person.hasOwnProperty(‘toString’) // 判断一个属性是否是对象自身拥有的
流程控制
// if判断
let age = 3;
if(age < 3){
alert(“haha”);
}else if(age < 5){
alert(“小于5”);
}else{
alert(“否则”);
}
// while循环
while(age<100){
console.log(age);
}
// for循环
for(let i = 0; i < 100; i++){
console.log(i);
}
// forEach循环
var age = [‘1’, ‘2’, ‘3’];
age.forEach(function(value)){
console.log(value);
}
// for in 取下标
for(var num in age){
console.log(age[num]);
}
// for of 取值
for(var num of age){
console.log(num);
}
Map 和 Set
ES6 新特性
var map = new Map([[‘a’, 100], [‘b’, 90], [‘c’, 80]]);
var name = map.get(‘a’); // 通过key取值
console.log(name);
// Set 无序不重复的集合
var set = new Set([1, 3, 2, 1, 1]);
console.log(set);
API方法
alert() // 方法用于显示带有一条指定消息和一个 OK 按钮的警告框
console.log() // 输出
isNaN() // 判断这个值是否为NaN
函数
函数定义
// 如果函数没有执行return，结果返回undefind
function hanshu(x){
if(x > 0){
return x;
}else{
return -x;
}
}
hanshu(10);
// function(x){} 这是一个匿名函数，把结果给a
var a = function(x){
if(x > 0){
return x;
}else{
return -x;
}
}
a(10);
// Javascript可不存在参数，可多个参数。参数问题需要处理。
// 不存在参数，可自定义异常规避
var a = function(x){
if(typeof x!== ‘number’){
throw ‘Not a number’;
}
if(x > 0){
return x;
}else{
return -x;
}
}
// 参数存在多个，arguments 传递进来的所有参数，是一个数组
var hanshu(x){
if(aguments.length>2){
thow ‘>2’
}
}
变量的作用域
// 函数内变量作用域函数内，嵌套函数可访问。内部函数与外部函数重名，从自身开始。
// 只有一个全局作用域window对象，所有全局变量都绑定在全局对象window下
// 如果其它文件绑定了相同的全局变量，会冲突。解决，定义一个唯一全局变量,把自己的代码全部放入。
// 唯一全局变量
var zui = {};
// 定义全局变量
zui.name = ‘zuimeng’;
zui.add = hanshu(){
retrun 0;
}
// let局部作用域 解决局部变量冲突问题：出来代码块还能使用
// const 常量
// this指向调用它的
// apply可以指定this指向
内部对象
Date
// Date
var now = new Date();
now.getTime(); // 时间戳
JSON
// JSON轻量级数据交换格式
var user ={
namem:zui,
age:1
};
// 对象转化为JSON字符串
var jsonUser = JSON.stringify(user);
// json字符串转化为对象
var ovj = JSON.parse(‘jsonUser的值’);
ajax
javascript面向对象的不同
每一个函数都有一个prototype属性，这个属性指向函数的原型对象。
原型继承
var student = {
name:‘aa’,
age:3,
run:(){
console.log(this.name + ‘run…’);
}
var zui = {
name:'zui'
}
// zui的原型是student
zui.__proto__ = student;
class继承
class Student{
constructor(name){
this.name = name;
};
hello(){
console.log('aa');
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
class XiaoStudent extends Student{
constructor(name,age){
super(name);
this.age;
}
}
操作BOM对象
BOM：浏览器对象模型
window对象 // 代表浏览器窗口
navigator对象 // 封装了浏览器的信息
screen // 代表屏幕尺寸
location // 代表当前页面的URL信息
location.assign(’’) //设置新地址
document // 当前页面HTML，DOM树
document.cookie;// 获取cookie
history // 浏览器历史记录
劫持cookie原理，
通过documwent.cookie获取，ajax上传
服务器端设置cookie：httpOnly屏蔽
操作DOM对象
DOM：文档对象模型
浏览器网页就是一个Dom树形结构
● 更新Dom节点
● 遍历Dom节点：得到Dom节点
● 删除Dom节点
使用documents对象的方法获取Dom节点
1.获取节点
document.getElementById(id); //返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name); //返回带有指定名称的节点集合 注意拼写:Elements
document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合 注意拼写：Elements
document.getElementsByClassName(classname); //返回带有指定class名称的对象集合 注意拼写：Elements
2.修改
var a = document.getElementById(id);
a.innerText = ‘更新的文本’; // 修改文本
a.style.color = ‘#ff0000’; // 修改样式
3.删除
a.removechild(‘需要获取子节点’); // 通过父节点删除子节点
4.插入节点
如果Dom节点是空，可通过innerHtml增加元素，Dom非空就不能这样，会覆盖。
a.appendchiled(‘节点’);
document.insertBefore(newNode,referenceNode); //在某个节点前插入节点
a.parentNode.appendChild(newNode); //给某个节点添加子节点
5.创建节点
var b = document.createElement(‘p’); // 填标签名
b.id = ‘idname’; // 给标签添加属性
操作表单
表单：
文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
a.value // 获取节点，获取值
MD5加密，需要先通过外部引入MD5的js文件
a.value = md5(a.value); // 提交的时候前端位输会变成加密位数，一看可看出来使用的代码。
狂神P25，没理解到。
jQuery
jQuery库里面存在大量的JavaScript函数
环境：获取jQuery，引入jQuery的js文件
获取元素
$().clock(); // css选择器 + 事件;
// css中的选择器
$(‘p’).clock(); // 标签选择器
$(’#id’).clock(); // id选择器
$(’.class’).clock();// class选择器
事件、操作DOM；等都可用查文档。
文档工具站：https://jquery.cuishifeng.cn/
如何巩固Js
看游戏源码，直接扒网站
Layer 弹窗组件
Element-UI
Ant Design
