黄子涵 - 博客园

2022年6月4日

摘要：和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样： <alert-box> Something bad happened. </alert-box> 可能会渲染出这样的东西：幸好，Vue 自定义的 <slot> 元素让这变得非常简单： Vue.component('alert-box 阅读全文

posted @ 2022-06-04 11:54 黄子涵阅读(15) 评论(0) 推荐(0) 编辑

监听子组件事件

摘要：在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能： new Vue({ e 阅读全文

posted @ 2022-06-04 11:37 黄子涵阅读(123) 评论(0) 推荐(0) 编辑

2022年6月3日

单个根元素

摘要：当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题： <h3>{{ title }}</h3> 最最起码，你会包含这篇博文的正文： <h3>{{ title }}</h3> <div v-html="content"></div> 然而如果你在模板中尝试这样写，Vue 阅读全文

posted @ 2022-06-03 22:30 黄子涵阅读(32) 评论(0) 推荐(0) 编辑

通过 Prop 向子组件传递数据

摘要：早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。 Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就阅读全文

posted @ 2022-06-03 21:54 黄子涵阅读(126) 评论(0) 推荐(0) 编辑

组件的组织

摘要：通常一个应用会以一棵嵌套的组件树的形式来组织：例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过Vue.compone 阅读全文

posted @ 2022-06-03 21:36 黄子涵阅读(20) 评论(0) 推荐(0) 编辑

组件的复用

摘要：你可以将组件进行任意次数的复用： <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </di 阅读全文

posted @ 2022-06-03 21:30 黄子涵阅读(87) 评论(0) 推荐(0) 编辑

基本示例

摘要：这里有一个 Vue 组件的示例： // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:cl 阅读全文

posted @ 2022-06-03 21:27 黄子涵阅读(24) 评论(0) 推荐(0) 编辑

2022年5月31日

表单输入绑定

摘要：基础用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理阅读全文

posted @ 2022-05-31 17:38 黄子涵阅读(26) 评论(0) 推荐(0) 编辑

事件处理

摘要：监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例： <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has b 阅读全文

posted @ 2022-05-31 14:17 黄子涵阅读(76) 评论(0) 推荐(0) 编辑

6.5　函数是一种对象

摘要：函数也是一种对象。从内部结构来看，它继承于 Function 对象。可以像下面这样通过 constructor 属性验证。 function hzh() {} // 函数的内容无关紧要，因此留空 console.log("使用constructor属性验证函数hzh："); console.log( 阅读全文

posted @ 2022-05-31 12:10 黄子涵阅读(191) 评论(0) 推荐(0) 编辑

公告