不是怎么还在转啊...

003-Vue

Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官网）
框架：就是一套完整的项目解决方案，用于快速构建项目
- 优点：大大提升前端项目的开发效率
- 缺点：需要理解记忆框架的使用规则

Vue快速入门

准备：
- 引入Vue模块（官方提供）
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素(div)，被Vue控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面（两对嵌套的大括号）

示例

import {createApp} from 'https://unpkg.com/vue@3.5.11/dist/vue.esm-browser.js'

createApp({
  // 快捷创建方式：输入data后，有一个前面带方块的提示，选择回车即可
  data() {
    return {
      message: 'Hello Vue!',
      count: 140
    }
  }
}).mount('#app')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue测试</title>
</head>
<body>
  <div id="app">
    {{ message }}
    {{ count }}
  </div>

  
  <script src="js/test1.js" type="module">


  </script>
</body>
</html>

快捷创建data块

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性。不同的指令具有不同的含义，可以实现不同的功能
常用指令

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法

<tr v-for="(item, index) in items" : key="item.id"> {{item}}</tr>

参数说明：
- items：遍历的数组
- item：遍历出来的元素
- index：索引/下表，从0开始；可以省略，省略index语法：v-for="item in items"
key：
- 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
- 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）
注意！！！：
- 遍历的数组必须定义在data中；
- 想让哪个标签循环展示多次，就在哪个标签上使用v-for指令
- 插值表达式是不能出现在标签内部的，下面是个错误案例

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style等样式
语法：v-bind:属性名="属性值"
简化：:属性名="属性值"
注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据必须在data中定义
示例

v-if & v-show

作用：这两类指令，都是用来控制元素的显示和隐藏的
v-if
- 语法：v-if="表达式" 。表达式值为true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移出元素节点（条件渲染）
- 场景：要不显示，要么不显示，不频繁切换的场景
- 其他：可以配合 v-else-if / v-else 进行链式调用条件判断
注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if、v-else-if之后
v-show
- 语法：v-show="表达式" 。表达式值为true，显示；false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景
区别：v-if在false时不渲染元素，v-show不论表达式真假都会渲染，只是false时不显示出来

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
注意：v-model中绑定的变量，必须在data中定义

v-on

作用：为html标签绑定事件（添加事件监听）
语法：
- v-on：事件名=“方法名”
- 简写为 @事件名="..."
- 注意：method函数中的this指向Vue梳理，可以通过this获取到data中定义的数据

Ajax

介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML
作用：
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等
XML：（英文：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

同步与异步

Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发
官网
步骤：
- 引入Axios的js文件（参照官网）
- 使用Axios发送请求，并获取响应结果

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式： axios.请求方式(url [, data [, config]])
快捷创建方法：直接点thenc就能创建then和catch

async & await

可以通过async、await让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行
注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

posted @ 2025-08-23 15:56 Quirkygbl 阅读(6) 评论(0) 收藏举报

刷新页面返回顶部