随笔分类 -  vue3组合式

指令——v-text ,v-html, v-show ,v-if v-else v-else-if ,v-for ,v-on ,v-bind ,v-model, v-slot ,v-pre ,v-once, v-memo ,v-cloak
摘要:###指令综述 |指令|作用| | | | |v-text|通过设置元素的textContent属性来工作,因此它将覆盖元素内的任何现有内容。如果你需要更新| |v-html|作为纯html插入,不会处理Vue模板语法。(谨慎使用)可尝试改用组件来重新考虑解决方案,在网站上动态呈现任意html可能非 阅读全文

posted @ 2022-03-08 20:08 In-6026 阅读(91) 评论(0) 推荐(0)

事件——内置指令
摘要:指令 作用 v-focus 聚焦 <input v-focus /> 阅读全文

posted @ 2022-03-08 16:24 In-6026 阅读(35) 评论(0) 推荐(0)

事件——事件修饰符.stop,.prevent,.self,.capture,.once,.passive
摘要:修饰符 作用 .stop e.stopPropagation() .prevent e.preventDefault .self 在F节点的任意事件上加该后缀,则F的所有子节点 (是子,"孙"可不归我管) 相当于都加上了.stop,不要再手动加(感觉是个比.stop更厉害的) .capture 顾名 阅读全文

posted @ 2022-03-08 15:34 In-6026 阅读(136) 评论(0) 推荐(0)

路由——获取$route,$router的三种方式
摘要:摘抄自:https://www.cnblogs.com/mica/p/14756503.html ##方法一:在当前.vue中引入vue-router的useRoute, useRouter <script setup> import { useRoute, useRouter } from 'vu 阅读全文

posted @ 2022-03-07 23:48 In-6026 阅读(1848) 评论(0) 推荐(0)

改变——this,data,computed,components,周期函数,$refs,props,provide/inject,$watch,$wathcEffect,$nextTick
摘要:##在setup里,this不能再用了 为什么不能使用this?官方是这样说的: 在 setup() 内部,this 不会是该活跃实例的引用,因为 setup() 是在解析其它组件选项之前被调用的, 所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式  阅读全文

posted @ 2022-03-07 12:26 In-6026 阅读(99) 评论(0) 推荐(0)

内置组件——teleport,Transition,KeepAlive
摘要:##teleport——把组件移动到指定容器中去 除了移到body上还可以移到任意节点上,比如id="app"节点上就 <teleport to="#app"> ... </teleport> |关键属性|作用| | | | |to|String,要移到哪个节点; body, #xxid, .xxc 阅读全文

posted @ 2022-03-04 00:36 In-6026 阅读(109) 评论(0) 推荐(0)

把公共的属性/方法提取出来,减少代码重复——mixins
摘要:可以全局配置,也可以单个引入 如果属性/方法有重复,后来的mixin会覆盖前面的,当前组件中的会覆盖mixin里的 ###单个引入 抽离出公共的属性/方法,保存在一个js中 base.js: export default { data() { return { firstName: '李' } }, 阅读全文

posted @ 2022-03-03 23:47 In-6026 阅读(107) 评论(0) 推荐(0)

全局变量——config.globalProperties
摘要:import { createApp } from 'vue' import App from './App.vue' //对于axios,和自己定义的工具不能像vue-router一样用app.use(),而要通过app.config.globalProperties = moduleName, 阅读全文

posted @ 2022-03-02 23:21 In-6026 阅读(208) 评论(0) 推荐(0)

非Prop的attribute继承(指定属性的继承者)——$attrs
摘要:<Son data-time="2022-11-11" /> Son.vue <p> <span> <div> 当子组件都包含再一个容器里的时候,data-time自定义属性就会被加在该容器(即根节点)上,但是如上所示,多标签时就要指定加在哪个上 <p> <span v-bind=$attrs> / 阅读全文

posted @ 2022-03-01 01:13 In-6026 阅读(25) 评论(0) 推荐(0)

自定义指令/事件
摘要:##指令 https://v3.cn.vuejs.org/guide/custom-directive.html#%E7%AE%80%E4%BB%8B 自定义focus,自定义的前面要加个v- <input v-focus /> //让输入框聚焦 全局: app.directive("focus", 阅读全文

posted @ 2022-02-28 22:42 In-6026 阅读(49) 评论(0) 推荐(0)

组件通信——props,emit
摘要:##父子组件通信 ###父亲用子组件属性/方法 html: <Son ref="sonHandler" /> 重点是通过ref获取 script: this.$refs.sonHandler.name //此处name用属性名或方法名都可以调用子组件Son的data/methods/computed 阅读全文

posted @ 2022-02-28 20:20 In-6026 阅读(70) 评论(0) 推荐(0)

导航