【Java Web】002 -- JS & Vue快速入门

时间:2021-03-04 01:24:26

目录

一、JS快速入门

1、什么是JavaScript?

2、JS引入方式

①、示例代码

3、JS基础语法

①、书写语法

②、变量

③、数据类型

④、运算符

⑤、流程控制语句

4、JS函数

①、第一种函数定义方式 function funcName(参数1,……)

②、第二种函数定义方式 var funcName = function(参数1,……)

5、JS对象

①、Array

②、String

③、JS自定义对象

④、JSON

⑤、BOM(浏览器对象模型)

⑥、DOM(文档对象模型)

⑦、DOM案例

6、JS事件监听

①、事件绑定

②、常见事件

③、事件监听案例

二、Vue快速入门

1、什么是Vue?

①、MVVM

②、Vue双向数据绑定书写流程

2、Vue的常用指令(v-xxx)

①、v-bind

②、v-model

③、v-on

④、v-if(符合条件才渲染)

⑤、v-show(全部渲染)

⑥、v-for

⑦、案例:通过Vue完成表格数据的渲染展示

3、Vue的生命周期

①、生命周期状态图

②、mounted示例代码

③、小结


一、JS快速入门

【Java Web】002 -- JS & Vue快速入门

1、什么是JavaScript?

【Java Web】002 -- JS & Vue快速入门

ECMA:(ECMA国际)

【Java Web】002 -- JS & Vue快速入门

2、JS引入方式

【Java Web】002 -- JS & Vue快速入门

①、示例代码

【Java Web】002 -- JS & Vue快速入门

外部JS文件:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

3、JS基础语法

【Java Web】002 -- JS & Vue快速入门

①、书写语法

【Java Web】002 -- JS & Vue快速入门

输出语句:window.alert()、document.write()、console.log()

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

②、变量

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

③、数据类型

原始数据类型(5种):

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

为什么typeof null 会返回 object:

【Java Web】002 -- JS & Vue快速入门

④、运算符

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

类型转换:

【Java Web】002 -- JS & Vue快速入门

示例代码:(其它类型转为数字)

【Java Web】002 -- JS & Vue快速入门

示例代码:(其它类型转为boolean)

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

⑤、流程控制语句

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

4、JS函数

【Java Web】002 -- JS & Vue快速入门

①、第一种函数定义方式 function funcName(参数1,……)

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

②、第二种函数定义方式 var funcName = function(参数1,……)

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

5、JS对象

重点关注五种:

【Java Web】002 -- JS & Vue快速入门

①、Array

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

遍历数组:(与Java相同)

【Java Web】002 -- JS & Vue快速入门

Array的成员函数:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

示例代码:forEach():仅遍历有值元素

【Java Web】002 -- JS & Vue快速入门

push():添加元素

【Java Web】002 -- JS & Vue快速入门

splice():删除元素

【Java Web】002 -- JS & Vue快速入门

②、String

【Java Web】002 -- JS & Vue快速入门

示例代码:

创建字符串对象:

【Java Web】002 -- JS & Vue快速入门

length:获取字符串的长度

【Java Web】002 -- JS & Vue快速入门

charAt():获取指定位置的字符

【Java Web】002 -- JS & Vue快速入门

indexOf():检索字符串xx所在的位置

【Java Web】002 -- JS & Vue快速入门

trim():去除字符串左右两侧的空格

【Java Web】002 -- JS & Vue快速入门

substring():截取字符串(含头不含尾)

【Java Web】002 -- JS & Vue快速入门

③、JS自定义对象

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

方法简化写法:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

④、JSON

【Java Web】002 -- JS & Vue快速入门

基础语法:

定义JSON:

【Java Web】002 -- JS & Vue快速入门

解析:

【Java Web】002 -- JS & Vue快速入门

⑤、BOM(浏览器对象模型)

【Java Web】002 -- JS & Vue快速入门

BOM的五大对象

【Java Web】002 -- JS & Vue快速入门

重点了解Window和Location对象即可

Window对象:

【Java Web】002 -- JS & Vue快速入门

示例代码:confirm()

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

示例代码:setInterval()

【Java Web】002 -- JS & Vue快速入门

示例代码:setTimeout()

【Java Web】002 -- JS & Vue快速入门

Location对象:

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

⑥、DOM(文档对象模型)

【Java Web】002 -- JS & Vue快速入门

DOM树:

【Java Web】002 -- JS & Vue快速入门

DOM可以进行的操作:

【Java Web】002 -- JS & Vue快速入门

DOM案例:

【Java Web】002 -- JS & Vue快速入门

改变标题内容和颜色:

【Java Web】002 -- JS & Vue快速入门

删除最后一个:

【Java Web】002 -- JS & Vue快速入门

DOM分三种:

【Java Web】002 -- JS & Vue快速入门

如何获取指定的元素对象:

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

第一步:获取Element元素

【Java Web】002 -- JS & Vue快速入门

第二步:查询官方手册,找到对应方法

【Java Web】002 -- JS & Vue快速入门

⑦、DOM案例

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

6、JS事件监听

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

①、事件绑定

点击事件:

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

②、常见事件

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

③、事件监听案例

【Java Web】002 -- JS & Vue快速入门

示例代码:

点亮/熄灭灯泡:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

输入框聚焦--小写,失焦--大写:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

全选、反选:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

二、Vue快速入门

1、什么是Vue?

【Java Web】002 -- JS & Vue快速入门

①、MVVM

【Java Web】002 -- JS & Vue快速入门

②、Vue双向数据绑定书写流程

【Java Web】002 -- JS & Vue快速入门

示例程序:

【Java Web】002 -- JS & Vue快速入门

效果:修改输入框中的是数值,后面的字符也会随之改变

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

2、Vue的常用指令(v-xxx)

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

如果没有声明,则会报错:

【Java Web】002 -- JS & Vue快速入门

①、v-bind

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

使用v-bind绑定到了数据模型上的变量,这时,如果数据模型变量,那么v-bind的元素也会变

【Java Web】002 -- JS & Vue快速入门

②、v-model

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

③、v-on

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

简写形式:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

④、v-if(符合条件才渲染)

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

⑤、v-show(全部渲染)

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

⑥、v-for

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

⑦、案例:通过Vue完成表格数据的渲染展示

【Java Web】002 -- JS & Vue快速入门

示例代码:

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

3、Vue的生命周期

【Java Web】002 -- JS & Vue快速入门

①、生命周期状态图

【Java Web】002 -- JS & Vue快速入门

②、mounted示例代码

【Java Web】002 -- JS & Vue快速入门

【Java Web】002 -- JS & Vue快速入门

效果:

【Java Web】002 -- JS & Vue快速入门

③、小结

后续,我们会在mounted这个生命周期的钩子方法中来发送异步请求到服务端来获取数据

【Java Web】002 -- JS & Vue快速入门