首页前端Vue

# Vue3 速成

# 0、Vue2 VS Vue3

# 1、Vue3.js

Vue: 是一款用于构建用户界面的 JavaScript 框架，提供了一套声明式的、组件化的编程模型

官网：https://cn.vuejs.org/

Vue3 特有的语法：

1.setup：

vue3 中新增了 setup，它的出现是为了解决组件内容庞大后，理解和维护组件变得困难的问题。即 vue 中 data、computed、methods、watch 等内容非常多以后，同一业务逻辑的 data 中的数据和 methods 中的方法在 vue 文件中 “相隔甚远”，看代码时，经常需要根据 data 中的数据去搜索找到对应的 methods 方法，上下跳跃查看代码，非常不方便。而在 setup 中，则可以把 data 中的数据和 methods 方法写在相临的位置，方便查看和维护。

开启了 setup 就不需要在定义 data 或 methods 了，直接在 script 标签写就行

直接在 script 标签上使用 setup

<!--js代码-->
<script setup>

**const：** 定义常量，在 vue3 中被用来定义变量或函数

定义变量时，因为要保证 vue 的响应式，所以配合 ref 函数使用

ref 函数：
作用：定义一个响应式的数据
语法: const xxx = ref (initValue)
创建一个包含响应式数据的引用对象（reference 对象，简称 ref 对象）。
JS 中操作数据： xxx.value
模板中读取数据：不需要.value，直接：div /div
备注：
接收的数据可以是：基本类型、也可以是对象类型。
基本类型的数据：响应式依然是靠 Object.defineProperty () 的 get 与 set 完成的。
对象类型的数据：内部 “求助” 了 Vue3.0 中的一个新函数 —— reactive 函数。

适用于：基本类型 (数字、字符串、布尔值)

reactive 函数：

  • reactive 是 Vue3 中提供的实现响应式数据的方法。

  • reactive 参数必须是对象 (json /arr)

  • 如果给 reactive 传递了其它对象

    • 默认情况下，修改对象无法实现界面的数据绑定更新。
    • 如果需要更新，需要进行重新赋值。(即不允许直接操作数据，需要放个新的数据来替代原数据)

    适用于 对象或数组

核心的语法知识：

**1. 模板语法：** 插值语法

语法格式：<标签></ 标签 >

**2. 事件绑定：** 实现标签的事件的设置

语法格式：<标签 v-on: 事件名 ="方法名"></ 标签 > 简写 < 标签 @事件名 ="方法名"></ 标签 >

**3. 属性绑定：** 实现标签的属性的设置

语法格式：<标签 v-bind: 属性名 ="变量名"></ 标签 > 简写 < 标签：属性名 ="变量名"></ 标签 >

**4. 分支语法：** 实现分支语句

语法格式：<标签 v-if="布尔类型表达式"></ 标签 >

**5. 循环语法：** 实现重复 集合 遍历

语法格式：<标签 v-for="变量名 in 数组或集合名"></ 标签 >

**6. 双向绑定：** 实现输入标签（表单标签）的值的绑定，双向

语法格式：<标签 v-model="变量名"></ 标签 >

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    vue.js-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .dvcolor {
            color: red;
        }
        .dvgreen{
            color: green;
        }
    </style>
</head>
<body>
<!-- 标签 -->
<div id="app">
<!--    1. 插值 message 来自下面的变量 -->
    <h1></h1>
    <h1 style="color: red">点-</h1>
<!--    2. 事件 - 绑定 @click 点击事件 指定函数 -->
    <button @click="ck()">困了点点我</button>
<!--    3. 属性 - 绑定：属性名 -->
    <div :class="dvcls" @click="change">
        <h1>你的心情</h1>
    </div>
</div>
<script>
    // 引入
    const { createApp, ref } = Vue
    // 创建
    createApp({
        //setup 标记 Vue3 支持 Vue3 的语法 直接定义变量、函数都可以
        setup() {
            //const 常量 一般配合 ref（Vue3 语法）把一个常量变成一个对象，这个对象默认拥有属性 value
            const message = ref('Hello vue!')
            const num=ref(1);
            const dvcls=ref("dvcolor")
            // 定义 函数
            function ck(){
                num.value++;
                message.value="你点我"+num.value+"次！";
                console.log(message.value);
            }
            var t;
            const change = () => {
                console.log(dvcls.value)
                if(t!=null){
                    //js 关闭定时任务
                    clearInterval(t)
                }else {
                    //js 开启定时任务
                    t=setInterval(()=>{
                        if(dvcls.value=="dvcolor"){
                            dvcls.value="dvgreen"
                        }else {
                            dvcls.value="dvcolor"
                        }
                    },1000)
                }
              if(dvcls.value=="dvcolor"){
                  dvcls.value="dvgreen"
              }else {
                  dvcls.value="dvcolor"
              }
            }
            return {// 只有返回的上面才可以使用
                message,ck,num,dvcls,change
            }
        }
    }).mount('#app')
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<h1>Vue3的语法学习</h1>
    <div id="dv01">
<!--        4. 分支语句 -->
        <div>
            <div v-if="user.name!=null"><h2>用户名：</h2></div>
            <div v-else><button @click="login">点击登录</button></div>
            <div ><button @click="logout">注销登录</button></div>
        </div>
<!--        5. 循环语句 -->
        <div>
            <h1>精英小组</h1>
            <h2 v-for="(n,index) in names" @click="del(index)"></h2>
<!--            6. 双向绑定 表单标签：输入框（输入框、单选框、复选框）、下拉框、文本域 -->
            <div>
                <input v-model="name">
                <button @click="add">加入精英小组</button>
            </div>
        </div>
    </div>
<script>
    // 引入
    const { createApp, ref } = Vue
    // 创建
    createApp({
        //setup 标记 Vue3 支持 Vue3 的语法 直接定义变量、函数都可以
        setup() {
            //const 常量 一般配合 ref（Vue3 语法）把一个常量变成一个对象，这个对象默认拥有属性 value
            // 变量 对象
            const user = ref({})
            // 变量 数组
            const names = ref([
                "邢朋辉","田密","许阳"
            ])
            const name = ref("")
            const add = () => {
              names.value[names.value.length]=name.value;
            }
            const del = (i) => {
                //splice 数组中删除，参数说明：1. 从哪个索引开始删除 2. 删除几个
              names.value.splice(i,1);
            }
            // 定义函数
            const login = () => {
              user.value.name="帅帅的邢";
            }
            const logout = () => {
                user.value.name=null;
            }
            return {// 只有返回的上面才可以使用
                user,login,logout,names,name,add,del
            }
        }
    }).mount('#dv01')
</script>
</body>
</html>
# 2、Vite
Vite：是一种新型前端构建工具，能够显著提升前端开发体验
脚手架，创建 Vue 项目，替代 Vue-cli
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
npm >10.2.0 以上版本
如果版本低，升级一下：
npm install -g npm@10.2.0
基于 Vite 创建 vue 项目：
1.cmd 或终端执行命令
npm create vite@latest
如果报 npm 版本过低，需要执行 npm install -g npm@10.2.0 升级 npm 的版本
image-20231017115210999
2. 完成初始化
分别执行：
cd vue02
npm install
npm run dev
image-20231017115330906
3. 访问
image-20231017115350991
vite 的项目结构：
image-20231017115446998
vue 页面结构：
<!--html标签-->
<template>
  <div>
    <h1>饿了么？</h1>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<!--js代码 vue3的语法-->
<script setup>
import HelloWorld from './components/HelloWorld.vue'

</script>
<!--css样式 美化-->
<style scoped>

</style>

Vue 页面使用 Vue3 语法
<template>
  <h1>{{ msg }}</h1>
  <h1>醒醒，不能犯困！</h1>
  <div>
    <h1>次数：{{count}}</h1>
    <button @click="dj">点击我，看看什么效果</button>
  </div>
</template>

<!--Vue3的写法-->
<script setup>
//2.导入 Vue3中对象
import { ref } from 'vue'

//3.自定义属性
defineProps({
  msg: String,
})
//4.定义变量
const count = ref(0)
//5.定义函数
const dj = () => {
  count.value++;
  alert("你目前点击："+count.value);
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

# 3、Vue-router
# 3.1 Vue-router 是什么
Vue-router:Vue.js 的官方路由为 Vue.js 提供富有表现力、可配置的、方便的路由
官网：https://router.vuejs.org/zh/
作用：
1. 实现 vue 页面 (组件) 的跳转
2. 可以在跳转的时候携带参数
# 3.2 Vue3 使用 Vue-router
基于 Vue-router 实现页面跳转：
1. 安装 vue-router
npm install vue-router@4
image-20231017151206218
2. 在 src 创建路由的 js 文件
import {createRouter as _createRouter, createWebHistory} from 'vue-router';
// 导入 凡是想要通过路由跳转的，都需要在这：
// 1. 导入
// 2. 注册 设置对应 vue 组件的路径名
import study from '../views/study.vue'
const routes = [
    // 2. 注册 设置对应 vue 组件的路径名
    { path: '/study', component: study }
]
export function createRouter() {
    return _createRouter({
        history: createWebHistory(),
        routes
    })
}
image-20231017151308655
3. 在 main.js 中实现路由的配置
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由
import { createRouter } from "./router/index.js"
// 配置路由
createApp(App).use(createRouter()).mount('#app')
4. 在 app.vue 主页 使用路由
<!--html标签-->
<template>
  <div>
<!--    静态路由 to 对应路径-->
    <router-link to="/study">静态路由</router-link>
  </div>
  <div>
<!--  路由跳转的页面显示去  -->
    <router-view/>
  </div>
</template>
<!--js代码 vue3的语法-->
<script setup>

</script>
<!--css样式 美化-->
<style scoped>

</style>

5. 实现一个 vue3 的页面编写
<!--标签 画页面-->
<template>
<div>
  <h1>学习vue3</h1>
  <div>
    <h1>内容：{{str1}}</h1>
    <button style="font-size: 30px;color: red" @click="show">查看内容</button>
  </div>
</div>
</template>

<!--Vue3的写法 setup-->
<script setup>
//导入
import {ref} from 'vue'

//定义变量
const str1=ref("醒醒……");
//定义函数
const show=()=>{
  alert(str1.value);
}

</script>

<style scoped>

</style>

# 3.3 Vue-router 实现跳转的方式
vue-router 实现页面跳转有 2 种方式：
必须在页面使用：router-view (一般写在 app.vue 页面)
第一种：声明式路由（静态路由）
直接在 template 里面使用 router-link 标签 通过 to 属性实现页面跳转
  <div>
<!--    静态路由 to 对应路径-->
    <router-link to="/study">静态路由</router-link>
  </div>

第二种：编程式路由（动态路由）
<template>
<div>
  <h1>动态路由</h1>
  <button @click="tz">点击跳转</button>
</div>
</template>

<script setup>
// 导入
import {ref} from 'vue'
import { useRouter } from 'vue-router'
// 声明变量
const router=useRouter()
const tz=()=>{
  //基于路由 实现页面跳转 动态路由
  router.push("/study");
}
</script>

<style scoped>

</style>

# 3.4 Vue-router 实现传值
Vue-router 在跳转页面的时候，也可以携带数据过去
有 2 种方式：
第一种：path (路径)+query (查询参数)
传递：router.push ({path: '/study', query: { q1: msg1.value} })
<template>
<div>
  <h1>通过路径和查询参数进行传递</h1>
  <input v-model="msg1">
  <button @click="tz1">跳转传参</button>
</div>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";
const router=useRouter();
const msg1=ref("");
const tz1=()=>{
  //路由 跳转页面 传递参数 path+query
  router.push({ path: '/study', query: { q1: msg1.value } })
}
</script>

<style scoped>

</style>

获取：
import {useRoute} from 'vue-router'
const route=useRoute();
<h1>query:<!--swig9--></h1>
第二种：name (名称)+params (参数)
路由注册的时候：
// 2. 注册 设置对应 vue 组件的路径名
// 通过 name+params 传值的需要，需要再路径后面：参数名
{ path: '/study/:p1',name:'study', component: study },
传递：
<template>
<div>
  <label>要传的数据：</label><input v-model="msg2">
  <button @click="tz2">跳转传值通过参数</button>
</div>
</template>

<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";

const router=useRouter();

const msg2=ref("")

const tz2 = () => {
  router.push({ name: 'study', params: { p1:msg2.value } })
}
</script>

<style scoped>

</style>

获取：
<!--标签 画页面-->
<template>
<div>
  <h1>学习vue3</h1>
  <div>
    <h1>内容：{{str1}}</h1>
    <button style="font-size: 30px;color: red" @click="show">查看内容</button>
    <div>
      <h1>接收路由携带数据</h1>
      <h1>query:{{route.query.q1}}</h1>
      <h1>params:{{route.params.p1}}</h1>
    </div>
  </div>
</div>
</template>

<!--Vue3的写法 setup-->
<script setup>
//导入
import {ref} from 'vue'
import {useRoute} from 'vue-router'
const route=useRoute();

console.log(route.params)
//定义变量
const str1=ref("醒醒……");
//定义函数
const show=()=>{
  alert(str1.value);
}

</script>

<style scoped>

</style>

主要 vue3 中使用 name+params 进行传递参数，需要再注册路由的时候，通过传递的参数名，进行路径占位：path: '/study/:p1'
其中 p1 就是要传递的参数名
# 4、Pinia
# 4.1 Pinia 概述
Pinia 是 Vue 的存储库，实现全局变量的定义
这里定义的变量信息，任何页面都可以使用，代替原来的 VueX
官网：https://pinia.web3doc.top/
# 4.2 Pinia 存储数据
实现步骤：
1. 依赖
npm install pinia
2. 实现配置
在 main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由
import { createRouter } from "./router/index.js"
// 导入 pinia
import { createPinia } from 'pinia'
// 实例化 pinia
const pinia = createPinia()
// 配置路由、pinia
createApp(App).use(createRouter()).use(pinia).mount('#app')
3. 实现 js
在 src 创建文件夹 pinia 内部创建 js 文件 index.js
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
    state: () => {// 定义需要共享的变量
        return {
            author:'邢' // 定义全局变量
        }
    },
    // 定义方法  设置 state 中的值 set 方法
    actions: {
       setAuthor(author){ // 定义函数 修饰变量的值
            this.author=author;
       }
    }
})
4. 使用
<template>
<div>
  <h1>动态路由</h1>
  <button @click="tz">点击跳转</button>

  <div>
<!--    获取pinia中的值-->
    <h1>全局变量：{{store.author}}</h1>
  </div>
  <div>
    <h1>修改Pinia的值</h1>
    <input v-model="a">
    <button @click="set1">修改作者</button>
  </div>
</div>
</template>

<script setup>
// 导入
import {ref} from 'vue'
import { useRouter } from 'vue-router'
//导入
import {useStore} from "../pinia/index.js";
// 声明变量
const router=useRouter()
// 声明 pinia
const store=useStore()
const tz=()=>{
  //基于路由 实现页面跳转 动态路由
  router.push("/study");
}

const a=ref("");

const set1 = () => {
  //修改 pinia中的值
  store.setAuthor(a.value);
}
</script>

<style scoped>

</style>

获取：
修改值：store.setAuthor (要修改的内容);
# 4.3 Pinia 实现持久化
Pinia 默认数据存储在内存中，一旦刷新浏览器，数据就没有了，所以可以配置持久化
持久化插件：pinia-plugin-persist
实现步骤：
1. 依赖
npm install pinia-plugin-persist
2. 实现配置
在 main.js 中使用
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入路由
import { createRouter } from "./router/index.js"
// 导入 pinia
import { createPinia } from 'pinia'
// 导入 pinia 持久化 插件
import piniaPersist from 'pinia-plugin-persist'
// 设置 pinia 持久化
const pinia = createPinia()
pinia.use(piniaPersist)
// 配置路由、pinia
createApp(App).use(createRouter()).use(pinia).mount('#app')
3. 在 pinia 的 js 中开启持久化
在 store/index.js 中
import { defineStore } from 'pinia'
export const useStore = defineStore('store', {
    state: () => {// 定义需要共享的变量
        return {
            author:'邢' // 定义全局变量
        }
    },
    // 定义方法  设置 state 中的值 set 方法
    actions: {
       setAuthor(author){ // 定义函数 修饰变量的值
            this.author=author;
       }
    }
  ,persist: {
        enabled: true //true 表示开启持久化保存
    }
})
接下来再测试，发送刷新浏览器，数据仍存在
# 5、Vant 组件库
# 6、Axios
# 7、综合案例