上一页 1 ··· 8 9 10 11 12 13 14 15 16 ··· 24 下一页

2025年2月9日

hook:toBase64

摘要: <template> <img src="/src/assets/img/demo.png" alt="" width="500" height="600" id="image"> </template> <script setup lang='ts'> import usebase64 from 阅读全文

posted @ 2025-02-09 02:02 ChoZ 阅读(21) 评论(0) 推荐(0)

手写v-lazy指令

摘要: <template> <div v-for="item in arr" :key="item"> <img v-lazy="item" alt="" width="400" height="800"> </div> </template> <script setup lang='ts'> impor 阅读全文

posted @ 2025-02-09 01:09 ChoZ 阅读(45) 评论(0) 推荐(0)

2025年2月8日

简写directive,鉴权指令

摘要: <template> <button v-has-show="'add'">创建</button> <button v-has-show="'delete'">删除</button> </template> <script setup lang='ts'> import type { Directi 阅读全文

posted @ 2025-02-08 17:05 ChoZ 阅读(10) 评论(0) 推荐(0)

directive的生命周期和简单使用

摘要: <template> <lifeComponent v-demo="{color: 'red'}"></lifeComponent> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' import typ 阅读全文

posted @ 2025-02-08 16:10 ChoZ 阅读(26) 评论(0) 推荐(0)

v-model深度使用,双向数据流

摘要: <template> <button @click="flag = !flag">改变model值</button> <div>{{ flag }}</div> <div>{{ text }}</div> // 可以定义多个v-model,语法是v-model:自定义变量 // 可以自定义修饰符 < 阅读全文

posted @ 2025-02-08 15:25 ChoZ 阅读(23) 评论(0) 推荐(0)

autoImport 插件

摘要: 1.功能介绍,自动帮你引入所需要使用的工具 2.安装npm i unplugin-auto-import -D 3.config文件配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import v 阅读全文

posted @ 2025-02-08 14:09 ChoZ 阅读(166) 评论(0) 推荐(0)

tsx

摘要: <template> <Tsx name="jsx传值" @toEmit="getEmitValue"></Tsx> {{ msg }} </template> <script setup lang='ts'> import Tsx from './index.tsx' import { ref } 阅读全文

posted @ 2025-02-08 01:31 ChoZ 阅读(13) 评论(0) 推荐(0)

2025年2月7日

mitt

摘要: <template> <A></A> <B></B> </template> <script setup lang='ts'> import A from './A.vue' import B from './B.vue' // 兄弟组件之间的通信在Vue3中没有bus,通过插件mitt来完成兄弟之 阅读全文

posted @ 2025-02-07 23:08 ChoZ 阅读(11) 评论(0) 推荐(0)

provide/inject

摘要: <template> <div>爷爷{{ msg }}</div> <father /> <son /> </template> <script setup lang='ts'> import { ref, provide, readonly } from 'vue' import father f 阅读全文

posted @ 2025-02-07 18:02 ChoZ 阅读(9) 评论(0) 推荐(0)

2025年2月5日

transtition 数字动态效果

摘要: <template> <div> <input v-model="num.current" type="number" step="20"/> <div>{{ num.tweenedNumber }}</div> </div> </template> <script setup lang='ts'> 阅读全文

posted @ 2025-02-05 21:37 ChoZ 阅读(12) 评论(0) 推荐(0)

上一页 1 ··· 8 9 10 11 12 13 14 15 16 ··· 24 下一页

导航