qq_43806488的博客

【代码】vue3.2 中利用自定义指令和 函数调用式创建一个loading组件。

之前在3.2中添加name 属性 需要新增加一个。然后在vite.config.js 中修改。

之前在vue2.6的时候使用作用域插槽可以通过slot-scope来获取作用域插槽的值在vue3.2 获取作用域插槽的值方式更改定义插槽 <slot name="content" :column="column" :text="text" :record="record"></slot>使用插槽 <template #content="{ column, text, record }"> </template>...

认识pinia介绍pinia介绍piniapinia是新一代的vue状态管理工具，具有如下特点完整的 ts 的支持；足够轻量，压缩后的体积只有1kb左右;去除 mutations，只有 state，getters，actions；actions 支持同步和异步；代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的无需手动添加 store，store 一旦创建便会自动添加；支持Vue3 和 Vue2安装piniayarn add

jsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"]}

使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。父组件<template> <div id="app"> <h1>父组件</h1> <p>{{ money }}</p> <Son :money="money" @changeMoney="changeMoney"></Son> </div></template>&lt

父传子<template> <div id="app"> <h1>父组件</h1> <p>{{ money }}</p> <Son :money="money"></Son> </div></template><script>import { ref } from "@vue/reactivity";import Son from "

computed函数，是用来定义计算属性的，计算属性不能修改。<template> <div id="app"> <div>小李今年:{{ age }}岁</div> <br /> <div>小李明年:{{ newAge }}岁</div> </div></template><script>import { computed, ref } from

ref 常用于简单数据类型定义为响应式数据再修改值，获取值的时候，需要.value在模板中使用ref申明的响应式数据，可以省略.value<template> <div id="app"> 姓名: {{ name }} <br /> 年龄: {{ age }} <br /> <button @click="editUser">更新人员</button> </div>

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。演示代码<template> <div id="app"> 姓名: {{ user.name }} <br /> 年龄: {{ user.age }} <br /> <button @click="editUser">更新人员</button> </div></template>&lt

回顾vue2.0生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedvue3.0生命周期setup 创建实例前onBeforeMount 挂载DOM前onMounted 挂载DOM后onBeforeUpdate 更新组件前onUpdated 更新组件后onBeforeUnmount 卸载销毁前onUnmounted 卸载销毁后验证代码<temp

setup()函数使用细节setup 是一个新的组件选项，作为组件中使用组合API的起点。从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined在模版中需要使用的数据和函数，需要在 setup 返回。验证代码<template> <div id="app"></div></template><scrip