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

目录

一、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快速入门

1、什么是JavaScript?

ECMA:(ECMA国际)

2、JS引入方式

①、示例代码

外部JS文件:

效果:

3、JS基础语法

①、书写语法

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

示例代码:

效果:

②、变量

示例代码:

效果:

③、数据类型

原始数据类型(5种):

示例代码:

为什么typeof null 会返回 object:

④、运算符

示例代码:

类型转换:

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

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

⑤、流程控制语句

4、JS函数

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

效果:

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

示例代码:

5、JS对象

重点关注五种:

①、Array

示例代码:

效果:

遍历数组:(与Java相同)

Array的成员函数:

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

push():添加元素

splice():删除元素

②、String

示例代码:

创建字符串对象:

length:获取字符串的长度

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

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

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

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

③、JS自定义对象

示例代码:

方法简化写法:

效果:

④、JSON

基础语法:

定义JSON:

解析:

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

BOM的五大对象

重点了解Window和Location对象即可

Window对象:

示例代码:confirm()

效果:

示例代码:setInterval()

示例代码:setTimeout()

Location对象:

示例代码:

⑥、DOM(文档对象模型)

DOM树:

DOM可以进行的操作:

DOM案例:

改变标题内容和颜色:

删除最后一个:

DOM分三种:

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

示例代码:

第一步:获取Element元素

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

⑦、DOM案例

示例代码:

6、JS事件监听

①、事件绑定

点击事件:

示例代码:

效果:

②、常见事件

示例代码:

③、事件监听案例

示例代码:

点亮/熄灭灯泡:

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

全选、反选:

二、Vue快速入门

1、什么是Vue?

①、MVVM

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

示例程序:

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

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

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

①、v-bind

示例代码:

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

②、v-model

效果:

③、v-on

示例代码:

简写形式:

效果:

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

示例代码:

效果:

⑤、v-show(全部渲染)

示例代码:

效果:

⑥、v-for

示例代码:

效果:

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

示例代码:

效果:

3、Vue的生命周期

①、生命周期状态图

②、mounted示例代码

效果:

③、小结

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

猜你喜欢

转载自blog.csdn.net/qq_41071754/article/details/129827781