学习-模板引用-$refs
摘要：尽管存在 prop 和事件，你可能仍然需要在 JavaScript 中直接访问子组件。 注意点：$refs 只会在组件渲染完成之后生效。这仅作为一个用于直接操作子元素的“逃生舱”--应该避免在模板或计算属性中访问 $refs。
阅读全文
posted @
2022-07-04 17:02
法老的微笑
阅读(24)
推荐(0) 编辑
学习-vue3 自定义事件-定义自定义事件-验证抛出的事件
摘要：验证抛出的事件 与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以对它进行验证。 要添加验证，轻微事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。 app.component('custom-form', { emits:
阅读全文
posted @
2022-06-26 16:08
法老的微笑
阅读(409)
推荐(0) 编辑
学习-vue3 非 prop 的 Attribute-多个根节点上的 Attribute 继承
摘要：多个根节点上的 Attribute 继承 与单个根节点组件不同，具有多个根节点的组件不具有自动 attribute fallthrough（隐式贯穿）行为，如果未显式绑定 $attrs，将发出运行时警告。 <custom-layout id="custom-layout" @click="chang
阅读全文
posted @
2022-06-26 15:53
法老的微笑
阅读(138)
推荐(0) 编辑
学习-vue3 非 prop 的 Attribute-禁用Attribute 继承
摘要：禁用 Attribute 继承 如果不希望组件的根元素继承 attribute ，可在组件的选项中设置 inheritAttrs: false。 使用场景： 禁用 attribute 继承需要将 attribute 应用于根节点之外的其他元素。 通过将 inheritAttrs 选项设置为 fals
阅读全文
posted @
2022-06-26 15:43
法老的微笑
阅读(342)
推荐(0) 编辑
学习-vue3 props 传入一个对象的所有 property
摘要：传入一个对象的所有 property 如果想要将一个对象的与 property 都作为 prop 传入，可以使用不带参数的 v-bind 。 eg: post: { id: 1, title: "hello" } <!-- 模板 --> <blog-post v-bind="post"></blog
阅读全文
posted @
2022-06-25 19:56
法老的微笑
阅读(902)
推荐(0) 编辑
学习-vue3 解析 DOM 模板时大小写不敏感
摘要：大小写不敏感 HTML attribute 名不区分大小写，浏览器将所有大写字符解释为小写。当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的kebab-cased（横线字符分隔）等效值： // js 中是驼峰式 app.component('blog-pos
阅读全文
posted @
2022-06-25 15:24
法老的微笑
阅读(252)
推荐(0) 编辑
学习-vue3 解析 DOM 模板时元素位置受限
摘要：元素位置受限 <ul> <li>></li> </ul> <table> <tr></tr> </table> <select> <option></option> </select> 有些 HTML 元素，诸如 <ul>、<table> 和 <select>，对于可以出现在其内部的元素是有严格限制
阅读全文
posted @
2022-06-25 15:11
法老的微笑
阅读(152)
推荐(0) 编辑
学习-vue3 组件上使用 v-model
摘要：<template> <div> v-model测试父组件 <!-- <test-model :model-value="txt" @update:model-value="txt=$event"></test-model> --> <test-model v-model="txt"></test-
阅读全文
posted @
2022-06-24 11:07
法老的微笑
阅读(230)
推荐(0) 编辑
学习- vue3 vi-if 和 v-for 优先级问题
摘要：v-if 与 v-for 一起使用处于同一节点时， v-if 比 v-for 优先级更高，这意味着 v-if 没有权限访问 v-for 中的变量。
阅读全文
posted @
2022-06-24 08:33
法老的微笑
阅读(324)
推荐(0) 编辑
学习- vue3 Class 与 Style 绑定-数组语法
摘要：我们可以把一个数组传给 :class，以应用一个class列表 <template> <div :class="[actiiveClass, errorClass]"></div> </template> <script> export default { data () { return { ac
阅读全文
posted @
2022-06-23 12:47
法老的微笑
阅读(154)
推荐(0) 编辑
学习-vue3 指令插值
摘要：<template> <div> <p>插值:{{ rawHtml }}</p> <!-- 指令v-html --> <p>指令v-html: <i v-html="rawHtml"></i> </p> </div> </template> <script setup> import { ref }
阅读全文
posted @
2022-06-23 12:11
法老的微笑
阅读(19)
推荐(0) 编辑
学习-vue3 OPtions API 和 Composition API
摘要：Options API: <template> <div class="home"> vue3知识点练习...... <div> <button @click="increment">count 是: {{ count }}</button> </div> </div> </template> <s
阅读全文
posted @
2022-06-23 09:04
法老的微笑
阅读(172)
推荐(0) 编辑
学习-vue3 生命周期钩子
摘要：beforeCreate 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。（没用过） created 钩子在实例创建完成后立即同步调用。在这一步中，实例已经完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且$el
阅读全文
posted @
2022-06-23 09:00
法老的微笑
阅读(417)
推荐(0) 编辑
