老周's 布落格

摘要： 插槽 本章节需要掌握组件基础 插槽内容 Vue实现一套优秀的内容分发接口，基于WEB组件草案，使用<slot>标签提供内容分发服务。 这允许你像这样构成一个组件： <todo-button> Add todo </todo-button> todo-button模板应该这样写： <!-- todo- 阅读全文

摘要： 错误 众所周知vue3支持多个根节点，但在vscode中eslint检查会针对多根节点报错。虽然不影响使用，但看着很不舒服： The template root requires exactly one element. fix方法 项目根目录下.vscode目录，有一个settings.json的 阅读全文

摘要： 本章节需要掌握组件基础 emit我译成发射，觉得发射这个词比较形象的形容将子组件事件发射出来的一个动作。 事件名 像组件和props，事件名也会进行自动转换，如果你在子组件里发射一个驼峰命名的事件，你就可以在父组件中添加一个短横线分隔的监听： this.$emit('myEvent') <my-co 阅读全文

摘要： 本章节需要要有组件基础 组件的非prop属性是一个属性或事件传递给组件，但不需要在props或emits中进行定义。通常使用的属性包括class,style和id属性。你可以通过$attrs来访问它们。 属性继承 如果组件只有一个根节点，非prop属性自动添加到根节点上。例如date-picker组 阅读全文

摘要： [info]学习本节，你应该已了解过组件基础 prop类型 前面我们讨论过，props可以是一个字符列表的数组。 props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是有时候，我们需要传递一些特别的类型数据。这种情况下， 阅读全文

摘要： [info]这个章节认为你已经掌握组件基础。如果你对组件还不熟悉，请先学习。 组件名称 组件注册时需要指定一个名称。例如全局注册时： const app = Vue.createApp({...}) app.component('my-component-name', { /* ... */ }) 阅读全文

摘要： 基础示例 一个Vue组件示例： // 创建一个Vue应用 const app = Vue.createApp({}) // 定义一个叫`button-counter`的全局组件 app.component('button-counter', { data() { return { count: 0 阅读全文

摘要： 基础用法 你可以通过v-model指令创建与文本框、多行文本框以及选择框等表单输入组件的双向绑定，它会自动根据输入组件不同使用正确的绑定方式。虽然有点神奇的，但v-model本质上是用户输入控件更新数据的语法糖，对一些边界情况进行处理。 [warning]提示 v-model会忽略表单单控件初始化的 阅读全文

摘要： 事件处理 事件监听 当DOM事件被触发时，我们使用v-on（缩写@符号）来监听事件，运行JavaScript。使用方法为v-on:click="method"或缩写为@click="method"。 例如： <div id="basic-event"> <button @click="counter 阅读全文

摘要： 使用v-for将数组映射成元素列表 可以使用v-for指令将数组渲染成一个列表。v-for指令在使用特殊语法item in items，items指向数组源，item是迭代 items的每项的别名： <ul id="array-rendering"> <li v-for="item in items 阅读全文