Component Basics
1 Component reuse
Components are reusable Vue instances.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
// Define a new component named button-counter ('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Clicked {{ count }} Second-rate.</button>'
});
new Vue({ el: '#app' });
</script>
</body>
</html>
Note that when a button is clicked, each component will independently maintain its count. Here the data attribute of the custom component must be a function, and each instance maintains an independent copy of the returned object.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
var buttonCounterData = {
count: 0
}
// Define a new component named button-counter ('button-counter', {
data: function () {
return buttonCounterData
},
template: '<button v-on:click="count++">Clicked {{ count }} Second-rate.</button>'
});
new Vue({ el: '#app' });
</script>
</body>
</html>
2 Pass data to child components through Prop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
<script>
('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({ el: '#app' });
</script>
</body>
</html>
here<blog-post>Components are customized by custom propertiestitleto pass data.
We can usev-bindTo dynamically pass props.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<blog-post v-for="post in posts" v-bind:key="" v-bind:title=""></blog-post>
</div>
<script>
('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
});
</script>
</body>
</html>
3 single root element
Each component must have only one root element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<blog-post v-for="post in posts" v-bind:key="" v-bind:post="post"></blog-post>
</div>
<script>
('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ }}</h3>
<div v-html=""></div>
</div>
`
})
new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
Note that the post bound to v-bind:post="post" is an object, which can avoid the hassle of passing data through many props.
4 Listen to subcomponent events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div :style="{fontSize: postFontSize + 'em'}">
<blog-post v-for="post in posts"
v-bind:key=""
v-bind:post="post"
v-on:enlarge-text="postFontSize += 0.1" />
</div>
</div>
<script>
('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ }}</h3>
<button v-on:click="$emit('enlarge-text')">Zoom in font</button>
<div v-html=""></div>
</div>
`
})
new Vue({
el: '#app',
data: {
postFontSize: 1,
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
Subcomponents pass$emitMethod and pass in the event name to trigger an event. The parent component can receive the event.
We can throw a value using the event.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<div :style="{fontSize: postFontSize + 'em'}">
<blog-post v-for="post in posts"
v-bind:key=""
v-bind:post="post"
v-on:enlarge-text="postFontSize += $event" />
</div>
</div>
<script>
('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ }}</h3>
<button v-on:click="$emit('enlarge-text', 0.2)">Zoom in font</button>
<div v-html=""></div>
</div>
`
})
new Vue({
el: '#app',
data: {
postFontSize: 1,
posts: [
{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
]
}
});
</script>
</body>
</html>
In the parent component, we can access the thrown value through $event.
We can use v-model on components.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<!-- <input v-model="searchText"> -->
<input v-bind:value="searchText" v-on:input="searchText = $">
<p>{{ searchText }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
searchText: ''
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
</style>
<script src="/vue/2.4.2/"></script>
</head>
<body>
<div >
<custom-input v-model="searchText"></custom-input>
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
<p>{{ searchText }}</p>
</div>
<script>
('custom-input', {
props: ['value'],
template: `<input v-bind:value="value" v-on:input="$emit('input', $)" >`
})
new Vue({
el: '#app',
data: {
searchText: ''
}
});
</script>
</body>
</html>
Finally, noteThings to note when analyzing DOM templates。
The above is the detailed content of the summary of the basic knowledge of vue components. For more information about vue components, please follow my other related articles!