这篇文章主要介绍“vue3.x项目开发的常用知识点有哪些”,在日常操作中,相信很多人在Vue3.x项目开发的常用知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3.x项目开发的常用知识点有哪些
这篇文章主要介绍“vue3.x项目开发的常用知识点有哪些”,在日常操作中,相信很多人在Vue3.x项目开发的常用知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3.x项目开发的常用知识点有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
PS:以下知识点都是基于 vue3.x + typescript + element-plus + setup语法糖 使用的。
const props = defineProps({ visible: { type: Boolean, default: false }})console.log(props.visible)
[warning] 注意:defineProps 不用从vue引入,setup 语法糖环境会自动识别
在 el-table-column 中使用 formatter 简写
<el-table-column label="时间" prop="createTime" :formatter="(...args: any[]) => formatTime(args[2])" />
子组件:
<script setup lang="ts">const props = defineProps({ visible: { type: Boolean, default: false }})const emit = defineEmits(['closeILdialog']) // 注册触发器,defineEmits不用从vue引入,setup语法糖环境会自动识别function onDialoGClose() { emit('closeILdialog') // 触发}</script><template><el-dialog v-model="visible" width="900px" @close="onDialogClose" title="日志" :close-on-click-modal="false" > </el-dialog></template>
父组件:
<script setup lang="ts">let ILdialog = Reactive({ visible: false})function closeILdialog() { ILdialog.visible = false}</script><template><instruct-log :visible="ILdialog.visible" @closeILdialog="closeILdialog"></instruct-log></template>
const props = defineProps({ visible: { type: Boolean, default: false }})// 监听visiblewatch(() => props.visible, (newV) => { if(newV) { // ... }})
局部指令:
<script setup lang="ts">const vFoo = { mounted(el: any, binding: any) { console.log(binding.value) // 123 }}</script><template><div v-foo="123" v-auth="true"></div></template>
[warning] 注意:局部指令定义需要 v 开头,如:vFoo,这样才能识别到 v-foo 指令
全局指令:
const app = createApp(App)// 权限指令app.directive('auth', { mounted(el: any, binding: any) { if(!binding.value) { el.parentnode.removeChild(el) } }})
到此,关于“Vue3.x项目开发的常用知识点有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
--结束END--
本文标题: Vue3.x项目开发的常用知识点有哪些
本文链接: https://www.lsjlt.com/news/329693.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0