gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve accuracy of information and grammar (#27416)

Browse Source
This commit is contained in:
Jack
2019-04-02 06:37:25 +01:00
committed by The Coding Aviator
parent 7a644820d0
commit 2d411d4b3c
1 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
guide/english/vue/components/index.md
View File

@ -4,14 +4,14 @@ title: Components
## Components
A classic problem that web developers face when working is HTML duplication, not
in a simple example such as a list, but sometimes all you want is an "import" to
be able to use the same code in several different places. Well, Vue.js gives you
this feature with Components.
A classic problem that web developers face is having to write loads and loads of HTML, CSS, and JavaScript to make repeated sections of the website work properly. For example, a set of image carousels that are spaced at various points down the page, each with a different number of images to show.
Suppose you're developing a landing page for your company's product and you need
to display the 4 main features of it following the same structure of a card-like
object, with an icon, a title and a short description.
Sometimes all you want is a quick way to be able to use the same code in several different places at once and for everything to just work. Well, Vue.js gives you this ability with Components.
Suppose you're developing a landing page for your company's product and you need to display its 4 main features. The designs show a set of cards following the same structure, with an icon, a title and a short description.
Let's make a component for that:
=======
```javascript
Vue.component('feature-card', {
@ -35,21 +35,21 @@ Vue.component('feature-card', {
});
```
> Note that here we binded the image `src` attribute with another syntax `:src`.
This changes nothing, it is simply a syntax sugar to `v-bind:src` -- whenever
you want to bind some attribute to a variable, you can prepend a `:` to the
> Note that here we bound the image `src` attribute with another syntax `:src`.
This changes nothing, it is simply syntactic sugar (simpler and cleaner syntax) for `v-bind:src` -- whenever
you want to bind a component attribute to a variable, you can prepend a `:` to the
attribute name instead of using the full form `v-bind`.
With this code, we did a lot of new things:
* we created a new component called `feature-card`
* we defined `feature-card` default **structure** with the `template` attribute
* we opened a list of properties that that component accept with the `props`
* we defined the `feature-card` component's default **structure** with the `template` attribute
* we defined a list of properties that the component accepts with the `props`
list
When we defined the name of the components, whenever we desire to reuse it, we
can just reference it by using as a tag. In our example, we can use the tag
`<feature-card>`:
After defining a component, whenever we desire to reuse it on our web page, we
can do so as a kind of 'custom' html element. In our example, we can use the tag
`<feature-card>`, which is the component's name wrapped in < and >:
```html
<div id="app">
@ -62,14 +62,28 @@ can just reference it by using as a tag. In our example, we can use the tag
</div>
```
In this case, we called the `<feature-card>` as it was an existing tag, as well
as we set `iconSrc` or `featureTitle` as they were valid attributes. And the
purpose of Vue.js components is this: increment your toolbox with your own
tools.
In this case, we used the `<feature-card>` element (our new Vue component), as well
as setting `iconSrc` and `featureTitle` as they are valid attributes.
If you're lost, here is what the outputted html from the example above would look like:
```html
<div id="app">
<div class="card">
<div class="icon-wrapper">
<img class="icon" src="https://freedesignfile.com/upload/2017/08/rocket-icon-vector.png" alt="rocket"/>
</div>
<h4 class="title">Processing speed</h4>
<p class="description">Our solution has astonishing benchmarks grades</p>
</div>
</div>
```
The purpose of Vue.js components is this: expand your web page building toolbox with your own shiny new tools
### Props
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:
Props, as mentioned above, 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 the component accepts, using the props option:
```js
Vue.component('feature-card', {
@ -78,7 +92,9 @@ Vue.component('feature-card', {
})
```
A component can have as many props as you’d like and by default, any value can be passed to any prop. In the template above, you’ll see that we can access this value on the component instance, just like with data.
A component can have as many props as you’d like and by default and _any value_ can be passed to _any prop_. In the template above, you’ll see that we can access this value on the component instance, just like with data.
>As mentioned above, because any value can be passed into a prop, it's often a good idea to validate the correct data is being passed in. You can do this in a few different ways, including [Vue's built in Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation "Prop validation on the Vue website")
Once a prop is registered, you can pass data to it as a custom attribute, like this: