前端-动态web技术

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值