浏览器路由导航:Push vs Replace
路由2浏览器历史记录有两种方式push:不会删去刚刚的页面,而是添加新的页面记录,像压栈一样去记录replace:直接替换掉刚刚的页面记录。浏览器默认为push操作再router-link中添加一个属性:replace="true"他会将改点击事件记录为replace操作 编程式路由导航即不通过router-link即不适用a标签。而是通过写方法于button绑定之类的方法。关键方法:this.$router.push({})这里通过实现router的push方法跳转页面,也可以使用replace方法进行跳转。同样的push中的对象就是to的对象时写法。有name,path,params,query参数。 两种方法。$router.back()后退页面,¥router.forword()页面前进
Vue路由基础
VueRouter路由vue使用路由先安装vuerouter,同样的,vue2使用vuerouter3,vue3使用vuerouter4。新建一个路由,再src下建一个router文件夹,写一个index.js。 123456789101112131415161718import VurRouter from 'vue-router'//引入组件import About from '../component/About'import Home from '../component/Home'//创建一个路由器export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'/home', component:Hmoe ...
Vuex映射方法的使用
vuex的最终使用方法再标签中添加 1import {mapGetters,mapState,mapActions} from 'vuex' 然后有两种使用方法,下面示例: 1234567computed:{ ...mapGetters{sum:'sum',add:'add'}//对象式//对象式的含义:key:表示会在computed中生成的方法函数。而value:表示从mapGetters中调用的方法 ...mapGetters{['sum','add']}//数组式//数组式的含义即,同时创建再这边的函数并调用mapGetters的方法,这两个方法同名而已。同理mapMutation也是一样的}
Vuex Getters 使用指南
vuex正式使用方法。 getters在store/index.js中添加一个 123456const getters = { bigSum(state){ return state.sum*10 }}然后再export中添加getters 再组件中要调用getters,使用$store.state.getters.内容
Vuex中的关键功能:Actions、Mutations、State
vuex再vuex中,有三个关键的内容和相关的函数方法 actions。再组件中调用actions需要调用this.$store.dispatch(‘方法’,value) 。组件会调用vuex中actions,请求使用方法,并传递value参数给他。而在actions中的方法中,他将会收到两个参数,context上下文,value参数。这个context上下文可以直接调用state,也可以调用commit方法来继续调用mutation。 mutations,他会接受actions发送过来的请求。然后他也会有两个参数,第一个参数就是state,也就是mutations可以用来修改state中的数据(当然,actions中的context也可以直接调用state并进行修改,但我们并不推荐这么做。)。然后可以直接再mutations中修改state的内容。state再组件中调用state的内容时,需要使用this.$store.state.内容...
Vuex 数据管理详解
#vuex这是vuex的工作原理图。 vue2使用vuex3,vue3使用vuex4.vuex其实是存储在store中。也就是actions,mutations,state都是在store中的。主要流程。 安装vuex12//vue2中需要使用vuex3npm i vuex@3 然后再src目录下,新建一个store目录,然后再store目录下新建一个index.js。其中写以下模板内容。1234567891011121314import 'Vue' from 'uue'import 'Vuex' from 'uuex'//再编译Vuex前必须先通过Vue使用Vuex。然后他会自动检测到Vuex的内容。并绑定到Vue的内部。Vue.use(Vuex)const actions = {}const mutations ={}const state = {}const store = new Vuex.Store({ ...
Vue 插槽:具名和作用域
具名插槽就是可以在组件中,可以定义插槽的名字 1<slot name="haha"></slot> 然后可以在调用该组件的父组件中通过<template v-slot="haha">...</template>来插入新的结构标签到组件中。 作用域插槽。他的最大特点是可以从子组件传递数据到父组件。通过:标记,和prop类似,将具体的对象发送到父组件中使用。 12345678910111213141516//子组件<slot name="haha" :games="games" :msg="msg"></slot>//父组件//这里的test是可以任意取名的。他会将子组件传递过来的所有值全部接受,然后你看也获取其中的对象<template v-slot="haha" scope ="test"><ul v-for="(game,index)...
Debian换源至阿里源解决安装报错
关于我配置我家云然后安装debian时,经常安装报错,因此在这里简单介绍一下如何给debian换源,同时推荐使用阿里源,他会比清华源更加稳定好用。 备份配置文件1cp -a /etc/apt/sources.list /etc/apt/sources.list.bak 编辑配置文件1vim /etc/apt/sources.list 具体国内源12345678deb https://mirrors.aliyun.com/debian/ bullseye main non-free contribdeb-src https://mirrors.aliyun.com/debian/ bullseye main non-free contribdeb https://mirrors.aliyun.com/debian-security/ bullseye-security maindeb-src https://mirrors.aliyun.com/debian-security/ bullseye-security maindeb...
SSL证书配置、自动部署和Nginx集成
关于如何配置ssl证书和自动装配,并且部署到nginx的服务器上。 首先在freessl.cn部署一个ssl证书,可以是泛域名的。他只有一个月。搭配上acme就可以永久部署了。 具体步骤如下先获得ssl泛域名证书。 然后安装acme完成自动化部署。 安装使用下面这个命令: 1curl https://get.acme.sh | sh -s email=my@example.com 可以根据上面这个模板进行修改。最后就算部署完成,可以正常浏览你的网站了.安装完成后,就根据freessl给你的命令,直接复制到你的服务器执行,然后就在服务器上安装好自动更新的证书了。但是此时的证书任然没有部署到域名上,仍然需要操作 部署好后,请记住你的证书安装的地址,这个之后部署到nginx上需要使用。 nginx部署ssl证书最好的做法不是直接修改nginx.conf 文件,而是在conf.d...
Kotlin 多平台 Web 应用工具包
ktorktor是由JetBrains构建的多平台工具包,用于在kotlin中创建Web应用程序。Ktor 是一个轻松构建联网应用(web 应用、 HTTP 服务、 移动应用以及浏览器应用)的框架。 现代的联网应用需要异步化来提供最佳的用户体验,而 Kotlin 协程为此提供了极其简便的方式。