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

JavaWeb——JS、Vue

news 文章来源：https://blog.csdn.net/l_tian_tian_/article/details/143836617 2024/11/30 5:39:51

目录

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

运维面试题.云计算面试题集锦第一套

运维+网络安全学科基础升就业 测试题(总分100分) 一，单词翻译（10分，直接写在答题卡上） 二，单选题（每题2分，共30题）： 1.如下哪个属于管道符？（ ） A、|| B、<< C、// D、| 2.有一备份程序mybackup，需要在周一至周五下午1点和晚上8点各运行一次，下面哪条cront…...

编程日记 2024/11/19 5:43:12

CSS-flex布局

flex常用语法 display: flex 父级元素相关 flex-direction 主轴方向【水平方向&#xff08;默认&#xff09;、垂直方向】justify-content 主轴上的对齐方式【flex-end结束对齐、space-between两端对齐、center】align-items 交叉轴的对齐方式【center、flex-end】flex-wrap…...

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

Linux：进程的优先级 进程切换

文章目录 前言一、进程优先级1.1 基本概念1.2 查看系统进程1.3 PRI和NI1.4 调整优先级1.4.1 top命令1.4.2 nice命令1.4.3 renice命令 二、进程切换2.1 补充概念2.2 进程的运行和切换步骤&#xff08;重要&#xff09; 二、Linux2.6内核进程O(1)调度队列&#xff08;重要&#x…...

编程日记 2024/11/19 5:41:09

web应用安全和信息泄露

使用springboot开发的应用可能存在各种使用不当导致的信息泄露和漏洞&#xff0c;在此记录 1&#xff1a;spring actuator导致的信息泄露 使用spring actuator你可以选择通过使用HTTP端点或使用JMX来管理和监控你的应用程序。 审计、健康和指标收集也可以自动应用于你的应用程…...

编程日记 2024/11/19 5:39:07

创建vue3项目步骤

脚手架创建项目&#xff1a; pnpm create vue Cd 项目名称安装依赖&#xff1a;Pnpm iPnpm Lint&#xff1a;修复所有文件风格 &#xff0c;不然eslint语法警告报错要双引号Pnpm dev启动项目 拦截错误代码提交到git仓库&#xff1a;提交前做代码检查 pnpm dlx husky-in…...

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

尽量通俗易懂地概述.Net U nity跨语言/跨平台相关知识

本文参考来自唐老狮,Unity3D高级编程:主程手记,ai等途径 仅作学习笔记交流分享 目录 1. .Net是什么? 2. .Net框架的核心要点? 跨语言和跨平台 .Net x Unity跨平台发展史 Net Framework 2002 Unity跨平台之 Mono 2004 Unity跨平台之 IL2CPP 2015 二者区别 .NET Core …...

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

【AlphaFold3】开源本地的安装及使用

文章目录 安装安装DockerInstalling Docker on Host启用Rootless Docker 安装 GPU 支持安装 NVIDIA 驱动程序安装 NVIDIA 对 Docker 的支持 获取 AlphaFold 3 源代码获取基因数据库获取模型参数构建将运行 AlphaFold 3 的 Docker 容器 参考 AlphaFold3: https://github.com/goo…...

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

vue2/vue3中使用的富文本编辑器vue-quill

前言&#xff1a; 整理下常用的富文本编辑器工具。 vue3: 实现效果&#xff1a; 实现步骤&#xff1a; 1、安装插件&#xff0c; 编辑器核心插件 vueup/vue-quill yarn add pnpm i npm i cnpm i vueup/vue-quill vueup/vue-quill 2、安装选择性插件 &a…...

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

论文阅读《BEVFormer v2》

BEVFormer v2: Adapting Modern Image Backbones to Bird’s-Eye-View Recognition via Perspective Supervision 目录 摘要1 介绍2 相关工作2.1 BEV三维目标检测器 摘要 我们提出了一种具有透视监督的新型鸟瞰图&#xff08;BEV&#xff09;检测器&#xff0c;其收敛速度更快…...

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

自动化运维(k8s)：一键获取指定命名空间镜像包脚本

前言&#xff1a;脚本写成并非一蹴而就&#xff0c;需要不断的调式和修改&#xff0c;这里也是改到了7版本才在 生产环境 中验证成功。 该命令 和 脚本适用于以下场景&#xff1a;在某些项目中&#xff0c;由于特定的安全或政策要求&#xff0c;不允许连接到你的镜像仓库。然而…...

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

四川省住房与城乡建设厅网站/网址缩短

2月28日消息&#xff0c;瓜子二手车、毛豆新车网母公司车好多集团正式宣布&#xff0c;已完成15亿美元新一轮融资&#xff0c;投资方为软银愿景基金&#xff08;SoftBank Vision Fund&#xff09;。 本轮融资将重点用于加大产品技术研发投入&#xff0c;掌控产业变革核心生产力…...

编程日记 2024/11/30 1:43:38

瀑布流网站后台/北京seo营销培训

table { border-collapse: collapse; border: none; width: 200px; } td { border: solid #000 1px; } 转载于:https://www.cnblogs.com/zxjady/p/3927395.html...

编程日记 2024/11/30 1:37:34

家居行业网站建设/广告推广方案

“javac不是内部命令或外部命令”Windows7 安装“jdk-6u26-windows-x64.exe”后&#xff0c;常提示“javac不是内部命令或外部命令&#xff0c;也不是可运行的程序或批处理文件”。 但是输入 java -version能正常显示jdk版本号&#xff0c;说明java命令可用。 一般的&#xff0…...

编程日记 2024/11/30 1:30:28

苹果网站开发/软文

1&#xff1a;利用javascript防止表单重复提交&#xff08;&#xff09; 以上2种方法都是利用javascript来防止用户反复点击提交按钮来提交页面&#xff0c;但是对于表单提交后用户点击刷新按钮导致表单重复提交以及用户提交表单后点击后退按钮回退到表单页面后再次提交是没有效…...

编程日记 2024/11/30 0:47:00

linux做网站/代发新闻稿最大平台

Jquery 模板插件 jquery&period;tmpl&period;js 的使用方法&lpar;1&rpar;&colon;基本语法&#xff0c;绑定&comma;each循环&#xff0c;ajax获取json数据jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译…...

编程日记 2024/11/30 0:30:16

wordpress评论表情不显示/贵阳百度快照优化排名

来自 2015 年 Yelp Dataset Challenge 数据集的 1,569,264 个样本。该子集中的不同极性分别包含 280,000 个 训练样本和 19,000 个测试样本。 This article offers an empirical exploration on the use of character-level convolutional networks (ConvNets) for text class…...

编程日记 2024/11/29 23:43:42