老周'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 阅读全文

摘要：条件渲染 v-if v-if用来根据条件渲染块元素。只有v-if结果为真时才会显示该块元素。 <span v-if="awesome">Vue is awesome</span> 同时也可以添加v-else块： <h1 v-if="awesome">Vue is awesome</h1> <h1 v 阅读全文

摘要：还有一个数据绑定就是控制元素的样式表或内联样式。因为它们都是属性，所以我们可以通过v-bind来处理：使用表达运算得到一个最终的字符串。但是字符串拼接是容易混乱和出错的。因为这个原因，Vue在使用v-bind绑定class和style时提供了增强方法。除了字符串，表达式同时也可能运算得到对象和数组。 阅读全文

摘要：计算属性 模板内表达式是非常方便的，但它们是为简单操作设计的。太多的逻辑会造成模板臃肿难以维护。例如，有一个嵌套数组： Vue.createApp({ data() { return { author: { name: '小明', books: [ 'Vue 2 - 高级手册', 'Vue 3 - 阅读全文

摘要：Data属性和方法 Data属性 在组件中Data是一个函数，Vue会在创建组件实例时调用它。Data函数应该返回一个对象，Vue会将这个对象包含进它的响应式系统并用$data存储在应用实例中。为了方便，对象中的任何顶级属性都会通过组件直接暴露出来： const app = Vue.createAp 阅读全文