1、什么是Vue？
Vue 是一款用于构建用户界面的渐进式的JavaScript框架。(官方:https://cn.vuejs.org/)
2、快速入门
①准备
准备html页面,并引入Vue模块(官方提供)
创建Vue程序的应用实例
准备元素(div)，被Vue控制
②构建用户界面
准备数据
通过插值表达式渲染页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><!-- 引入vue模块 --><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';/* 创建vue应用实例 */createApp({data(){return {// 定义数据msg: 'hello vue3'}}}).mount("#app");</script>
</body>
</html>
3、常用指令
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
| 指令 | 作用 |
|---|---|
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind | 为HTML标签绑定属性值，如设置href，css样式等 |
v-if/v-else-if/v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件指令 |
注意：v-if 与v-show的区别?
v-if 是根据条件判断是创建还是移除元素节点(条件渲染)
v-show 是根据css样式display来控制元素的显示与隐藏
4、Vue生命周期
生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子),让开发者有机会在特定的阶段执行自己的代码
- 创建前（beforecreate）
- 创建后（created）
- 载入前（beforeMount）
- 挂载完成（mounted）
- 数据更新前（beforeUpdate）
- 数据更新后（updated）
- 组件销毁前（beforeUnmount）
- 组件销毁后（unmounted）
5、Axios简介
介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
引入Axios的js文件(参照官网)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET:
axios.get(url).then((res)=>i.}).catch((err)=>{.})
POST:
axios.post(url,data).then((res)=>{.}).catch((err)=>{..} )
6、npm 命令的含义
npm:Node Package Manager，是NodeJs的软件包管理器
npm install xxxx 从远程仓库获取并安装js
7、Vue项目-创建
创建一个工程化的Vue项目，执行命令:npm init vue@latest
执行上述指令，将会安装并执行create-vue，它是Vue官方的项目脚手架工具。
8、Vue组件书写两种风格
选项式API
组合式API：推荐
<script setup>import { onMounted, ref } from 'vue';const count = ref(0); // 声明响应式变量function increment() { // 声明函数count.value++;}onMounted(() => { // 声明钩子函数console.log('Vue Mounted ...');})
</script>
<template><button @click="increment">count: {{ count }}</button>
</template>
setup:是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
ref():接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value
onMounted():在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。
9、拦截器
在请求或响应被 then 或 catch 处理前拦截它们
请求成功：配置请求头
请求失败：请求错误处理
响应成功：响应数据处理
响应失败：响应错误提示
//导入axios npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀 ，baseURl
const baseURL ='http://localhost:8080'
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(result =>{//http响应状态码为2xx会触发该函数return result.data;},err =>{//http响应状态码为2xx会触发该函数return Promise.reject(err);},
)
export default instance;
