当前位置： 首页 > news >正文

JavaWeb——JS、Vue

news 2025/10/15 12:22:40

目录

1.JavaScript

a.概述

b.引入方式

c.JS的基础语法

d.JS函数

e.JS对象

 f.JS事件监听

2.Vue

a.概述

b.Vue常用指令

d.生命周期

1.JavaScript

a.概述

JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似

b.引入方式

内部脚本：将JS代码定义在HTML页面中

注意：

         1.JavaScrip代码必须在 <script></script>标签之间

         2.在HTML文档中，可以在任意地方，放置任意数量的<script>

         3.一般会把脚本置于<body>元素的底部，可改善显示速度

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

注意：

         1.外部JS文件中，只包含JS代码，不包含<script>标签

         2.<script>标签不能自闭和

c.JS的基础语法

1.区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的

2.每行结尾的分号可有可无

3.注释：单行注释：//注释内容          多行注释：/*注释内容*/

4.大括号表示代码块

{

}

5.输出语句

使用window.alter()写入警告框

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

6.变量

a.JavaScript中用var关键字来声明变量

b.JavaScript是一门弱类型语言，变量可以存放不同类型的值

c.变量名需要遵循一定规则

变量名只能包含字母（A-Z，a-z）、数字（0-9）、下划线（_）和美元符号（$）。

不能以数字开头

推荐使用驼峰命名法

注意：

7.变量的作用域比较大，全局变量

8.变量可以重复定义的

ECMAScript6新增：

let:它的用法类似于var,但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

const:用来声明一个只读的常量，一旦声明，常量的值不可改变

9.数据类型：原始类型和引用类型

number:数字（整数、小数、NaN(Not a Number)）

string:字符串，单双引皆可

boolean:布尔。true,false

null:对象为空

undefined:当声明的变量未初始化时，该变量的默认值是undefined

注意：typeof运算符可以获取数据类型

10.运算符

因为JS语法与java大多类似，因此我就列出了一些不同点：

==会进行类型转换

===不会进行类型转换

代码： 

<script>var a=10;document.write(a=="10");//truedocument.write("------------------");document.write(a==="10");//falsedocument.write("------------------");document.write(a===10);//true</script>

运行结果： 

字符串类型转换为数字：将字符串字面值转换为数字。如果字面值不是数字，则转为NaN

代码：

 <script>document.write(parseInt("12"));document.write("------------------");document.write(parseInt("12A45"));document.write("------------------");document.write(parseInt("A45"));</script>

运行结果：

其他类型转换为boolean：

Number:0和NaN为false,其他均转为true

String:空字符串为false,其他均转为true

Null和undefined:均转为false

代码：

<script>if(0){document.write("0转换为false");document.write("------------------");}if(NaN){document.write("NaN转换为false");document.write("------------------");}if(-1){document.write("除0和NaN其他数字都转为true");document.write("------------------");}</script>

运行结果：

d.JS函数

定义方式一：

 function 函数名(参数一,参数二){

    //需要执行的代码

  }

定义方式二：

 var 函数名=function(参数一,参数二){

    //需要执行的代码

  }

 注意：

         1.形参不需要类型。因为JS是弱类型语言

         2.返回值也不需要定义类型，可以在函数内部直接使用return返回即可

e.JS对象

1.Array

概述：JS中Array对象用于定义数组

定义：

var 变量名=new Array(元素列表);//方式一

var 变量名=[元素列表];//方式二

访问：

变量名[索引]=值;

注意：JS中的数组相当于Java中集合，数组的长度是可变的，而JS是弱类型，所以可以存储任意的类型数据

属性：

方法：

a.遍历数组中有值的元素

 arr.forEach(function(e){console.log(e);}

 b.添加元素到数组尾部

参数（可变参数）：添加的元素 

 c.删除元素

参数一：删除元素的起始索引

参数二：删除元素的个数

 2.String

概述：JS中String对象用于定义字符串

定义：

var 变量名=new String("...");

var 变量名="";

属性：

 方法：

a.获取指定位置的字符

 参数：将要获取字符的索引

 b.检索字符串的位置

参数：将要检索的字符串

c.去除字符串前后的空格

d.截取字符串（含头不含尾）

参数一：开始索引

参数二：结束索引 

3.JSON

自定义对象：

 var 对象名={

  属性名1:属性值1,

  属性名2:属性值2,

  属性名3:属性值3,

  函数名称:function(形参列表){}

 };

概述：JavaScript Object Notation,JavaScript对象标记法。JSON是通过JavaScript对象标记法书写的文本,由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

定义：

var 变量名='{"key1":value1:"key2": value2}';

value的数据类型：

          数组（整数或浮点数）

          字符串（在双引号中）

          逻辑值（true或false）

          数组（在方括号中）

          null

方法：

a.将JSON字符串转换为JS对象

b.JS对像转换为JSON字符串

4.BOM

a.windows

概述：浏览器窗口对象。直接使用windows，其中window.可以省略。

方法：

参数：提示的信息

返回值：

           确认        true

           取消        false

参数一：将要执行的函数

参数二：每次执行间隔的时间

参数一：将要执行的函数

参数二：函数执行之前等待的时间

b.Location

概述：地址栏对象，使用window.location获取，其中window.可以省略

属性：

5.DOM

概述：Document Object Model ,文档对象模型，将标记语言的各个组成部分封装为对应的对象，HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取

获取对象的方式：

a.根据id属性值获取，返回单个Element对象

b.根据标签名称获取，返回Element对象数组

c.根据name属性值获取，返回Element对象数组

d. 根据class属性值获取，返回Element对象数组

 f.JS事件监听

事件绑定：

1.通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1"><script>function on(){alert("我被点击了");}</script>

2.通过DOM元素属性绑定

<input type="button" id="btn" value="按钮1"><script>window.document.getElementById("btn").onclick=function(){alert("我被点击了！");}</script>

常见事件：

2.Vue

a.概述

Vue是一套前端框架，免除原生JS中的DOM操作，简化书写；基于MVVM思想，实现数据双向绑定，将编程的关注点放在数据上

b.Vue常用指令

1.常见指令

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>new Vue({el: "#app",data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

运行结果：

 

d.生命周期

生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

mounted:挂在完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据） 

相关文章：

JavaWeb——JS、Vue

目录 1.JavaScript a.概述 b.引入方式 c.JS的基础语法 d.JS函数 e.JS对象 f.JS事件监听 2.Vue a.概述 b.Vue常用指令 d.生命周期 1.JavaScript a.概述 JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的&#xff0c;它能使网页可交互。JavaScript和…...

编程日记 2024/11/19 6:09:40

Springboot 整合 Java DL4J 构建股票预测系统

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

编程日记 2024/11/19 6:08:39

ATmaga8单片机Pt100温度计源程序+Proteus仿真设计

目录 1、项目功能 2、仿真图 ​3、程序 资料下载地址&#xff1a;ATmaga8单片机Pt100温度计源程序Proteus仿真设计 1、项目功能 设计Pt100铂电阻测量温度的电路&#xff0c;温度测量范围是0-100摄氏度&#xff0c;要求LCD显示。画出电路图&#xff0c;标注元器件参数&am…...

编程日记 2024/11/19 6:07:38

FPGA通过MIPI CSI-2发送实时图像到RK3588，并HDMI显示

介绍FPGA通过MIPI CSI-2发送实时图像到RK3588&#xff0c;并HDMI显示。 FPGA本地产生动态图像模板&#xff0c;通过MIPI CSI-2接口发送到RK3588 MIPI CSI接口。RK3588注册成相机后&#xff0c;调用接口并在HDMI显示器上显示。 1、RK3588驱动调试 查看Media controller信息 Med…...

编程日记 2024/11/19 6:06:37

ELK8.15.4搭建开启安全认证

安装 Elastic &#xff1a;Elasticsearch&#xff0c;Kibana&#xff0c;Logstash 另外安装一个收集器filebeat 通过二进制安装包进行安装 创建一个专门放elk目录 mkdir /elk/ mkdir /elk/soft下载 es 、kibana、Logstash、filebeat二进制包 cd /elk/softwget https://art…...

编程日记 2024/11/19 6:05:36

原生微信小程序中封装一个模拟select 下拉框组件

1.首先在components 里面设置组件名称&#xff1a;van-select&#xff08;随便取名字&#xff09;&#xff1b; 2.新建文件写代码&#xff1a; wxml&#xff1a; <view class"w100 select_all_view"><!-- 标题&#xff0c;可以没有 --><view class…...

编程日记 2024/11/19 6:04:36

商品管理系统引领时尚零售智能化升级 降价商品量锐减30%

根据贝恩咨询公司2024年发布的消费品报告&#xff0c;当前消费品行业正面临增长放缓、全球市场波动及消费者期望变化的巨大压力。为保持市场竞争力&#xff0c;企业需要重新审视其增长战略&#xff0c;重视可持续创新、数字化转型和运营敏捷性。企业必须灵活应对供应链中断和消…...

编程日记 2024/11/19 6:03:34

UE5 5.1.1创建C++项目，显示error C4668和error C4067

因为工作要求&#xff0c;没法使用最新 5.5版本的ue5 而是要用ue5.1和5.2版本。 但是我在安装下载了visual studio2022后&#xff0c;使用 ue5.1编辑器 创建C项目&#xff0c;爆出如下错误。 error C4668: ?????__has_feature?????ΪԤ?????꣬???0????…...

编程日记 2024/11/19 6:02:33

spring boot 集成 redis 实现缓存的完整的例子

Cacheable 注解是 Spring Cache 抽象的一部分&#xff0c;用于声明式地管理缓存。Cacheable 注解本身并不直接指定缓存的存储位置&#xff0c;而是依赖于配置的缓存管理器&#xff08;CacheManager&#xff09;来决定缓存数据的存储位置。 常见的缓存存储方式: 1、内存缓存&a…...

编程日记 2024/11/19 6:01:33

json-bigint处理前端精度丢失问题

问题描述&#xff1a;前后端调试过程中&#xff0c;有时候会遇到精度丢失的问题&#xff0c;比如后端给过来的id超过16位&#xff0c;就会出现精度丢失的情况&#xff0c;前端拿到的id与后端给过来的不一致。 解决方案&#xff1a; 1、安装 npm i json-bigint 2、在axios中配置…...

编程日记 2024/11/19 5:57:29

【算法】【优选算法】前缀和（下）

目录 一、560.和为K的⼦数组1.1 前缀和1.2 暴力枚举 二、974.和可被K整除的⼦数组2.1 前缀和2.2 暴力枚举 三、525.连续数组3.1 前缀和3.2 暴力枚举 四、1314.矩阵区域和4.1 前缀和4.2 暴力枚举 一、560.和为K的⼦数组 题目链接&#xff1a;560.和为K的⼦数组 题目描述&#x…...

编程日记 2024/11/19 5:56:27

Node.js 23 发布了！

Node.js 23 现已推出&#xff0c;带来了新功能、性能改进和更好的开发者体验。此次版本提升了兼容性和稳定性&#xff0c;提供了更多工具来构建高效的应用程序。 此外&#xff0c;Node.js 22 将在 10 月 29 日当周被提升为长期支持 (LTS) 版本&#xff0c;进入长期维护阶段&am…...

编程日记 2024/11/19 5:55:26

如何通过低代码逻辑编排实现业务流程自动化？

随着数字化转型的加速&#xff0c;企业对高效、灵活的业务流程自动化需求日益增加。传统开发模式下的定制化解决方案往往周期长、成本高且难以适应快速变化的需求。低代码平台以其直观、简便的操作界面和强大的功能逐渐成为企业实现业务流程自动化的理想选择。本文将探讨低代码…...

编程日记 2024/11/19 5:54:25

thinkphp6模板调用URL方法生成的链接异常

var uul params.url ;console.log(params.url);console.log("{:Url(UserLog/index)}");console.log("{:Url("uul")}"); 生成的链接地址 UserLog/index /jjg/index.php/Home/UserLog/index.html /jjg/index.php/Home/Index/UserLog/index.html…...

编程日记 2024/11/19 5:53:24

Spring Boot汽车资讯：科技驱动的未来

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 4系统概要设计 4.1概…...

编程日记 2024/11/19 5:51:22

嵌入式硬件电子电路设计（五）LDO低压差线性稳压器全面详解

引言&#xff1a; LDO&#xff08;Low Dropout Regulator&#xff0c;低压差线性稳压器&#xff09;是一种常用的电源管理组件&#xff0c;用于提供稳定的输出电压&#xff0c;同时允许较小的输入电压与输出电压之间的差值。LDO广泛应用于各种电子设备中&#xff0c;特别是在对…...

编程日记 2024/11/19 5:50:19

qiankun主应用（vue2+element-ui）子应用（vue3+element-plus）不同版本element框架css样式相互影响的问题

背景&#xff1a;qiankun微前端架构实现多应用集成 主应用框架&#xff1a;vue2 & element-ui 子应用框架&#xff1a;vue3 & element-plus >> 问题现象和分析 登录页面是主应用的&#xff0c;在登录之后才能打开子应用的菜单页面&#xff0c;即加载子应用。 首…...

编程日记 2024/11/19 5:49:18

resnet50,clip，Faiss+Flask简易图文搜索服务

一、实现 文件夹目录结构&#xff1a; templates -----upload.html faiss_app.py 前端代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widt…...

编程日记 2024/11/19 5:47:16

使用OkHttp进行HTTPS请求的Kotlin实现

OkHttp简介 OkHttp是一个高效的HTTP客户端&#xff0c;它支持同步和异步请求&#xff0c;自动处理重试和失败&#xff0c;支持HTTPS&#xff0c;并且可以轻松地与Kotlin协程集成。OkHttp的设计目标是提供最简洁的API&#xff0c;同时保持高性能和低延迟。 为什么选择OkHttp …...

编程日记 2024/11/19 5:46:15

使用Mac下载MySQL修改密码

Mac下载MySQL MySQL官网链接MySQL​​​​​​ 当进入到官网后下滑到community社区&#xff0c;进行下载 然后选择community sever下载 这里就是要下载的界面&#xff0c;如果需要下载之前版本的话可以点击archives&#xff0c; 可能会因为这是外网原因&#xff0c;有时候下…...

编程日记 2024/11/19 5:44:13

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/10/10 4:02:13

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/8/13 16:04:59

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/10/6 17:39:55

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/10/11 18:58:58

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/10/8 5:30:50

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

编程新知 2025/9/12 0:57:34

深入浅出WebGL：在浏览器中解锁3D世界的魔法钥匙

WebGL&#xff1a;在浏览器中解锁3D世界的魔法钥匙 引言&#xff1a;网页的边界正在消失 在数字化浪潮的推动下&#xff0c;网页早已不再是静态信息的展示窗口。如今&#xff0c;我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室&#xff0c;甚至沉浸式的V…...

编程新知 2025/9/14 17:34:44

数据分析六部曲？

引言 上一章我们说到了数据分析六部曲&#xff0c;何谓六部曲呢&#xff1f; 其实啊&#xff0c;数据分析没那么难&#xff0c;只要掌握了下面这六个步骤&#xff0c;也就是数据分析六部曲&#xff0c;就算你是个啥都不懂的小白&#xff0c;也能慢慢上手做数据分析啦。 第一…...

编程新知 2025/10/8 13:40:47