Java Web 2 JS Vue快速入门

news2025/1/15 20:56:54

一 JS快速入门

1.什么是JavaScript？
 

页面交互：

页面交互是指用户与网页之间的互动过程。例如，当用户点击一个按钮，网页会做出相应的反应，如弹出一个对话框、加载新的内容或者改变页面的样式等；当用户在表单中输入内容后，能够实时验证输入是否合法等。这些都是页面交互的常见场景。

ECMA

 

2.JS引入方式

 

 JavaScript.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部方式 -->
    <!-- <script>
        alert("Hello JS")
    </script> -->
    <script src="Javascript/demo.js"> </script>
</head>
<body>
    
</body>
</html>

 demo.js

alert("Hello JS")

效果 

 3.JS基础语法

（1）书写语法

 

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

demo.js 

window.alert("Hello JS")

document.write("hello JS")

console.log("hello JS")

 

 （2）变量

强类型/弱类型语言

强类型语言

- 定义：编译时严格检查变量数据类型，无显式转换不能赋值其他类型。

- 示例：包括Java（变量类型定义严格，编译器会检查类型兼容性）、C#（类型系统类似Java，类型转换常需显式进行）、Haskell（函数式编程语言，类型定义严格，支持类型推导）。

弱类型语言

- 定义：对变量数据类型要求不严格，运行时可自动隐式转换，类型能动态改变。

- 示例：有JavaScript（变量可自由转换类型，运算时也自动转换）、Python（一定程度上类型可变，运算时会自动转换）、PHP（变量类型可改变，运算时自动转换）。

- 补充：强、弱类型语言划分不是绝对的，语言类型系统也在演变。 

demo.js

var x=1
var x="hello js"
alert(x)

{
    var x=2
    var x="hello JS"
}
alert(x)

let y=1//局部变量 不能重复定义
alert(y)

const pi=3.14
pi=3.15
alert(pi)

（3)数据类型

 原始数据类型 5种：

 demo.js

alert(typeof(3))
alert(typeof(3.14))

alert(typeof(true))
alert(typeof(false))

alert(typeof('s'))
alert(typeof('ASHKHDHA'))

alert(typeof(null))//null返回Object

var a
alert(typeof(a))

为什么typeof(null)会返回object

 

 （4）运算符

var a=20
var a1='20'
var a2=20

alert(a==a1)//true
alert(a===a1)//false
alert(a===a2)//true

 类型转换：

alert(parseInt("12"))
alert(parseInt("124a5"))
alert("a45")

if(NaN){
    alert("此条不可能执行")
}

if(undefined){
    alert("此条不可能执行")
}

当使用parseInt()函数来转换一个包含非数字字符的字符串时，它会从字符串的开头开始解析，直到遇到第一个非数字字符（忽略开头的空白字符），然后将前面解析出的数字部分转换为整数返回。

 （5）流程控制语句

4.JS函数

（1）第一种函数定义方式 function funcName(参数1，参数2)

demo.js 



function add(a,b){
    return a+b
}

var result=add(10,20)
alert(result)

 (2)第二种函数定义方式 var funcName=function(参数1，参数2）

5.JS对象

 

（1）Array

 

 

var arr=[1,2,3,4]
arr[10]=50

console.log(arr[8])
console.log(arr[9])

arr[9]='a'
arr[8]=true

console.log(arr)

 遍历数组（和Java相同）：

 

 demo.js

var arr=[1,2,3,4]

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

arr.forEach((e) => {
    console.log(e);
  });

arr.push(7,8,9)
arr.forEach(function(e){
    console.log(e);
  });

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

 结果：

1.

  • 这里使用了forEach方法来遍历一个名为arr的数组。
  • forEach方法接受一个函数作为参数，这个函数会在数组的每个元素上被调用。
  • 函数function(e)中的e代表数组中的每个元素，console.log(e)则是将每个元素打印到控制台。

2.

  • 这部分代码展示了如何使用 ES6 中的箭头函数来简化函数定义。
  • 箭头函数(e) => {...}与第一部分中的function(e)功能相同，但语法更简洁。
  • 同样，e代表数组中的每个元素，console.log(e)将每个元素打印到控制台。

3.这段代码中的arr.splice(2, 2)操作是从数组arr中的索引为 2（第三个元素，因为索引从 0 开始）的位置开始，删除 2 个元素。

（2）String 

 

 （3）JS自定义对象

 demo.java

var user={
    name:'fsl',
    age:20,
    gender:"male",
    eat(){
        alert("吃饭")
    }
}

console.log(user.name)
user.eat()

 

 (4)JSON

基础语法：

定义json和解析：

demo.js

var jsonstr='{"name":"fsl","age":22,"addr":["北京","东城"]}'

var obj=JSON.parse(jsonstr)
alert(obj.name)

在 JavaScript 中，以parse开头的函数主要用于数据类型的转换和解析 


（5）BOM（浏览器对象模型）

 

重点了解Window和Location对象即可

Window对象：

var flag=confirm("确认删除该条记录？")
alert(flag)

 Location对象

 

alert(location.href)

location.href="https://www.itcast.cn"

 

 （6）DOM 文档对象模型

 DOM树：

DOM可以进行的操作：

DOM案例：

 

 

DOM分三种：

 

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

//获取element元素
//根据ID
/* var img=document.getElementById('h1')
alert(img) */

//根据label
var divs=document.getElementsByTagName("div")
for(let i=0;i<divs.length;i++){
    alert(divs[i])
}

/* //根据name
var ins=document.getElementsByName("hobby")
for(let i=0;i<ins.length;i++){
    alert(ins[i])
}
//根据class
var divs=document.getElementsByClassName("cls")
for(let i=0;i<divs.length;i++){
    alert(divs[i])
}

var divs=document.getElementsByClassName("cls")
var div1=divs[0]

div1.innerHTML="byx6666"
 */

DOM 原理

DOM 是将 HTML 或 XML 文档表示为树状结构的编程接口，文档中的标签、属性、文本等都被视为对象并按层次组织。可通过其提供的方法访问、修改、创建和删除节点。

使用 DOM 和不使用的差别

  • 交互性方面 使用 DOM 能实现动态交互和事件驱动，不使用则交互性差，用户只能被动浏览。
  • 内容更新方面 使用 DOM 可实时更新内容，不使用则页面内容固定，需重新加载页面才能更新。
  • 页面布局和样式方面 使用 DOM 可动态改变布局和样式，不使用则布局和样式固定，无法根据情况调整。

6.JS事件监听

 

（1）事件绑定

点击事件：

 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS事件监听</title>
    <!-- 内部方式 -->
    <!-- <script>
        alert("Hello JS")
    </script> -->
    <script src="Javascript/demo.js"> </script>
</head>
<body>
    <!-- <input type="button" id="btn1" onclick="on()" value="按钮1"> -->
    <input type="button" id="btn2" value="按钮2">
</body>
</html>

 javascript

/* function on(){
    alert("我被点击了")
} */

    window.onload = function() {
        document.getElementById("btn2").onclick = function() {
          alert("按钮2被点击了");
        };
      };

 

 

（2）常见事件

 

二.Vue快速入门

1.什么是Vue？

（1）MVVM

 

（2）Vue双向数据绑定书写流程

关于Vue的安装教程 我已经单独发了一篇博客 有需要的读者可以前去学习

 注意：此处需要去vue.js官网下载该文件 并将该文件移动到vscode的js文件夹下 作者在此处卡了好久

html

<!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>快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue"
        }    
    })
</script>
</html>


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

 2、Vue的常用指令（v-xxx）

 

 

（1）v-bind

 

 

(2) v-model

(3)v-on

 (4)v-if（符合条件才渲染）

 (5)v-show(全部渲染）

（6）v-for 

 

3.Vue的生命周期

 

（2）mounted示例代码

 

效果

 

（3）小结

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

浅谈MySQL路由

浅谈MySQL路由

华子目录 mysql-router介绍下载mysql-router安装mysql-router实验 mysql-router介绍 mysql-router是一个对应用程序透明的InnoDB Cluster连接路由服务&#xff0c;提供负载均衡、应用连接故障转移和客户端路由利用路由器的连接路由特性&#xff0c;用户可以编写应用程序来连接到…
阅读更多...
Python语法基础---正则表达式

Python语法基础---正则表达式

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们这个文章所讲述的&#xff0c;也是数据分析的基础文章&#xff0c;正则表达式 首先&#xff0c;我们在开始之前&#xff0c;引出一个问题。也是我们接下来想要解决的问题。…
阅读更多...
AMEYA360 | 杭晶电子：晶振在AR/VR中的应用

AMEYA360 | 杭晶电子：晶振在AR/VR中的应用

晶振在AR/VR设备中扮演重要角色&#xff0c;为其核心电子系统提供稳定的时钟信号&#xff0c;确保设备的高性能运行。 以下是晶振在AR/VR应用中的具体作用&#xff1a; 01、图像处理与同步 1、晶振为图形处理单元(GPU)和显示芯片提供精准的时钟信号&#xff0c;支持高速图像渲染…
阅读更多...
如何将python项目导出为docker镜像

如何将python项目导出为docker镜像

如何将python项目导出为docker镜像 前提条件步骤 1: 创建并准备 Python 项目步骤 2: 创建 `setup.py`步骤 3: 打包项目步骤 4: 创建 Dockerfile步骤 5: 构建 Docker 镜像步骤 6: 运行 Docker 容器步骤 7: 保存修改并继续开发总结要将修改后的Python代码导出为 .tar.gz 格式，并…
阅读更多...
预训练模型与ChatGPT：自然语言处理的革新与前景

预训练模型与ChatGPT：自然语言处理的革新与前景

目录 一、ChatGPT整体背景认知 &#xff08;一&#xff09;ChatGPT引起关注的原因 &#xff08;二&#xff09;与其他公司的竞争情况 二、NLP学习范式的发展 &#xff08;一&#xff09;规则和机器学习时期 &#xff08;二&#xff09;基于神经网络的监督学习时期 &…
阅读更多...
红日靶场vulnstack (五）

红日靶场vulnstack (五）

前言 好久没打靶机了&#xff0c;今天有空搞了个玩一下&#xff0c;红日5比前面的都简单。 靶机环境 win7&#xff1a;192.168.80.150(外)、192.168.138.136(内) winserver28&#xff08;DC&#xff09;&#xff1a;192.168.138.138 环境搭建就不说了&#xff0c;和之前写…
阅读更多...
5G CPE组成及功能介绍（二）

5G CPE组成及功能介绍（二）

5G CPE 组成及功能介绍 5G CPE 将5G信号转换为Wi-Fi或有线信号， 其由5G基带芯片、主控处理器、WIFI、电源、天线、结构等多个部件组成。5G基带： 这是5G CPE中最核心的组件，负责接收和解码来自5G基站的信号，然后将这些数据转换成用户设备可以使用的格式。采用了先进的5G芯片…
阅读更多...
Vue Web开发（一）

Vue Web开发（一）

1. 环境配置 1.1. 开发工具下载 1.1.1. HbuilderX 官网地址&#xff1a;https://uniapp.dcloud.net.cn/ 1.1.2. Visual Studio Code 官网地址&#xff1a;https://code.visualstudio.com/Download 1.1.3. Node环境 官网地址&#xff1a;https://nodejs.cn/   正常软件安装…
阅读更多...
四、自然语言处理_02RNN基础知识笔记

四、自然语言处理_02RNN基础知识笔记

1、RNN的定义 RNN&#xff08;Recurrent Neural Network&#xff0c;循环神经网络&#xff09;是一种专门用于处理序列数据的神经网络架构&#xff0c;它与传统的前馈神经网络&#xff08;Feedforward Neural Network&#xff09;不同&#xff0c;主要区别在于它能够处理输入数…
阅读更多...
速通SpringBoot+vue全栈开发教程

速通SpringBoot+vue全栈开发教程

本人的环境配置&#xff1a; idea 2019 java&#xff08;jdk8&#xff09; apache-maven 3.6.1 tomcat 8.5.5 mysql 8.0.12 navicat 16 一、SpringBoot快速上手——创建一个springboot项目 进去之后报红 在设置里面修改maven的配置&#xff0c;改成自己下载的maven的地址 还因…
阅读更多...
【开源代码】图像水印移除-依赖python-tensorflow

【开源代码】图像水印移除-依赖python-tensorflow

下载源码 git clone https://github.com/zuruoke/watermark-removal创建conda环境 conda create -n tensorflow_gpu python=3.7 conda activate tensorflow_gpu conda install tensorflow-gpu==1.15
阅读更多...
MySQL导入.sql文件后数据库乱码问题

MySQL导入.sql文件后数据库乱码问题

问题分析&#xff1a; 当导入.sql文件后&#xff0c;发现数据库中的备注出现乱码&#xff0c;通常是由于一下原因导致&#xff1a; 字符集不匹配&#xff1a;.sql文件、MySQL服务器、客户端连接使用的字符集不一致。备注内容编码问题&#xff1a;备注内容本身的编码格式与数据…
阅读更多...
Qt 2D绘图之五：图形视图框架的结构、坐标系统和框架间的事件处理与传播

Qt 2D绘图之五：图形视图框架的结构、坐标系统和框架间的事件处理与传播

参考文章链接： Qt 2D绘图之五：图形视图框架的结构和坐标系统 Qt 2D绘图之六：图形视图框架的事件处理与传播 图形视图框架的结构 在前面讲的基本绘图中，我们可以自己绘制各种图形，并且控制它们。但是，如果需要同时绘制很多个相同或不同的图形，并且要控制它们的移动、…
阅读更多...
大模型面试题：P-tuning、Prompt-tuning和Prefix-tuning区别是什么？

大模型面试题：P-tuning、Prompt-tuning和Prefix-tuning区别是什么？

我整理了1000道算法面试题&#xff0c;可以在下面的地方获取&#xff0c;面试题还是有点多的 P-tuning、Prompt-tuning和Prefix-tuning区别是什么&#xff1f; prefix-tuning对比P-tuning&#xff1a;Prefix-Tuning是将额外的embedding加在开头&#xff0c;看起来更像模仿Inst…
阅读更多...
数据结构初阶之顺序表的介绍与动态顺序表的实现

数据结构初阶之顺序表的介绍与动态顺序表的实现

一、线性表 线性表&#xff08;linear list&#xff09;是由 n 个具有相同特性的数据元素组成的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串... 线性表在逻辑上是线性结构&#xff0c;也就说是连续…
阅读更多...
学习日志020---qt信号与槽

学习日志020---qt信号与槽

作业 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QPushButton,QLineEditfrom Form import Ui_Form from second import Ui_second from PySide6.QtCore import Qtclass MyWidget(QWidget,Ui_Form):def __init__(self):super().__init__()self.setupUi(se…
阅读更多...
大语言模型技术相关知识-笔记整理

大语言模型技术相关知识-笔记整理

系列文章目录 这个系列攒了很久。主要是前段之间面试大语言模型方面的实习&#xff08;被拷打太多次了&#xff09;&#xff0c;然后每天根据面试官的问题进行扩展和补充的这个笔记。内容来源主要来自视频、个人理解以及官方文档中的记录。方便后面的回顾。 文章目录 系列文章…
阅读更多...
9.13[debug]

9.13[debug]

这个错误表明 Git 尝试通过 HTTPS 协议连接到 Gitee 上的仓库时&#xff0c;实际上却尝试连接到了本地的 127.0.0.1&#xff08;即 localhost&#xff09;的 7890 端口&#xff0c;这通常是因为 HTTP 代理配置错误或全局 Git 配置中的代理设置不正确 如果这些命令返回了代理设…
阅读更多...
Android笔记(三十四)：onCreate执行Handler.post在onResume后才能执行？

Android笔记(三十四)：onCreate执行Handler.post在onResume后才能执行？

背景 偶然发现一个点&#xff0c;就是在onCreate执行Handler.post在onResume后才执行&#xff0c;以下是测试代码 多次运行的结果一致&#xff0c;为什么execute runnable不是在onCreate和onResume之间执行的呢&#xff0c;带着疑问撸了一遍Activity启动流程 关键源码分析 …
阅读更多...
Python基于 Opencv+wxPython 的人脸识别上课考勤系统，附源码

Python基于 Opencv+wxPython 的人脸识别上课考勤系统，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023