随笔分类 - https://cn.vuejs.org/
摘要：如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项。 在模块系统中局部注册 如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 compone
阅读全文
摘要：全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组
阅读全文
摘要：到目前为止，我们只用过 Vue.component 来创建组件： Vue.component('my-component-name', { // ... 选项 ... }) 这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如： Vue
阅读全文
摘要：在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： Vue.component('my-component-name', { /* ... */ }) Vue.component('hzh-component-name', {}); Vue.component('h
阅读全文
摘要：基本示例 组件的复用 组件的组织 通过 Prop 向子组件传递数据 单个根元素 监听子组件事件 通过插槽分发内容 动态组件 解析 DOM 模板时的注意事项
阅读全文
摘要：有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。 这会导致我们使用这些有约束条件的元素时遇到一些问题。例如： <table>
阅读全文
摘要：有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里： 上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现： <!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bi
阅读全文
摘要：和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样： <alert-box> Something bad happened. </alert-box> 可能会渲染出这样的东西： 幸好，Vue 自定义的 <slot> 元素让这变得非常简单： Vue.component('alert-box
阅读全文
摘要：在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。 在其父组件中，我们可以通过添加一个 postFontSize 数据 property 来支持这个功能： new Vue({ e
阅读全文
摘要：当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题： <h3>{{ title }}</h3> 最最起码，你会包含这篇博文的正文： <h3>{{ title }}</h3> <div v-html="content"></div> 然而如果你在模板中尝试这样写，Vue
阅读全文
摘要：早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。 Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就
阅读全文
摘要：通常一个应用会以一棵嵌套的组件树的形式来组织： 例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过Vue.compone
阅读全文
摘要：你可以将组件进行任意次数的复用： <div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </di
阅读全文
摘要：这里有一个 Vue 组件的示例： // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:cl
阅读全文
摘要：基础用法 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
阅读全文
摘要：监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 示例： <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has b
阅读全文
摘要：用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> <li v-fo
阅读全文
摘要：v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> <!DOCTYPE html> <html lang="zh"> <head> <meta charset
阅读全文
