2024/9/19
DAY2:JS与Vue的认识
属于前端内容，看懂即可
手册网站：w3school 在线教程
一、JavaScript
负责网页的行为（交互效果）
（一）JavaScript
1.JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
2.JavaScript和java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
3.JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
4.ECMAScript（ES6）是最新的JavaScript版本（2015年）。
5.ECMA:ECMA国际（前为欧洲计算机制造商协会），制定标准化的脚本程序设计语言ECMAScript，这种应用得到广泛应用。而JavaScript是遵循ECMAScript的标准的。
（二）JavaScript引入方式
1.内部脚本
将JS代码定义在HTML页面中
·JavaScript代码必须位于<sript></script>标签之间
·在HTML文档中，可以在任意地方，放置任意数量的<script>
·一般把脚本置于<body>元素的底部，可改善显示速度
2.外部脚本
将JS代码定义在外部JS文件中，然后引入到HTML页面中
·外部JS文件中，只包含JS代码，不包含<script>标签
·<script>标签不能自动闭合
二、JS基础语法
（一）书写语法
1.区分大小写：与java一样，变量名、函数名以及其他一切东西都是区分大小写的
2.每行结尾的分号可有可无
3.注释：
·单行注释：//注释内容
·多行注释：/*注释内容*/
4.大括号表示代码块
5.输出语句
·使用window.alert()写入警告框
·使用document.write()写入HTML输出
·使用console.log()写入浏览器控制台
（二）变量
1.JavaScript中用var关键字（variable的缩写）来声明变量
2.JavaScript是一门弱语言，变量可以存放不同类型的变量
3.变量名需要遵循如下规则：
·组成字符可以是任意字母、数字、下划线或美元符号
·数字不能作为开头
·建议使用驼峰命名
4.ECMAScript新增了let关键字来定义变量。用法类似于var，但是所声明的变量只在let关键字所在的代码块内有效，且不允许重复声明。
5.ECMAScript新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。
（三）数据类型、运算符、流程控制语句
1.数据类型
1.JavaScript中分为：原始类型 和 引用类型
·原始类型
number：数字（整数、小数、NaN(not a number)）
string：字符串，单双引号都可以
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined
（JS中，null==undefined结果是false）
2.使用typeof运算符可以获取数据类型
2.运算符
3.流程控制语句
·if...else if...else...
`switch
`for
`while
`do...while
官方参考文档：https://www.w3school.com.cn/jsref/jsref_statements.asp
4.函数
1.介绍：函数（方法）是被设计为执行特定任务的代码块
2.定义：JavaScript函数通过function关键字进行定义
3.注意
·形式参数不需要类型。因为JavaScript是一种弱语言
·返回值也不需要定义类型，可以在函数内部直接使用return返回即可
4.调用：函数名称（实际参数列表）
5.定义方式二
附：
三、JS对象
（一）Array
1.JavaScript中Array对象用于定义数组
2.定义
3.访问
4.注意：JavaScript中的数组相当于java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。
5.属性
length：设置或返回数组中元素的数量
6.方法
·forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数
·push()：将新元素添加到数组的末尾，并返回新的长度
·splice()：从数组中删除元素
·箭头函数（ES6）：用来简化函数定义法的。形式为：(...)=>{...}，如果需要给箭头函数起名字：var xxx = (...)=>{...}
（二）String
1.String字符串对象创建方式有两种
2.属性
length
3.方法
·charAt()：返回在指定位置的字符
·indexOf()：检索字符串
·trim()：去除字符串两边的空格
·substring()：提取字符串中两个指定的索引号之间的字符
4.JavaScript自定义对象
·定义格式
·调用格式
（三）JSON
1.JSON介绍：
·概念：JavaScript Object Notation，JavaScript对象标记法
·JSON是通过JavaScript对象标记法书写的文本
·由于语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输
2.JSON基础语法
·定义
·JSON字符串转为JS对象
·JS对象转为JSON字符串
·注意：定义中键、值中的值value，数据类型为
·数字（整数或浮点数）
·字符串（在双引号中）
·逻辑值（Ture或False）
·数组（在方括号中）
·对象（在花括号中）
·null
·var关键字主要是用来声明定义变量的。使用为var操作符后跟变量名
（四）BOM
1.认识BOM
·BOM：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
·组成：
·Window：浏览器窗口对象
·Navigator：浏览器对象
·Screen：屏幕对象
·History：历史记录对象
·Location：地址栏对象
（主要看Window与Location即可）
2.Window
·介绍：
浏览器窗口对象
·获取：
直接使用window，其中window.可以省略
·属性：
·history：对History（历史记录）对象的只读引用
·location：用于窗口或框架的Location（地址）对象
·navigator：对Navigator（浏览器）对象的只读引用
·方法：
·alert():显示带有一段消息和一个确认按钮的警告框
·confirm():显示带有一段消息以及确认按钮和取消按钮的对话框
·setInterval():按照指定周期（一毫秒计）来调用函数或计算表达式
·setTimeout():在指定的毫秒数后调用函数或计算表达式
console：log () 静态方法 console.log() 方法向 Web 控制台输出一条信息
3.Location
·介绍：
地址栏对象
·获取：
使用window.location获取，其中window.可以省略
·属性：
·href：设置或返回完整的URL
（五）DOM
1.认识DOM
·概念：
Document Object Model，文档对象模型
·将标记语言的各个组成部分封装为对应的对象：
·Document：整个文档对象
·Element：（标签）元素对象
·Attribute：（标签）属性对象（例如：href）
·Text：文本对象
·Comment：注释对象
html文档被浏览器加载并解析之后，就会被封装成这五种对象，在浏览器的内存中，也会形成一个DOM结构（树）
·JavaScript通过DOM，就能够对HTML进行操作：
·改变HTML元素的内容
·改变HTML元素的样式（CSS）
·对HTML DOM 事件作出反应
·添加或删除HTML元素
2.DOM的基本组成
DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为三部分：
（1）Core DOM - 所有文档类型的标准模型（包括HTML和XML）：
·Document：整个文档对象
·Element：（标签）元素对象
·Attribute：（标签）属性对象（例如：href）
·Text：文本对象
·Comment：注释对象
（2）XML DOM - XML文档的标准模型
是核心DOM的子集
（3）HTML DOM - HTML文档的标准模型
是核心DOM的扩充，将HTML DOM中所有的HTML标签封装成了单独的元素对象
·Image：<img>
·Button：<input type=‘button’>
3.在DOM中获取元素对象
以达到改变具体文本的目的，例如：
·HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象实现的
·Document对象提供了以下获取Elemnet元素对象的函数：
·根据id属性值获取，返回单个Element对象
·根据标签名称获取，返回Element对象数组
·根据name属性值获取，返回Element对象数组
·根据class属性值获取，返回Element对象数组
·要进一步进行修改，则：
查询参考手册，属性、方法：
修改前后：
·补充说明：
仅靠 CSS 很难实现动态的、复杂的效果，但通过将 HTML 标签对象化，并结合 JavaScript 操作，可以动态控制和更新页面中的元素，实现超出 CSS 静态能力的效果。
如何进行标签对象化的操作：
-
通过 JavaScript 获取 DOM 元素
-
修改对象的属性和样式：一旦获取了 DOM 元素对象，就可以通过 JavaScript 修改它的属性、内容和样式，甚至添加事件监听器。
（六）DOM案例
目的：
代码实现：
查询如下：
四、JS事件监听
认识事件监听：
1.事件：
HTML事件是发生在HTML元素上的“事情”，如：
·按钮被点击
·鼠标移动到元素上
·按下键盘按键
2.事件监听：
JavaScript可以在事件被侦测到时 执行代码
（一）事件绑定
·方式一：
通过HTML标签中的事件属性进行绑定
·方式二：
通过DOM元素属性进行绑定
（二）常见事件
演示如下：
在已写好的HTML页面body中，有表单、表格、方法；这些方法都被绑定在了表单中的事件里
（<form> </form>
<table> </table>
<script> </script>）
一些代码示例：
（三）案例
需求：（视频导航P28）
实现一：
实现二：
实现三：
五、Vue
认识Vue：
·Vue是一套前端框架，免除原生JavaScript的DOM 操作，简化书写
·基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
·官网：https://v2.cn.vuejs.org/
(框架：是一个半成品软件，是一套可重用、通用的、软件基础代码模型。基于框架开发，更加快捷、更加高效)
Model：
数据模型，包含了很多业务数据以及数据的处理方法
View：
视图层，负责数据的展示即界面展示的HTML的标签
ViewModel：
是两者的桥梁，可以完成midel和view的双向数据绑定
·注：
·说数据模型是为了知道这是MVVM中的M，即模型，模型就是变量
·vue的核心就是MVVM中的VM，即视图模型，就是让变量能够像DOM一样直接展示
（一）Vue快速入门
1.新建HTML页面，引入Vue.js文件（可去官网下载）
2.在JS代码区域，创建Vue核心对象，定义数据模型
3.编写视图
（注意：插值表达式）
·形式：{{表达式}}
·内容可以是：
变量、三元运算符、函数调用、算术运算
（下载VueHelper插件在编写时可有提示）
（二）Vue常用指令
1.指令
HTML标签上带有v-前缀 的特殊属性，不同指令具有不同含义
2.常用指令
（1）v-bind与v-model
通过v-bind或者v-model绑定的变量，必须在数据模型中表明
（2）v-on
（3）v-if、v-else-if、v-else、v-show
（4）v-for
3.案例
（三）Vue生命周期
1.生命周期
指一个对象从创建到销毁的整个过程
2.生命周期的八个阶段：
每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
流程图：
3.mounted
（重点关注这一个）
挂载完成，Vue初始化成功，HTML页面渲染成功（发送请求到服务器端，加载数据）
扫一扫
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
