【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这个生命周期的钩子方法中来发送异步请求到服务端来获取数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/5141.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Chatgpt4来了,测试小姐姐实测,在失业的边缘疯狂试探~

GPT-4是OpenAI于2023年3月发布的最新人工智能模型,它是继GPT-3.5之后的又一次重大突破。它的核心技术是基于Transformer的自回归语言模型,它使用了大量的无标注数据进行预训练,学习了自然语言和其他模态之间的通用表示和关系。我们今天来看看…

★Flash

1.NOR Flash和NAND Flash的区别 读速:Nor很快,NAND快 擦除/写入:Nor低,NAND高 访问方式:Nor一次写一个字节,按总线时序读写;NAND一次写多个(512字节的块),…

【2023中高级向】53道vue面试题附答案

1. 谈一谈对 MVVM 的理解? 参考答案: MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来…

Spring MVC 图片的上传和下载

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

Graph Neural Networks: Graph Structure Learning

最近研究GNN的应用方面,遇到了很大的瓶颈,所以回归理论,潜心阅读图结构学习的理论知识,也希望给大家在学习时带来帮助,如有错误请私信指正! Graph Neural Networks: Graph Structure Learning 摘要&#…

Day912.多环境配置隔离 -SpringBoot与K8s云原生微服务实践

多环境配置隔离 Hi,我是阿昌,今天学习记录的是关于多环境配置隔离的内容。 多环境支持,是现在互联网开发研发和交付的主流基本需求。通过规范多环境配置可以规范开发流程,并同时提示项目的开发质量和效率等。 一个公司应该规范…

计算机组成原理实验1---运算器 预习报告

本实验为哈尔滨工业大学计算机组成原理实验,实验内容均为个人完成,目的是分享交流,如有抄袭将追究责任,笔者能力有限,若因此影响读者的分数,本人深表抱歉。 一、 实验目的 了解运算器的组成结构基于数据通…

mybatis resource配置mapper

<mapper resource"com/hm/mapper/UserMapper.xml"/> 这种配置mapper和package配置资源的区别&#xff1f; 1.package解析mapper过程&#xff0c; 获取name对应的路径&#xff0c;获取class下的mapper,根据mapper里的路径拼接.xml解析文件&#xff0c;此时命名…

亚马逊、eBay、速卖通等跨境电商自养号测评,你知道多少?

自养号测评对跨境电商来说已经司空见惯&#xff0c;现在绝大部分卖家都有对店铺产品进行测评&#xff0c;虽然平台和消费者对测评补单很反感&#xff0c;但是在人人都测评的大环境的影响下不测评就意味着要被淘汰。 之前在一些论坛看到有博主分享自己对于广告和数据化的理解&a…

基于SpringBoot+Vue家乡特色推荐系统

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精…

6.S081——虚拟内存部分——xv6源码阅读系列(1)

0.Briefly Speaking 这篇博客是完成6.S081第三个实验之前的准备环节&#xff0c;主要内容是阅读相关的源码。之前提过xv6最宝贵的部分是内核源码&#xff0c;这些是完成实验之前必备的基础&#xff0c;也是学习这门课的精髓所在&#xff0c;所以我准备再开一个系列博客专门用来…

golang大杀器GMP模型

golang 大杀器——GMP模型 文章目录golang 大杀器——GMP模型1. 发展过程2. GMP模型设计思想2.1 GMP模型2.2 调度器的设计策略2.2.1 复用线程2.2.2 利用并行2.2.3 抢占策略2.2.4 全局G队列2.3 go func()经历了那些过程2.4 调度器的生命周期2.5 可视化的CMP编程2.5.1 trace方式2…

【设计模式】创建型模式之原型模式

【设计模式】创建型模式之原型模式 文章目录【设计模式】创建型模式之原型模式1.概述2. 构成3. 实现3.1 浅克隆3.2 深克隆1.概述 原型模式(Prototype Pattern)&#xff1a;是用于创建重复的对象&#xff0c;同时又能保证性能。这种类型的设计模式属于创建型模式&#xff0c;它…

【人工智能里的数学】线性代数基础

系列文章目录 【人工智能学习笔记】人工智能里的数学——概述 【人工智能里的数学】一元函数微分学 文章目录系列文章目录前言一、向量与其运算1.2 行向量和列向量1.3 向量的运算1.3.1 向量的加减1.3.2 向量的数乘运算1.3.3 转置1.3.4 运算法则1.3.5 向量的内积1.4 向量的范数…

今年面试好激烈!

金三银四过去一半&#xff0c;市场火热&#xff0c;但是大家就业压力却没有缓解多少。 很多粉丝后台留言&#xff0c;Java程序员面临的竞争太激烈了…… 我自己也有实感&#xff0c;多年身处一线互联网公司&#xff0c;虽没有直面过求职跳槽的残酷&#xff0c;但经常担任技术面…

记一次Git未Commit直接Pull导致本地代码丢失后的挽救过程

第一次遇到这种问题&#xff0c;有点紧张... 好吧&#xff0c;废话不多说&#xff0c;IDEA或者AndroidStudio进入Git Uncommiteed Changes -> Unstash Changes&#xff1a; 在弹出的Unstash Changes对话框点View查看代码&#xff0c;如果代码是本地丢失的代码&#xff0c;那…

MySQL——distinct与group by去重 / 松散索引扫描紧凑索引扫描

本篇介绍MySQL中的 distinct 和 group by的区别&#xff0c;包括用法、效率&#xff0c;涉及松散索引扫描和紧凑索引扫描的概念&#xff1b;distinct用法示例&#xff1a;SELECT DISTINCT columns FROM table_name WHERE where_conditions;DISTINCT关键词修饰查询的列&#xff…

CVE-2023-28708 原理剖析

CVE-2023-28708 原理剖析这应该不是一个严重的漏洞&#xff0c;可能评分只能为低&#xff0c;因为并没有什么卵用。 话不多说&#xff0c;直接进入正题 我的复现环境&#xff1a; tomcat-8.5.50 首先我们得简单写一个servlet&#xff0c;当然不写也没事&#xff0c;因为我们的…

【C语言学习】结构体

结构体&#xff08;Struct&#xff09;从本质上讲是一种自定义的数据类型&#xff0c;只不过这种数据类型比较复杂&#xff0c;是由 int、char、float 等基本类型组成的。你可以认为结构体是一种聚合类型。 在实际开发中&#xff0c;我们可以将一组类型不同的、但是用来描述同…

[技术经理]02 什么是技术经理?

目录01什么是技术经理02总结01什么是技术经理 什么是技术经理&#xff1f; 我用一句话概括为&#xff1a;专业技术团队的管理者。 技术经理&#xff0c;是一种管理职位&#xff0c;通常是在软件开发、互联网等科技公司或技术团队中担任。 技术经理的职责&#xff0c;**是管理…