那些做测评的网站好,建设网站哪家便宜,手机网站域名和pc域名的区别,毕业设计旅游网站开发一、代码及思路解析
1、创建路由
// TODO#xff1a;待补充代码#xff0c;在此引入路由相关 API
const { createRouter,createWebHistory } VueRouter; // TODO:待补充代码#xff0c;为项目配置 history 模式的路由
const router createRouter({// 1、配置路由模式[…一、代码及思路解析
1、创建路由
// TODO待补充代码在此引入路由相关 API
const { createRouter,createWebHistory } VueRouter; // TODO:待补充代码为项目配置 history 模式的路由
const router createRouter({// 1、配置路由模式[history]history:createWebHistory(),// 2、路由规则[routes]routes:[{path:/,component:WalletPage},{path:/deposit,component: DepositPage }]})
2、从pinia仓库中读取数据
1、说明 直接取用啥取啥从相应的仓库中用.方法取 span iddeposit-balance {{store.balance}} /span 【值得一提的是】vue3 template中可以使用 双大括号语法 template: div classdeposit-page wallet-pagediv classwallet-headerh1Deposit/h1div classwallet-balanceh2Balance/h2p!-- 2、从仓库中取数据 -- span iddeposit-balance {{store.balance}} /spanspanETH/span/p/div/divdiv classdeposit-bodypPlease enter the amount you want to deposit:/pinput typenumber v-modeldepositAmount /button clickdepositDeposit/button/div/div
3、完成业务逻辑
setup() {const depositAmount Vue.ref() // 输入框中的的值-存款金额const store useMoneyStore() // 引入 store// TODO待补充代码完善点击存款按钮事件function deposit() {// 3、余额 现在的余额 输入框中输入的金额store.balance depositAmount.value}return {deposit,store,depositAmount}}
二、知识点回顾 【前情提要】 本道题主要考察vue3中路由的配置以及pinia仓库的基本使用 1、路由的基本使用
1配置路由
// 第一步引入库和组件
// 引入 createRouter createWebHistory
import {createRouter,createWebHistory} from vue-router
// 引入组件
import Home from /components/Home.vue
import News from /components/News.vue
import About from /components/About.vue// 第二步创建路由器
const router createRouter({//路由器的工作模式history:createWebHistory(), //一个一个的路由规则routes:[ {path:/home,component:Home},{path:/news,component:News},{path:/about,component:About},]
})// 第三步暴露出去router
export default router
2 使用路由 1、找到导航区和展示区 2、应用路由 a、导航区将a标签 替换为 RouterLink b、展示区使用 RouterView 组件呈现 告诉路由器匹配到的路由组件呈现在哪 【注意】如果是单页面html文件 规则同上 templatediv classapph2 classtitleVue路由测试/h2!-- 导航区 --div classnavigate!-- 应用路由 将a标签 替换为 RouterLink组件 --RouterLink to/home active-classactive首页/RouterLinkRouterLink to/news active-classactive新闻/RouterLinkRouterLink to/about active-classactive关于/RouterLink/div!-- 展示区 --div classmain-content!-- 应用路由 RouterView 组件呈现 --RouterView/RouterView/div/div
/templatescript langts setup nameAppimport {RouterLink,RouterView} from vue-router
/script 2、pinia仓库的基本使用 Store是一个保存状态、业务逻辑 的实体每个组件都可以读取、写入它。 它有三个概念state、getter、action相当于组件中的 data、 computed 和 methods。 1创建
// 引入defineStore用于创建store
import {defineStore} from pinia// 定义并暴露一个store
export const useCountStore defineStore(count,{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})
2使用 使用方式直接取用啥取啥从相应的仓库中用.方法取 sumStore.sum 1、引入对应的useXxxxxStore 2、调用useXxxxxStore得到对应的store 3、用.方法 sumStore.sum 使用 templateh2当前求和为{{ sumStore.sum }}/h2
/templatescript setup langts nameCount// 1、引入对应的useXxxxxStore import {useSumStore} from /store/sum// 2、调用useXxxxxStore得到对应的storeconst sumStore useSumStore()
/scripttemplateulli v-fortalk in talkStore.talkList :keytalk.id{{ talk.content }}/li/ul/templatescript setup langts nameCountimport axios from axiosimport {useTalkStore} from /store/talkconst talkStore useTalkStore()/script
