Vue 3.2
Vue 3.2相关
惘远
这个作者很懒,什么都没留下…
展开
-
【笔记】pinia的简单应用
pinia的简单应用原创 2022-08-17 09:51:02 · 223 阅读 · 1 评论 -
【笔记】vue3.2 给循环的元素加ref
其实这个题目在vue的文档中已经了讲过了。想看官方文档的请点击:官方解决方案本文主要内容是结合element-plus中的el-table,给el-table-column中的元素设置ref,上例子。<script setup>import { ref, nextTick, onMounted } from 'vue'const columnRefs = []const setColumnRefs = (el) => { if (el) { columnRef.原创 2022-01-13 19:12:36 · 3231 阅读 · 0 评论 -
【笔记】vue3.2 如何在<script setup>注册一个局部自定义指令
在vue3.x中,注册局部自定义的指令是在setup方法外面,directives下面便可自定义指令,那在vue3.2中的<script setup>标签该如何自定义指令呢?其实,在vue3.2中,自定义指令变得更加的简单,直接上例子。<script setup>// 注册一个局部的自定义指令,需要以小写v开头const vFocus = { mounted(el) { // 获取input,并调用其focus()方法 el.querySelector.原创 2021-12-31 17:19:09 · 3191 阅读 · 2 评论 -
【笔记】vue3.2 父组件如何调用子组件中的方法
父组件调用子组件中的方法,这是个看似不常见,但是大家都会遇到的问题。在vue2.x中可以用this.$refs、在vue3.x中也可以给子组件一个ref,然后直接.value来操作它,但是到了vue3.2中,似乎是不行了,那是因为你忽略了一个新的语法糖defineExpose。在vue3.2中,由于使用了<script setup>,在这个标签中的变量或是方法需要你主动去暴露,不然在组件外部是无法直接获取到的。废话不多说,直接上例子。<!-- 子组件 child.vue -->.原创 2021-12-26 11:28:58 · 6522 阅读 · 6 评论 -
【笔记】vue3.2 生命周期钩子的使用
在vue3.2的文档中,似乎没有对生命周期钩子使用的特别介绍,其实,我们本着没有特别介绍就跟以前一样的态度,在vue3.x中怎么用,在vue3.2中一样是那么用。那就上例子?<script setup>import { onMounted, onUnmounted } from 'vue'onMounted(() => { // do something})onUnmounted(() => { // do something})</script.原创 2021-12-26 11:14:44 · 1285 阅读 · 0 评论 -
【笔记】vue3.2 组件中引入其他组件
在vue3.2中,组件中定义的变量和方法不再需要return了,而是可以直接在模板中使用。<script setup>import { ref } from 'vue'const text = ref('点击')const handleClick = () => { console.log('click')}</script><template> <button @click="handleClick">{{ text }.原创 2021-12-26 11:09:53 · 11617 阅读 · 0 评论 -
【笔记】vue3.2 组件自定义事件
在vue3.x中,组件自定义时间是通过上下文context来调取得,而这个context也是在setup(props, context)中,那vue3.2在把setup写到<script>标签后,该如何使用呢?在vue3.2中,提供了defineEmits语法糖,可以用来定义事件的名字,废话不多说,上例子。<!-- 子组件 child.vue --><script setup>const emit = defineEmits(['custom-event']).原创 2021-12-26 10:57:57 · 1640 阅读 · 0 评论 -
【笔记】vue3.2 props在组件中的应用
在vue3.x中,props是在setup外定义,以setup(props)的形式应用的,那么在vue3.2中该如何使用props呢?在vue3.2中,提供了一个defineProps语法糖用于定义props,先上例子。<script setup>import { onMounted } from 'vue'const props = defineProps({ customStr: { type: String, default: '' }, custo.原创 2021-12-26 10:45:12 · 3304 阅读 · 2 评论 -
【笔记】初识vue3.2
相信大家都看过尤大发的<script setup> + TS + Volar = 真香,那么<script setup>是什么呢,那就不得不说vue3.2版本提供的新特性了。说实话,当知道vue有新特性的时候,我的内心是崩溃的,我想学无止境不应该只是用在工作吧,带着无奈但是又想探索的心情,我开始了vue3.2的学习之旅。真香。看过vue3.2的文档,最直观的感觉就是<script>标签上可以加上setup了,看过vue3.x文档的朋友们应该知道,vue3.x.原创 2021-12-26 10:07:10 · 755 阅读 · 0 评论