Vue记录(下篇）

2023-09-17 20:23:50

Vuex

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

getters配置项

*Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<h3>当前求和的10倍为：{{$store.getters.bigSum}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0 //当前的和
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
    bigSum(){
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

getters配置项的使用：

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

  2. 在store.js中追加getters配置

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	...
	getters
})
  1. 组件中读取数据：$store.getters.bigSum

四个map方法的使用

mapState与mapGetters

index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0, //当前的和
    name:'JOJO',
    school:'尚硅谷',
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
    bigSum(){
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

mapState方法：用于帮助我们映射state中的数据

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},
mapActions与mapMutations

Count.vue

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			// 借助mapActions生成：increment、decrement（对象形式）
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),

			// 借助mapActions生成：incrementOdd、incrementWait（对象形式）
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

=

备注：mapActions与mapMutations使用时，若需要传递参数，则需要在模板中绑定事件时传递好参数，否则参数是事件对象

vue-router路由

在这里插入图片描述
在这里插入图片描述
下载vue-router：npm i vue-router

基本路由

  1. 安装vue-router，命令：npm i vue-router
  2. 应用插件：Vue.use(VueRouter)
  3. 编写router配置项：
//引入VueRouter 
import VueRouter from 'vue-router' 
//引入Luyou 组件 
import About from '../components/About' import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则 
const router = new VueRouter({ 	
routes:[ 		
{ 			
path:'/about', 			
component:About 		
}, 		
{ 			
path:'/home', 			
component:Home 		
} 	
] 
})
//暴露router export default router
实现切换（active-class可配置高亮样式）：
<router-link active-class="active" to="/about">About</router-link> 1 指定展示位：<router-view></router-view>

嵌套路由

  1. 配置路由规则，使用children配置项：
routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message', //此处一定不要写：/message
				component:Message
			}
		]
	}
]
  1. 跳转（要写完整路径）：News

路由的query参数

  1. 传递参数：
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
	path:'/home/message/detail',
	query:{
		id:666,
        title:'你好'
	}
}">跳转</router-link>
  1. 接收参数：
$route.query.id
$route.query.title

命名路由

  1. 作用：可以简化路由的跳转
  2. 给路由命名：
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                    name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
  1. 简化跳转：
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由的params参数

  1. 配置路由，声明接收params参数：
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}
  1. 传递参数：
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"

>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  1. 接收参数：
$route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

路由跳转的replace方法

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
    开启replace模式：<router-link replace …>News

编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活

具体编码：

this.$router.push({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})

this.$router.replace({
	name:'xiangqing',
    params:{
        id:xxx,
        title:xxx
    }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

具体编码：

//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名，不写表示全部缓存
    <router-view></router-view>
</keep-alive>

//缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

activated和deactivated

activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态
具体使用：
activated路由组件被激活时触发
deactivated路由组件失活时触发
在这里插入图片描述

UI组件库

在这里插入图片描述
安装 element-ui：npm i element-ui -S
main.js:

import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:"#app",
    render: h => h(App),
})

安装 babel-plugin-component：npm install babel-plugin-component -D

修改 babel-config-js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
更多推荐

java 入门-使用eclipse、javaFX、SceneBuilder进行图形界面开发

个人是一直在开C#CS端开发，目前公司的软件基本都使用了java作开发。为了更好适应环境，我也只能再次学习这个陌生的开发工具。java的开发界面非常不友好，对于我这样的初学者只能是借助插件来进行界面与后台联动，上网度娘了好多资料，java的开发环境非常不易构建特别是需要辅助界面设计的。谨以我这么多天的摸索经历来作下小记

高通recovery流程分析（编译、界面、图片）

目录recovery界面菜单recovery界面操作recovery启动流程recovery编译makefilerecovery图片大小ramdisk、boot.img、recovery.img之间的关系authordaisy.skye的博客_CSDN博客-嵌入式,Qt,Linux领域博主recovery界面菜单rec

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.2 完成整体布局

本章要实现的整体效果如下：在讲解实际的事件之前，本节先把整体布局搭建好。布局整体包括左侧的导航和右侧的主窗体1.新建工程新建一个窗口类MainWidget，继承自QWidget，并且取消“Generateform”复选框也就是不使用UI设计师界面拖拽控件，而是纯代码来实现界面。最终新建工程如下：此时，直接运行是一个空白

超越创意，从用户创造内容到AI生成内容的新时代

在这个信息爆炸的时代，内容创作正经历前所未有的变革，其频率和多样性令人瞠目结舌。曾经，我们主要依赖传统媒体，需要专业团队为人们打造内容，这被称为专业生成内容（PGC，Professional-generatedContent）。但随着互联网的广泛渗透，用户生成内容（UGC，User-generatedContent）逐

【Python小项目之Tkinter应用】随机点名/抽奖工具大优化：新增查看历史记录窗口！语音播报功能！修复预览文件按钮等之前版本的bug！

文章目录前言一、实现思路二、关键代码查看历史记录按钮语音播报按钮三、完整代码总结前言老生常谈，先看效果：（订阅专栏可获取完整代码）初始状态下，我们为除了【设置】外的按钮添加弹窗，提示用户在使用工具之前要先【设置】。在设置界面，我们主要修改了【预览文件】按钮，从之前的只预览前5条变为预览文件全部内容，但是内容是只读的。同

SCRUM产品负责人（CSPO）认证培训课程

课程简介Scrum是目前运用最为广泛的敏捷开发方法，是一个轻量级的项目管理和产品研发管理框架。产品负责人是Scrum的三个角色之一，产品负责人在Scrum产品开发当中扮演舵手的角色，他决定产品的愿景、路线图以及投资回报，他需要回答为什么做，以及做什么的问题。在两天的ScrumProductOwner认证课程中，我们将和

盘点数字人源头厂商哪家公司OEM定制能力好!

在当今的科技盛世，我们与数字人的互动越来越频繁。无论是在工作中的智能助手，还是数字人播，数字员工，还是在生活中的个性化推荐，数字人都在为我们的生活增添色彩。然而，大家可能并未意识到，这些数字人背后的源头——数字人源头厂家，数字人源头厂商，数字人源头公司，正是在默默推动着人工智能(AI)的发展。数字人技术源头厂商主要负责

六、不root不magisk不xposed lsposed frida原生修改定位

系列文章目录第一章安卓aosp源码编译环境搭建第二章手机硬件参数介绍和校验算法第三章修改安卓aosp代码更改硬件参数第四章编译定制rom并刷机实现硬改(一)第五章编译定制rom并刷机实现硬改(二)第六章不root不magisk不xposedlsposedfrida原生修改定位第七章安卓手机环境检测软件分享第八章硬改之设

论文阅读《2022WWW：Rethinking Graph Convolutional Networks in Knowledge Graph Completion》

论文链接论文工作简介KCN在建模图结构方面很有效。基于GCN的KGC模型通常使用编码器-解码器框架，GCNs和KGE模型分别充当编码器和解码器。许多基于GCN的KGC模型虽然引入了额外的计算复杂度，但未能超越最先进的KGE模型？作者发现GCNs中的图结构并没有对KGC的性能有显著提升，相反实体表示的转换为性能带来提升。

Vue 组件的单元测试

1、基本的示例单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码，使得添加新功能和追踪问题更容易。Vue的单文件组件使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现，并帮助其他开发者理解你的组件的作用。这是一个判断一些文本是否被渲染的简单的示例：<templ

Rxjs操作符理解篇

创建运算符ajaxbindCallback:把回调API转化为返回Observable的函数bindNodeCallback:把Node.js式回调API转换为返回Observable的函数。deferemptyfromfromEventfromEventPatterngenerateintervalofrangeth

热文推荐
  1. vue+springboot，easyexcel的excel文件下载

    文章目录1.效果展示1.1前端界面1.2下载的excel2.思路介绍3.前端代码展示4.后端代码展示5.核心代码解释1.效果展示excel文件单一sheet，多sheet导出本文主要介绍如何使用easyexcel，配合前端导出Excel文件。同时提供Excel的两种导出形式：单一sheet，多sheet。1.1前端界面

  2. 02-HTML常用标签

    02-HTML常用标签2.1标签的构成标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容就是标签名。少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容（比如：<hr>、<b

  3. Git 基本操作【本地仓库与远程仓库的推送、克隆和拉取】

    文章目录一、Git简介二、Git的下载安装三、Git常规命令四、新建本地仓库五、本地分支操作六、Git远程仓库七、远程仓库克隆、抓取和拉取八、总结九、学习交流一、Git简介Git是分布式版本控制系统（DistributedVersionControlSystem，简称DVCS），分为两种类型的仓库：本地仓库和远程仓库工

  4. 51单片机1【单片机到底是什么】

    1.从电路到集成电路1.电路发展变化的趋势（1）功率：电子设备·越来越省电，待机时间越来越长，工作电压越来越低。（2）体积：体积越来越小（3）功能：功能越来越强大2.微器件（1）电路的核心：开关控制，倍率控制（2）电子管，晶体管3.集成电路（IC，芯片）的出现（1）IC（integratedcircuit，集成电路），

  5. [创业之路-76] - 创业公司如何在长期坚持中顺势而为？诚迈科技参观交流有感

    目录一、创业环境1.1.VUCA乌卡时代：易变、复杂、不确定性、模糊的时代1.2.中国用了四十年的时间完成了三次工业革命：机械化、电气化、数字化1.3.中国正在经历着第四次工业革命：智能化、生态化、拟人化1.4国产替代：国产化1.5所有的赛道都挤满了人二、创业公司在长期坚持中顺势而为的路径2.1做自己的熟悉行业：对行业

  6. annyang语音识别与语音合成库

    *text是Annyang.js中的一个通配符，表示匹配任何语音输入中的文本，并将其作为参数传递给命令回调函数。例如，如果用户说“searchforcats”，则可以使用以下命令来捕获输入中的搜索词：constcommands={'searchfor*text':(text)=>{console.log('Search

  7. Selenium和Requests搭配使用

    Selenium和Requests搭配使用前要1.CDP2.通过requests控制浏览器2.1代码一2.2代码23.通过selenium获取cookie,requests携带cookie请求前要之前有提过,用selenium控制本地浏览器,提高拟人化,但是效率比较低,今天说一种selenium和requests搭配使

  8. 人类的生成式与机器的生成式

    生成式是指一种基于模型的方法，通过给定的条件或输入，生成与之相符合的输出。在自然语言处理领域中，生成式模型通常用于生成文本、文章、对话等自然语言序列。生成式模型的训练主要涉及两个步骤：学习和生成。在学习阶段，模型通过对大量的训练数据进行学习和训练，以学习出模式、语法和语义等语言特征。在生成阶段，模型接受一个初始输入，并

  9. 【Redis】Redis的特性和应用场景 · 数据类型 · 持久化 · 数据淘汰 · 事务 · 多机部署

    【Redis】Redis常见面试题（3）文章目录【Redis】Redis常见面试题（3）1.特性&应用场景1.1Redis能实现什么功能1.2Redis支持分布式的原理1.3为什么Redis这么快1.4Redis实现分布式锁1.5Redis作为缓存2.数据类型2.1Redis常用的数据类型有哪些2.2有序列表的底层是如