The button above has been clicked {{ counter }} times.
-Message is: {{ message }}
-{{ message }}
-+ See the Pen + Component basics by Vue (@Vue) + on CodePen. +
+ Since components are reusable Vue instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`. @@ -49,7 +55,12 @@ Components can be reused as many times as you want: ``` -+ See the Pen + Component basics: reusing components by Vue (@Vue) + on CodePen. +
+ Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created. @@ -73,7 +84,7 @@ app.component('my-component-name', { Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that Vue instance's component tree. -That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](TODO:components-registration.html). +That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](component-registration.md). ## Passing Data to Child Components with Props @@ -82,12 +93,14 @@ Earlier, we mentioned creating a component for blog posts. The problem is, that Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a `props` option: ```js -const app = Vue.createApp() +const app = Vue.createApp({}) app.component('blog-post', { props: ['title'], template: `+ See the Pen + Component basics: passing props by Vue (@Vue) + on CodePen. +
+ In a typical app, however, you'll likely have an array of posts in `data`: @@ -141,7 +161,7 @@ Then want to render a component for each one: Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time. -That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](TODO:components-props.html). +That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](component-props.html). ## Listening to Child Components Events @@ -166,7 +186,7 @@ Which can be used in the template to control the font size of all blog posts: ```html+ See the Pen + Component basics: emitting events by Vue (@Vue) + on CodePen. +
+ ### Emitting a Value With an Event @@ -305,7 +330,7 @@ Now `v-model` should work perfectly with this component:+ See the Pen + Component basics: slots by Vue (@Vue) + on CodePen. +
+ Fortunately, this task is made very simple by Vue's custom `+ See the Pen + Component basics: dynamic components by Vue (@Vue) + on CodePen. +
+ The above is made possible by Vue's `+ See the Pen + Event handling: with a method by Vue (@Vue) + on CodePen. +
+ ## Methods in Inline Handlers Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement: ```html -+ See the Pen + Event handling: with an inline handler by Vue (@Vue) + on CodePen. +
+ Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable: @@ -156,7 +171,7 @@ Order matters when using modifiers because the relevant code is generated in the ``` -Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](TODO:components-custom-events.html). If you haven't read about components yet, don't worry about this for now. +Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](component-custom-events.html). If you haven't read about components yet, don't worry about this for now. Vue also offers the `.passive` modifier, corresponding to [`addEventListener`'s `passive` option](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters). diff --git a/src/guide/forms.md b/src/guide/forms.md index 0bbbef6191..76e2e9a7da 100644 --- a/src/guide/forms.md +++ b/src/guide/forms.md @@ -26,7 +26,12 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)Message is: {{ message }}
``` -+ See the Pen + Handling forms: basic v-model by Vue (@Vue) + on CodePen. +
+ ### Multiline text @@ -37,7 +42,12 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) ``` -+ See the Pen + Handling forms: textarea by Vue (@Vue) + on CodePen. +
+ Interpolation on textareas won't work. Use `v-model` instead. @@ -58,12 +68,17 @@ Single checkbox, boolean value: ``` -+ See the Pen + Handling forms: checkbox by Vue (@Vue) + on CodePen. +
+ Multiple checkboxes, bound to the same Array: ```html -+ See the Pen + Handling forms: multiple checkboxes by Vue (@Vue) + on CodePen. +
+ ### Radio ```html -