2.vue模板语法
1.Vue模板语法有2大类：1. 插值语法：功能：用于解析标签体内容。写法：，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）。举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
注意:Vue中的模板语法，都是基于数据驱动的，即：当数据发生变化时，页面会自动更新。
代码：
123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>模板语法</title> <!-- 引入Vue --> ...
1.初识vue
1.1 官网
中文网：https://cn.vuejs.org/
英文网：https://vuejs.org/
1.2 什么是vueVue 是一套用来动态构建用户界面的渐进式JavaScript框架
构建用户界面：把数据通过某种办法变成用户界面
渐进式：Vue可以自底向上逐层的应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件
作者：尤雨溪
1.3 vue的特点
遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注 UI，可以引入其它第三方库开发项目
采用组件化模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM 和 Diff算法，尽量复用DOM节点
1.4 vue与其他js框架的关联
借鉴 angular 的 模板 和 数据绑定 技术
借鉴 react 的 组件化 和 虚拟DOM 技术
1.5 vue周边库
vue-router：路由
vue-resource(axios)：ajax 请求
vuex：状态管理（它是 vue 的插件但是没有用 v ...
WebApi第六天
Web APIs - 第6天笔记
目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力
正则表达式
综合案例
阶段案例
正则表达式正则表达式（Regular Expression）是一种字符串匹配的模式（规则）
使用场景：
例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
正则基本使用
定义规则
1const reg = /表达式/
其中/ /是正则表达式字面量
正则表达式也是对象
使用正则
test()方法 用来查看正则表达式与指定的字符串是否匹配
如果正则表达式与指定的字符串匹配 ，返回true，否则false
123456789101112<body> <script> // 正则表达式的基本使用 const str = 'web前端开发' // 1. 定义规则 const reg = /web/ // 2. 使用正则 test() co ...
WebApi第五天
Web APIs - 第5天笔记
目标： 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力
BOM操作
综合案例
js组成JavaScript的组成
ECMAScript:
规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等
Web APIs :
DOM 文档对象模型， 定义了一套操作HTML文档的API
BOM 浏览器对象模型，定义了一套操作浏览器窗口的API
window对象BOM (Browser Object Model ) 是浏览器对象模型
window对象是一个全局对象，也可以说是JavaScript中的顶级对象
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window
定时器-延迟函数JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：
1setT ...
WebApi第四天
Web APIs - 第4天
进一步学习 DOM 相关知识，实现可交互的网页特效
能够插入、删除和替换元素节点
能够依据元素节点关系查找节点
日期对象掌握 Date 日期对象的使用，动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
实例化123456789// 1. 实例化// const date = new Date(); // 系统默认时间const date = new Date('2020-05-01') // 指定时间// date 变量即所谓的时间对象console.log(typeof date)
方法 123456 // 1. 实例化const date = new Date();// 2. 调用时间对象方法// 通过方法分别获取年、月、日，时、分、秒const year = date.getFullYear(); // 四位年份const month = date.getMonth(); / ...
WebApi第三天
Web APIs - 第3天
进一步学习 事件进阶，实现更多交互的网页特效，结合事件流的特征优化事件执行的效率
掌握阻止事件冒泡的方法
理解事件委托的实现原理
事件流事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。
简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。
捕获和冒泡了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：
12345678910111213141516171819202122232425262728293031323334353637383940<body> <h3>事件流</h3> <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p> <div class="outer"> <div class="inner"> ...
WebApi第二天
Web APIs - 第2天
学会通过为DOM注册事件来实现可交互的网页特效。
能够判断函数运行的环境并确字 this 所指代的对象
理解事件的作用，知道应用事件的 3 个步骤
学习会为 DOM 注册事件，实现简单可交互的网页特交。
事件事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。
例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片
事件监听结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。
addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。
123456789101112131415161718192021222324252627<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam ...
WebApi第一天
复习：
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
删除数组：
splice(起始位置， 删除的个数)
比如：1
123let arr = ['red', 'green', 'blue']arr.splice(1,1) // 删除green元素console.log(arr) // ['red, 'blue']
添加元素
splice(起始位置，删除个数，添加数组元素)
12345let arr = ['red', 'green', 'blue']//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink//console.log(arr) // ['red', 'pink', 'green', 'blue']arr.splice(1, 0, 'pi ...
JavaScript进阶第四天
JavaScript 进阶 - 第4天深浅拷贝浅拷贝首先浅拷贝和深拷贝只针对引用类型
浅拷贝：拷贝的是地址
常见方法：
拷贝对象：Object.assgin() / 展开运算符 {…obj} 拷贝对象
拷贝数组：Array.prototype.concat() 或者 […arr]
如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)
思考？
直接赋值和浅拷贝有什么区别？
a.直接赋值的方法,只要是对象，都会相互影响，因为是直接拷贝对象栈里面的地址。
b.浅拷贝如果是一层对象，不互相影响，如果是多层对象，会相互影响。
浅拷贝怎么理解？
a.拷贝对象之后，如果对象中的属性是基本数据类型，修改拷贝之后的对象，不会影响原对象。b.如果对象中的属性是引用数据类型，修改拷贝之后的对象，会影响原对象。
123456789101112131415161718192021<script> const obj = { uname: 'pink', age: 18, fami ...
JavaScript进阶第三天
JavaScript 进阶 - 第3天笔记
了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。
了解面向对象编程的一般特征
掌握基于构造函数原型对象的逻辑封装
掌握基于原型对象实现的继承
理解什么原型链及其作用
能够处理程序异常提升程序执行的健壮性
编程思想
学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。
面向过程面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次
调用就可以了。
举个栗子：蛋炒饭
面向对象面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。
面向对象的特性：
封装性
继承性
多态性
构造函数对比以下通过面向对象的构造函数实现的封装：
12345678910111213141516171819202122<s ...
JavaScript进阶第二天
JavaScript 进阶 - 第2天
了解面向对象编程的基础概念及构造函数的作用，体会 JavaScript 一切皆对象的语言特征，掌握常见的对象属性和方法的使用。
了解面向对象编程中的一般概念
能够基于构造函数创建对象
理解 JavaScript 中一切皆对象的语言特征
理解引用对象类型值存储的的特征
掌握包装类型对象常见方法的使用
深入对象
了解面向对象的基础概念，能够利用构造函数创建对象。
构造函数构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。
12345678<script> // 定义函数 function foo() { console.log('通过 new 也能调用函数...'); } // 调用函数 new foo;</script>
总结：
使用 new 关键字调用函数的行为被称为实例化
实例化构造函数时没有参数时可以省略 ()
构造函数的返回值即为新创建的对象
构造函数内部的 return 返回的值无效！
注：实践中为了 ...
JavaScript进阶第一天
JavaScript 进阶 - 第1天
学习作用域、变量提升、闭包等语言特征，加深对 JavaScript 的理解，掌握变量赋值、函数声明的简洁语法，降低代码的冗余度。
理解作用域对程序执行的影响
能够分析程序执行的作用域范围
理解闭包本质，利用闭包创建隔离作用域
了解什么变量提升及函数提升
掌握箭头函数、解析剩余参数等简洁语法
作用域
了解作用域对程序执行的影响及作用域链的查找机制，使用闭包函数创建隔离作用域避免全局变量污染。
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
局部作用域局部作用域分为函数作用域和块作用域。
函数作用域在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
123456789101112<script> // 声明 counter 函数 function counter(x, y) { // 函数内部声明的变量 const s = x + y console.log(s) // 18 } // 设用 coun ...
JS基础第五天
JavaScript 基础 - 第5天
知道对象数据类型的特征，能够利用数组对象渲染页面
理解什么是对象，掌握定义对象的语法
掌握数学对象的使用
对象
对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
语法声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 基础 - 对象语法</title></head><body> <script> // 声明字符串类型变量 let str = 'hello world!' ...
JS基础第四天
JavaScript 基础 - 第4天笔记
理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。
理解函数的封装的特征
掌握函数声明的语法
理解什么是函数的返回值
知道并能使用常见的内置函数
函数
理解函数的封装特性，掌握函数的语法规则
声明和调用函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
声明（定义）声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
调用声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。
123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 基础 - 声明和调用</title></head> ...
JS基础第三天
JavaScript 基础第三天笔记if 多分支语句和 switch的区别：
共同点
都能实现多分支选择， 多选1
大部分情况下可以互换
区别：
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
结论：
当分支比较少时，if…else语句执行效率高。
当分支比较多时，switch语句执行效率高，而且结构更清晰。
for 语句
掌握 for 循环语句，让程序具备重复执行能力
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
实现循环的 3 要素
1234567891011121314<script> // 1. 语法格式 // for(起始值; 终止条件; 变化量) &# ...
JS基础第二天
JavaScript 基础 - 第2天
理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力
运算符
语句
综合案例
运算符算术运算符数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
运算符
作用
+
求和
-
求差
*
求积
/
求商
%
取模（取余数），开发中经常用于作为某个数字是否被整除
注意：在计算失败时，显示的结果是 NaN （not a number）
12345678910111213141516// 算术运算符console.log(1 + 2 * 3 / 2) // 4 let num = 10console.log(num + 10) // 20console.log(num + num) // 20// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除console.log(4 % 2) // 0 console.lo ...
JS基础第一天
JavaScript 基础 - 第1天
了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。
体会现实世界中的事物与计算机的关系
理解什么是数据并知道数据的分类
理解变量存储数据的“容器”
掌握常见运算符的使用，了解优先级关系
知道 JavaScript 数据类型隐式转换的特征
介绍
掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用
引入方式JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
内部方式通过 script 标签包裹 JavaScript 代码
12345678910111213<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入 ...
JS基础
第一天1. 编程语言12345678910111213141516171819<!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> <script> alert('我是编程语言，来控制电脑网页弹出你好'); alert('我是编程语言，来控制电脑网页弹出你好'); </script>< ...
