黑马-Vue前端

前言

HTML:负责网页的结构（标签：form表单 / table表格 / a /div/span）

CSS:负责网页的表现（样式：color/font/background/width/height）

JavaScript:负责网页的行为（交互效果）

创建一个文件夹

输入cmd

执行 code . 回车，打开VsCode

Vue

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

Ajax:Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。

官网：https://www.axios-http.cn/

Axios

引入Axios的js文件（参照官网）

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用Axios发送请求，并获取相应结果

为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式： axios.请求方式（url [, data [, config]]）

1、局部使用Vue

1.1、快速入门

准备工作

引入Vue模块
创建Vue的应用实例
定义元素（div),交给Vue控制

构建用户界面

准备数据
用插值表达式渲染

1.2、常用指令

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

v-for

作用：列表渲染，遍历容器的元素或者对象的属性
语法： v-for = "(item,index) in items"
- 参数说明
  - items 为遍历的数组
  - item 为遍历出来的元素
  - index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind

作用：动态为HTML标签绑定属性值，如设置href, src, style样式等。
语法：v-bind:属性名 = "属性值"
简化： :属性名="属性值"

注意：v-bind 所绑定的数据，必须在data中定义。

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-on

作用：为html标签绑定事件
语法：
- v-on:事件名="函数名"
- 简写为 @事件名="函数名"

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：v-model="变量名"

注意：v-model 中绑定的变量，必须在data中定义

1.3、生命周期

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码

经常用的是第四个 mounted

2、整站使用vue

2.1、Vue项目构建工具

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。
create-vue提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包
依赖环境： Node JS

npm : Node Package Manager, 是NodeJS的软件包管理器

Vue项目创建

最后输入 code . 打开VsCode

2.2、Vue项目目录结构

Vue项目启动

方式一：

打开浏览器，在浏览器地址栏访问 http://127.0.0.1:5173 就可以访问到vue项目

方式二：

2.3、Vue项目开发流程

index.html src: App.vue(根组件)，main.js（入口文件）

2.3.1、App.vue

一般来说，index.html和main.js是不用改变的，编写主要在App.vue中

2.3.2、API风格

Vue的组件有两种不同的风格：组合式API和 选项式API

2.4、Element-Plus

Element：是饿了么团队研发的，基于 Vue3,面向设计师和开发者的组件库
组件：组成网页的部件，例如超链接、按钮、表格、图片、分页等
官网：https://element-plus.org/zh-CN/#/zh-CN

快速入门

1、创建一个工程化的vue项目

2、参照官方文档，安装Element Plus组件库（在当前工程的目录下）：npm install element-plus --save

3、main.j中引入Element Plus组件库（参照官方文档）

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')