一、JavaScript

1.JavaScript 基础

✅ 什么是 JavaScript？

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。

✅ JavaScript 的三大组成
组成部分 功能作用
ECMAScript 定了JS基础语法核心知识（变量、数据类型等）
BOM 浏览器对象模型（用于操作浏览器本身）
DOM 文档对象模型（于操作HTML文档）
✅ JavaScript 引入方式 
引入方式 示例说明
内部脚本 将JS代码定义在HTML页面的<script></script>中（<body>的底部）
外部脚本 将JS代码定义在JS文件中，】通过<scriptsrc=""></script>标签引入
✅ 变量&常量
  • 声明变量：let a = 20;
  • 声明常量：const PI = 3.14;
  • JS 是弱类型语言：变量可以存放不同类型的值
✅ 数据类型
类型 示例
number 1, 3.14, NaN
boolean true / false
string ‘hello’, “world”, 模板字符串（推荐使用单引号）
null 对象为空
undefined 未赋值变量（默认值）

📌typeof 可查看数据类型

✅ 模板字符串（简化字符串拼接）

📌示例

console.log（'我是'+name+'，我今年'+age+'岁'）；
console.log（`我是${name}，我今年${age}岁`）；

✅ 函数
具名函数
function add(a, b) {
  return a + b;
}
匿名函数
let add = function(a,b){
    return a + b;
}
箭头函数
let add = (a, b)=>{
    return a + b;
}
✅ 自定义对象与JSON
  • 自定义对象（对象）
let user = {
  name: 'Tom',
  age: 20,
  gender:'男',
  sing() {
    alert(this.name+'唱着最炫的民族风');
  }
}

📌自定义对象中方法使用箭头函数this指向当前对象的父类【不推荐】

  • JSON （字符串）用于数据载体
{ 
    "name": "Tom", 
    "age": 20,
    "gender": "男"
}

📌key和字符串使用双引号

  • 转换方法：

    • JSON.stringify(obj) → 对象转字符串
    • JSON.parse(str) → 字符串转为对象  

✅ DOM 

概念

Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象
 DOM 操作

  • 获取DOM对象：

    • document.querySelector('选择器')  #sid .txt span
    • document.querySelectorAll('选择器') 【伪数组】

  • 操作内容：

    • element.innerText = '新内容'
    • element.style.color = 'red'

2.JavaScript 事件监听

✅ 什么是事件监听？

语法：事件源.addEventListener（'事件类型'，事件触发执行的函数）；

element.addEventListener('click', function() {
  // 点击后的动作
});
✅ 常见事件
  • click：点击
  • mouseenter / mouseleave：鼠标移入/移出
  • keydown/keyup：键盘按下/抬起
  • focus/blur：获得/失去焦点
  • input：输入框变化
  • submit：表单提交

3.JavaScript 模块化

二、Vue3

✅ 什么是 Vue？

Vue是一款用于构建用户界面的渐进式的JavaScript框架

✅Vue 基本框架    

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({   //应用实例
    data() {
      return {
        message: 'Hello Vue'
      }
    }
  }).mount('#app');
</script>

✅Vue 常用指令

指令       作用
v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind 为HTML标签绑定属性值，如设置href，css样式等
v-if/v-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
  • v-for 
    <tr v-for="(item, index) in items": key="item.id"> {{item.name}} </tr>
  •  v-bind 
    <img v-bind:src="item.image">
<img :src="item.image">
  • v-if & v-show
    指令 原理与使用场景
    v-if 控制是否创建元素（适合不频繁切换）
    v-show 控制显示隐藏（适合频繁切换）
  • v-model  
    <input v-model="username">
  •  v-on 
    <button @click="doSomething">提交</button>
<button v-on:click="doSomething">提交</button>

三、Ajax & Axios

✅ 什么是 Ajax？

  • 异步 JavaScript 和 XML 的缩写
  • 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页

✅使用 Axios（推荐）

axios.get(url)
  .then(response => { ... })
  .catch(error => { ... })
axios.post(url,id)
  .then(response => { ... })
  .catch(error => { ... })

✅async / await

async search(){
    let result = await axios.get(url);
    this.empList = result.data.data;

四、Vue生命周期

Vue 组件从创建到销毁的过程叫做生命周期，每个阶段都可以挂载函数（钩子）

✅ 总结

技术 作用
JavaScript 控制网页交互，掌握语法、DOM、事件是基础
Vue3 构建复杂页面、提高效率，掌握数据绑定、事件监听、条件渲染等核心指令
Axios 实现前后端数据通信的利器，便于异步请求服务器
# 前端 # javascript # vue.js # ajax
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

嘎嘎降AI：论文降重降AI率的一站式解决方案

avatar 2048 AI社区
cover

在 WSL2-NVIDIA-Workbench 中安装Anaconda、CUDA 13.0、cuDNN 9.12 及 PyTorch（含完整环境验证）

avatar 2048 AI社区

【瑞吉外卖】手机验证码登录（用QQ邮件发送代替）

本文介绍了QQ邮箱验证码登录功能的实现步骤：1.获取QQ邮箱授权码并配置；2.前端修改登录页面，增加验证码发送接口调用和登录逻辑；3.后端实现包括：添加邮件依赖、配置邮件参数、开发验证码发送接口（使用随机4位数字）、登录验证逻辑（自动注册新用户）、邮件发送服务等。重点使用了Spring Boot Mail组件实现邮件发送，通过Session存储验证码进行校验，并提供了完整的工具类生成随机验证码。系

avatar 2048 AI社区