Java Web 2 JS & Vue快速入门

于 2024-12-04 18:10:49 发布
阅读量1k 收藏 26
点赞数 10
分类专栏： JavaWeb 文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_60566743/article/details/144238508
版权

一 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）小结

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值