chencaw的专栏

vue3使用keeplive实现多页面缓存

1、单个变量watch，新旧变量依次的顺序import { reactive, ref, watch} from "vue";..................export default { name: 'xxxxx', setup() { watch( () => arrangeorder.data.devid, (newvalue,oldvalue) => { console.log("watchsssssss");

indexof为空（null或者undified）的时候判断应该有问题（1）return myBtns.includes(permission) （2）if(permission){ return myBtns.indexOf(permission) > -1}else{ return false }

直接定义变量不能使用注意“飘”字符和变量{}的组合用法 //注意路径懒加载的方法 component:() => import(`@/views${child.component}.vue`),

问题：router.addRoute后用router.options.routes去都不更新参考Vue的router.addRoutes()不起作用解决方案 - 认真，是一种态度 - 博客园我的暂时解决import Layout from '@/layout/index.vue'import { useRouter} from "vue-router";export default { components: { SidebarItem, }, setup() {

参照官网后发现正确方法部署 | Vue CLI比如，我要把打包好的项目放在XXXXX.cn/chen/vue3下面（1）需要在vue.config.js的文件中做如下设置 module.exports = { //用于打包后修改路径，陈，最后上传时使用的设置，20211116 //参照了官网用法https://cli.vuejs.org/zh/guide/deployment.html#github-pages publicPath: process.env.NODE_ENV.

转载于Vue3 watch 侦听 props 的变化 - 尹宇星_Kim - 博客园watch有两种写法// 侦听一个 getterconst state = reactive({ count: 0 })watch( () => state.count, (count, prevCount) => { /* ... */ })// 直接侦听一个 refconst count = ref(0)watch(count, (count, prevCo..

可以在chrome中选择网络模拟速度1、测试1、模拟延迟测试（1）主程序<template> <h2>App父级组件：Suspense组件的使用</h2> <Suspense> <template #default> <!-- 异步组件 --> <async-component /> </template> &lt...

1、provide 父传孙，跨阶层传 //父传孙，跨阶层传 provide('color',color)2、inject，接收const color = inject('color')3、代码结构（1）父代码<template> <h2>provide 与 inject</h2> <p>当前的颜色：{{color}}</p> <button @click="c...

//例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点）1、代码<template> <h2>ref的另一个作用：可以获取页面中的元素</h2> <input type="text" ref="inputRef" /></template><script lang="ts">import { defineComponent, onMounted, ref} from 'vue'expo..

//toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref1、正常使用ref和定时器<template> <h2>toRefs的使用</h2> <h3>name:{{state.name}}</h3> <h3>age:{{state.age}}</h3></template><script lang="ts">import { def

（1）如果axios没有安装npm install axios

1、父组件<template> <h2>APP父级组件</h2> <button @click="isShow=!isShow">切换显示</button> <hr/> <Child v-if="isShow"/></template><script lang="ts">import Child from './components/Child.vue'i

<template> <h2>计算属性和监视</h2> <fieldset> <legend>姓名操作</legend> <!-- 姓氏：<input type="text" placeholder="请输入姓氏" :model="user.firstName"/><br/> --> 姓氏：<input type="text" placeholder=".

1、父组件<template> <h2>APP父级组件</h2> <h3>msg:{{msg}}</h3> <!-- <button @click="msg += '==='">更新数据</button> --> <button @click="sendmsg">更新数据</button> <hr/> <child :msg="msg" @c

1、父组件<template> <h2>APP父级组件</h2> <h3>msg:{{msg}}</h3> <!-- <button @click="msg += '==='">更新数据</button> --> <button @click="sendmsg">更新数据</button> <hr/> <child :msg="msg"/