vue3学习(续篇)

cllsse2024-03-07 13:23

vue3学习(续篇)

默认有vue3基础并有一定python编程经验。

chrome浏览器安装vue.js devtools拓展。

文章目录

  • vue3学习(续篇)
    • [1. element-ui使用](#1. element-ui使用)
    • [2. axios 网络请求](#2. axios 网络请求)
      • [1. 简介](#1. 简介)
      • [2. 操作](#2. 操作)
    • [3. flask-cors解决跨域问题](#3. flask-cors解决跨域问题)
      • [1. 简介](#1. 简介)
      • [2. 操作](#2. 操作)
    • [4. 前端路由 vue-router](#4. 前端路由 vue-router)
      • [1. 简单使用](#1. 简单使用)
      • [2. 配置路径别名@和vscode路径显示](#2. 配置路径别名@和vscode路径显示)
      • [3. 路由查询参数与路径传参](#3. 路由查询参数与路径传参)
      • [4. router-link,定义别名，定义路由名称，编程式导航](#4. router-link,定义别名，定义路由名称，编程式导航)
      • [5. 嵌套路由结合共享组件](#5. 嵌套路由结合共享组件)
      • [6. 重定向](#6. 重定向)
      • [7. 全局前置守卫 router.beforeEach](#7. 全局前置守卫 router.beforeEach)
    • [5. vuex](#5. vuex)
    • 参考

1. element-ui使用

安装

cmd 复制代码 
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

main.js

javascript 复制代码 
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')

App.vue

vue 复制代码 
<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </template>
  
  <script lang="ts" setup>
  interface User {
    date: string
    name: string
    address: string
  }
  
  const tableRowClassName = ({
    row,
    rowIndex,
  }: {
    row: User
    rowIndex: number
  }) => {
    if (rowIndex === 1) {
      return 'warning-row'
    } else if (rowIndex === 3) {
      return 'success-row'
    }
    return ''
  }
  
  const tableData: User[] = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
  </script>
  
  <style>
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  </style>

2. axios 网络请求

1. 简介

Axios是一个基于promise的网络请求库，作用于node.js和浏览器中。Axios能自动完成JSON数据的转换。

安装npm install axios

执行GET请求

typescript 复制代码 
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    //处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    //处理失败情况
    console.log(error);
  })
  .then(function(){
    //总是会执行
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

typescript 复制代码 
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

与vue整合

javascript 复制代码 
//配置请求根路径
axios.defaults.baseURL='http://api.com'

//将axios作为全局的自定义属性，每个组件可以在内部直接访问(vue3)
app.config.globalProperties.$http=axios 
//之后就可以this.$http.get(...)

2. 操作

App.vue

vue 复制代码 
<template>
    <Demo1/>
</template>
<script>
import Demo1 from "./components/Demo1.vue"
import axios from 'axios'
export default{
    data(){
        return{
        }
    },
    created(){//详见组件生命周期
      axios.get('https://www.baidu.com').then((response)=>{console.log(response.data);})
      //箭头函数使this指向vue实例  
    },
    components:{
        Demo1
    }
}
</script>

很明显，我们的get请求被阻止了，因为这涉及了跨域问题，后面会说。

3. flask-cors解决跨域问题

1. 简介

​ 跨域是因为出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

​ 我们可以在服务器端使用flask-cors解决这个问题。

详见 flask------ flask-cors 解决跨域问题 @红@旗下的小兵

pip install -U flask-cors

全局解决-使用CORS类

python 复制代码 
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
#CORS(app, supports_credentials=True)
#服务器允许用户跨源发出cookie或经过身份验证的请求

使用@cross_origin装饰器（适用于配置特定的api接口）

python 复制代码 
from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
 
# 只允许路径为'/login'跨域！
@app.route('/login')
@cross_origin()
def data():
    return jsonify({'name':'lxc'})

2. 操作

打开pycharm，进以前用过的python项目

输入以下代码，在http://127.0.0.0:9901起一个接口

python 复制代码 
from flask import Flask,url_for,request,render_template,make_response,redirect,jsonify
from flask_cors import CORS,cross_origin
app = Flask(__name__) # 用本脚本名实例化Flask对象
cors = CORS(app)

@app.route('/login',methods=['GET','POST'])
def login():
    user={'id':request.args.get('id'),'ps':request.args.get('ps')}
    return jsonify(user)

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=9901,debug=1)

App.vue 发送get请求调用上述接口

vue 复制代码 
<template>
  <Demo1/>
</template>
<script>
import Demo1 from "./components/Demo1.vue"
import axios from 'axios'
export default{
  data(){
      return{
      }
  },
  created(){
    axios.get('http://127.0.0.1:9901/login?id=admin&ps=123456').then((response)=>{console.log(response.data);})
  },
  components:{
      Demo1
  }
}
</script>

4. 前端路由 vue-router

npm install vue-router@4

1. 简单使用

main.js

javascript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router' 

const app = createApp(App)
app.use(ElementPlus)

//5. 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)
app.mount("#app")

src/router/index.js

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue-router'

// 1. 定义一些路由,每个路由都需要映射到一个组件。
const routes=[
    {path:'/',component:()=>import("../components/Demo1.vue")}, // 2.导入路由组件
    {path:'/demo2',component:()=>import("../components/Demo2.vue")}
]

// 3. 创建路由实例并传递`routes`配置
const router=createRouter({
    // 4. 内部提供了 history 模式的实现
  history: createWebHistory(),
  routes, // `routes: routes` 的缩写
})

export default router

App.vue

vue 复制代码 
<template>
  <router-view /><!--6. 通过router-view使用路由-->
</template>
<script>
</script>

2. 配置路径别名@和vscode路径显示

vscode下载插件别名路径跳转。

vite.config.js 修改对应部分

javascript 复制代码 
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      'cop':fileURLToPath(new URL('./src/components', import.meta.url))
    }
  }

/src/router/index.js 修改对应部分

javascript 复制代码 
const routes=[
    {path:'/',component:()=>import("@/components/Demo1.vue")}, // 2.导入路由组件
    {path:'/demo2',component:()=>import("cop/Demo2.vue")}
]

此时，vscode里对路径ctrl+左键不能跳转到Demo2.vue，需要修改jsconfig.json

javascript 复制代码 
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "cop/*":["./src/components/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

3. 路由查询参数与路径传参

$router是VueRouter的实例，是全局路由对象，用户可以在任何地方使用，包含了所有路由对象，包含了许多关键对象和属性。

$route代表了正在跳转的路由对象，是一个局部对象。每一个路由都有一个$route对象。

$route常见属性 说明
.path 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
.params 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
.query 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
.hash 当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

修改Demo2.vue

vue 复制代码 
<template>
    <h3>Demo2</h3>
    <p>id: {{this.$route.query.id}}</p>
    <router-view />
    </template>

index.js 修改对应部分

javascript 复制代码 
const routes=[
    {path:'/',component:()=>import("@/components/Demo1.vue")}, // 2.导入路由组件
    {path:'/demo2',component:()=>import("cop/Demo2.vue")},
    {path:'/user/:id/:name?',component:()=>import("cop/user.vue")}
    //加?表示name值不是必须
]

./components/user.vue

vue 复制代码 
<template>
    <h3>user</h3>
<p>id: {{$route.params.id}}</p>
<p>name: {{$route.params.name}}</p>
</template>
<script>
</script>

4. router-link,定义别名，定义路由名称，编程式导航

在index.js里 修改对应部分

javascript 复制代码 
const routes=[
    {
      path:'/',
      alias:["/home","/index"],
        //定义别名为home或index,可以xxx/home访问
      component:()=>import("@/components/Demo1.vue")
    }, 
    {path:'/demo2',component:()=>import("cop/Demo2.vue")},
    {
      path:'/user/:id/:name?',
      name:"member",//定义路由名称，路径显示还是path或alias
      component:()=>import("cop/user.vue")}
    //加?表示name值不是必须
]

Demo1.vue

vue 复制代码 
<template>
    <h3>Demo1</h3>
    <router-link to="/Demo2?id=999">查询字符串传参</router-link><br>
    <router-link to="/user/007/tom">路径传参</router-link><br>
    <router-link :to="{path:'/Demo2',query:{id:333}}">查询字符串传参-动态属性绑定</router-link><br>
    <router-link :to="{name:'member',params:{id:334,name:'tim'}}">路径传参-动态属性绑定</router-link><br>
    <button @click="goTo()">编程式导航</button>
    </template>
        
    <script setup>
    import {useRouter} from 'vue-router'
    const router=useRouter()
    const goTo=()=>router.push('/Demo2?id=888')
    </script>

5. 嵌套路由结合共享组件

index.js 修改对应部分

javascript 复制代码 
const routes=[
    {
      path:'/',// xxx/
      alias:["/home","/index"],//定义别名为home,可以xxx/home访问
      component:()=>import("cop/Father.vue"),
      children:[//实现路由嵌套
        {
          path:'Child',// xxx/Child或xxx/index/Child
          component:()=>import("cop/Child.vue")
        }
      ]
    }
]

Demo1.vue，Demo2.vue和Child.vue参照下面格式

vue 复制代码 
<template>
    <h3>Demo1</h3>
    </template>

Father.vue

vue 复制代码 
<template>
    <h3>Father</h3>
    <Demo1 />
    <Demo2 />
    <router-view />
</template>
<script setup>
import Demo1 from './Demo1.vue' //共享组件
import Demo2 from './Demo2.vue'
</script>

6. 重定向

index.js 修改对应部分

javascript 复制代码 
const routes=[
    {
      path:'/',
      component:()=>import("cop/Demo1.vue"),
    },
    {
      path:'/demo1',
      redirect:"/" // xxx/demo1重定向到xxx/
      //redirect:{name:'member',params:{id:334,name:'tim'}} 
      //还可以传编程式导航对象
    }
]

7. 全局前置守卫 router.beforeEach

main.js里

javascript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)

//全局前置守卫
router.beforeEach((to,from,next)=>{
    console.log('to:',to)
    console.log('from:',from)

    if(to.name=='member'){
        next(false)//拦截访问路由
    }else{
        next()//继续
    }
})

app.mount("#app")

5. vuex

​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态 说明
state 在vuex中state中定义数据，可以在任何组件中进行调用。this.$store.state.属性名称
getters 计算属性
mutations 更改 Vuex 的 store 中的状态的唯一方法是提交(this.$store.commit('func')) mutation
actions 异步操作 ，this.$store.dispatch('func')触发函数
modules 将store分割成模块，每个模块都有自己的state,mutation,action,getters

npm install vuex@next --save

main.js

javascript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(ElementPlus)
app.use(store)
app.mount("#app")

/src/store/index.js

javascript 复制代码 
import { createStore } from 'vuex'
const store=createStore({
    state(){//状态管理器中定义的数据源
        return{
            heave:'举起',
            count:0
        }
    },
    getters:{//相当于计算属性
        len(state){
            return state.heave.length
        }
    },
    mutations:{//同步操作
        changeCount(state,num){
            state.count+=num
            console.log('count的值为 ',state.count)
        }
    },
    actions:{//异步操作
        delayChangeCount(store,num){
            setTimeout(()=>{
                store.commit('changeCount',num)
            },3000);//延时3秒执行
        }
    },
    modules:{

    }
})
export default store

App.vue 添加

vue 复制代码 
<template>
  <p>{{ $store.state.heave }}</p>
  <button @click="handler">点我</button>
</template>
<script>
import Demo1 from "./components/Demo1.vue"
import axios from 'axios'
export default{
  data(){
      return{
      }
  },
  created(){
    this.handler()
  },
  methods:{
    handler(){
      this.$store.commit('changeCount',1)//mutations
      this.$store.commit('changeCount',2)
      this.$store.commit('changeCount',3)
      this.$store.dispatch('delayChangeCount',10)//actions
      console.log(this.$store.getters.len)//getters
    }
  }
}
</script>

可以在devtools看到vuex的执行。

至于modules的使用，需要使比如moduleA.js成为命名空间模块

javascript 复制代码 
const moduleA ={
    namespaced:true,  
//开启namespace:true，该模块就成为命名空间模块了
    state:{
        count:10,
        countA:888
    },
    getters:{...},
    mutations:{...},
    actions:{...}
}

然后在store/index.js里使用如下方法引入，之后使用this.$store.moduleA.state.count访问count

javascript 复制代码 
import moduleA from './module/moduleA.js'
import { createStore } from 'vuex'
const store = createStore({
  modules:{
    moduleA
  }
})
export default store

参考

30分钟学会Vue之VueRouter&Vuex 吴悠讲编程
20分钟学会Vue Router4(路由) 邓瑞编程1天搞定SpringBoot+Vue全栈开发 刘老师教编程

相关推荐
计算机-秋大田2 小时前
基于微信小程序的养老院管理系统的设计与实现，LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
龙哥·三年风水9 小时前
群控系统服务端开发模式-应用开发-前端个人信息功能
分布式·vue·群控系统
真的很上进16 小时前
⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
java·前端·javascript·react.js·前端框架·vue·es6
幸运小圣20 小时前
Vue3 -- 项目配置之prettier【企业级项目配置保姆级教程2】
前端·vue.js·vue
计算机-秋大田21 小时前
基于微信小程序的农场管理系统的设计与实现，LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
fukaiit21 小时前
vue项目npm run serve出现【- Network: unavailable】（从排查到放弃）
npm·vue·node·win11
_处女座程序员的日常1 天前
Rollup failed to resolve import “destr“ from ***/node_modules/pinia-plugin-pers
javascript·uni-app·vue
四喜花露水2 天前
vue2.x elementui 固定顶部、左侧菜单与面包屑，自适应 iframe 页面布局
前端·elementui·vue
松果猿2 天前
Vite初始化Vue3+Typescrpt项目
vue
龙哥·三年风水2 天前
群控系统服务端开发模式-应用开发-前端个人资料开发
分布式·vue·群控系统
热门推荐
01玄机平台应急响应—webshell查杀02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04新版微信小程序获取用户手机号05文件或文件夹名称中有空格如何批量去除06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【TC3xx芯片】TC3xx芯片电源管理系统PMS详解08优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10【Flutter】基于 GetX 实现 Dio 的生命周期自动化