Home > Developer > JavaScript
Parse Vue. js components and Vue. js Components
Introduction
When using Vue. js, the Vue. js component is very important. In this tutorial, we will go deep into the Vue. js components, understand the basics, and apply them to applications. Let's get started.
What is a component?
Components enable us to break down complex applications into small pieces. For example, a typical Web application will have a title, sidebar, content, footer, and so on.
Vue. js allows us to break each part into separate modular code called components. These components can be extended and then appended to the application you are processing. Using components is a good way to reuse code in the entire application.
Suppose you have a blog application and you want to display a blog post. With the Vue component, you can do the following:
<blog-post></blog-post>
Vue handles the remaining tasks.
Create a simple HTML page that mounts a Vue instance to a DOM element. You will use it to understand components. The following is an example of an HTML page:
<!DOCTYPE html>You have created a simple Vue instance. There is no component in the code. What do you do if you want to welcome messages twice?
Your guess is that the div may appear twice at the Mount location of the Vue instance. This is not feasible. Try to change it from id to class and you will get:
<!DOCTYPE html>It still does not work!
The only way to solve this problem is to create a component. How do you create a component?
Components are used
Vue.component（）Created by the constructor. This constructor has two parameters: Your component name (or tag name) and an object that contains the options.Let's use the above content to create a component.
Vue.component('welcome-message', { data: function() { return { domain: 'Tutsplus' } }, template: '<p>Welcome to {{ domain }}</p>' })The component name is called
welcome-message. Your component can have any name you choose. However, it is important that this name does not affect any HTML tag because you do not want to rewrite it.The options object passed to the constructor contains data and templates. When creating a component, your data should be a function, as shown above. The stored data should be returned as an object.
If no data can be transferred, the following template is passed:
Vue.component('welcome-message', { template: '<p>Welcome to Tutsplus</p>' })After that, you can use components in applications by using the name passed to the constructor as a regular HTML element. It is called as follows:
<welcome-message> </ welcome-message>.To output the template multiple times, you can call the component multiple times as needed, as shown below.
<!DOCTYPE html>In this way, the welcome message is displayed four times.
Store data in components
As mentioned above, data must be a function and the information contained in it must be returned as an object. Why?
When the returned data is not an object, the component that uses this data shares the same source: Shared data. Therefore, data changes of one component may affect the other component. This is different when data is returned as an object.
It is important to see how this works. First, let's look at the data returned as an object.
<!DOCTYPE html>Can you guess what happened above?
There are two components that share the same data source because the data is not returned as an object. How do you prove that I am right? When you view the above page from a browser, you will see that the changes to one component will lead to changes to the data of the other component. So what should it be like?
Like this:
<!DOCTYPE html>The data here is returned as an object. Changes to one component do not affect the other. This function is executed for a single component. This is important when building an application.
Create and use components
Using what we have learned so far, let's use vue-cli to start a new Vue. js project from scratch to implement it. If vue-cli is not installed on your machine, run the following command:
npm install -g vue-cliStart your new Vue. js project:
vue init webpack vue-component-appNavigate to your application, install dependencies, and run your development server using the following command.
cd vue-component-appnpm installnpm run devFirst, you will rename the HelloWorld component, which is the component created when you initialize the application as Hello. vue. Then you will register this component as a global component for use in your application.
So your Hello component should look like this.
#src/components/Hello.vue<template> <div class="hello"> <p>Welcome to TutsPlus {{ name }}</p>Your welcome text displays the Welcome Message and the name used as the data transmission. The changeName method is called when you click the button below the welcome message. The name will be changed from Henry to mark.
To use this component globally, it must be registered. Can you guess where to complete this operation? If you say main. js, congratulations!
To register a component, You can import it and use the Vue. component () constructor to set it. Try it by yourself.
I bet it's a piece of cake for you. The content in the main. js file is as follows.
#src/main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import Home from './components/Hello'Vue.config.productionTip = falseVue.component('display-name', Home)/* eslint-disable no-new */new Vue({ el: '#app', template: '<App/>', components: { App }})There is nothing new to import except the line of your Hello component. Then use the constructor to register the component. Finally, for this part, the component must be displayed using the component name you entered. In this case, the component is the display name. This will be done in your App. vue file.
Open src/App. vue and make it look like this.
#src/App.vue<template><div id= "app" ><display-name/></div></template><script>export default {}</script><style>#app {font-family: 'Avenir' , Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>Open the server and enable http: // localhost: 8080. Click the button to change the name.
Let's take a look at how to use a component locally.
Create a file named Detail. vue in the component directory. This component does not do anything special-it will be used in the Hello component.
Make your Detail. vue file look like this.
#src/components/Detail.vue<template> <div class="hello"> <p>This component is imported locally.</p> </div></template><script>export default { name: 'Detail'}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>To use it in the Hello component, You can import it like importing the Hello component. Next, register it, but this time you do not need to use the Vue. component () constructor.
You can use the component object in the export to register. The component name used as the element tag must be passed as a value to the object. Now you can use the element tag to output the component.
To understand this, the Hello component should be long as follows:
#src/components/Hello.vue<template> <div class="hello"> <p>Welcome to TutsPlus {{ name }}</p>Refresh the page to view the new page.
Range component style
Vue. js allows you to provide global and local styles for components. What does that mean? In some cases, you want some elements in the component to be different from the corresponding element styles in another component. Vue. js can help you.
A good example is the small application you just created. The style in App. vue is global. How is this possible? Open your App. vue and the style part looks like this.
<style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>This is different from Detail. vue and looks like this.
<style scoped>h1, h2 { font-weight: normal;} ul { list-style-type: none; padding: 0;} li { display: inline-block; margin: 0 10px;} a { color: #42b983;}</style>Adding scoped to style labels causes this difference. Try to delete scoped to edit a component style and you will see how it works.
Conclusion
Although this article is a bit long, I believe you will like it.
Now you know how to use components effectively and how to build components in existing applications. When using vue-cli, you can also create and use components locally and globally. When you want to use a specific style for a component, you have seen how to use scoped to do this.
You can continue to build complex Vue. js applications using components. Understanding Vue. js allows you to reuse code. Your header, footer, logon panel, and search bar can be used as components.
Summary
The above is a small part of the Vue. js component, I hope to help you, if you have any questions, please leave a message, the small part will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
