Summary of Vue component basics

Summary of Vue component basics

Component Basics

1 Component Reuse

Components are reusable Vue instances.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			// Define a new component called button-counter Vue.component('button-counter', {
				data: function () {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">Clicked {{ count }} times.</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

Note that when the button is clicked, each component will maintain its count independently. Here the data property 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="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			var buttonCounterData = {
				count: 0
			}
			// Define a new component called button-counter Vue.component('button-counter', {
				data: function () {
					return buttonCounterData
				},
				template: '<button v-on:click="count++">Clicked {{ count }} times.</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

2 Passing data to child components through Props

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<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>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<h3>{{ title }}</h3>'
			})

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

Here, <blog-post> component passes data through the custom attribute title .
We can use v-bind to pass props dynamically.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
		</div>
  <script>
			Vue.component('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="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<div v-html="post.content"></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 by v-bind:post="post" is an object, which avoids the trouble of passing data through many props.

4 Listening for subcomponent events

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += 0.1" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text')">Enlarge the text</button>
						<div v-html="post.content"></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>

The child component triggers an event by using the $emit method and passing in the event name. The parent component can receive this event.

We can use events to throw a value.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += $event" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text', 0.2)">Enlarge the font</button>
						<div v-html="post.content"></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="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<!-- <input v-model="searchText"> -->
			<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
			<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="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<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>
			Vue.component('custom-input', {
				props: ['value'],
				template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
			})

			new Vue({
				el: '#app',
				data: {
					searchText: ''
				}
			});
  </script>
 </body>
</html>

Finally, a note of caution when parsing 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 pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • An article to help you understand the basics of VUE
  • A brief introduction to VUE uni-app core knowledge
  • A brief talk about the knowledge you need to master when getting started with Vue
  • A comprehensive review of Vue component introductory knowledge
  • Do you know the basic knowledge of Vue?

<<:  What is ZFS? Reasons to use ZFS and its features

>>:  Linux installation MySQL tutorial (binary distribution)

Recommend

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Table of contents Environmental Description Docke...

Detailed tutorial on compiling and installing MySQL 8.0.20 from source code

In the previous article, we introduced: MySQL8.0....

Detailed explanation of the pitfalls of recording lower_case_table_names in MySQL

1 Cause After the project migrated the database a...

JS implements request dispatcher

Table of contents Abstraction and reuse Serial Se...

Drawing fireworks effect of 2021 based on JS with source code download

This work uses the knowledge of front-end develop...

How to implement JavaScript output of Fibonacci sequence

Table of contents topic analyze Basic solution Ba...

How to forget the root password in Mysql8.0.13 under Windows 10 system

1. First stop the mysql service As an administrat...

A summary of the knowledge points of database indexing. Everything you need to know is here.

I believe everyone is familiar with database inde...

Detailed explanation of 30 SQL query optimization techniques for MySQL tens of millions of large data

1. To optimize the query, try to avoid full table...

Content-type description, that is, the type of HTTP request header

To learn content-type, you must first know what i...

Alibaba Cloud ESC Server Docker Deployment of Single Node Mysql

1. Download the accelerated version of msyql dock...

Detailed explanation of the installation and configuration of ROS in CLion2020.1.3 under ubuntu20.04

1. Download, install and activate CLion Just foll...

Linux installation steps for Jenkins and various problem solving (page access initialization password)

1. Prepare the Java environment, jdk1.8 Check whe...

JavaScript implements AI tic-tac-toe game through the maximum and minimum algorithm

Without further ado, let’s run the screenshot dir...

Docker private warehouse harbor construction process

1. Preparation 1.1 harbor download harbor downloa...