Vuejs single file component. Use of vue file, vuejs file component. vue

Vuejs single file component. Use of vue file, vuejs file component. vue

Vuejs customizes a type. vue file. html, css, and js can be written to a file to encapsulate a component. the vue file is a separate component. Because the. vue file is customized and not recognized by the browser, You need to parse the file. In a webpack build, you must install vue-loader to parse the. vue file. In the sumlime Editor, we can write the. vue file and install the vue syntax highlight plug-in to support the file.

Use vue-cli to create a vue project. What is the length of the. vue file? When creating a project, the command line will ask you a few questions. If you want to install vue-router, select No. After the project is completed, we can see that there is a componet directory under the src directory, which contains a Hello. vue file with the following content. Here we have deleted some content in the template.

<template> <div class="hello">  
As you can see. in the vue file, templates are all html code, which defines the content displayed on the page. Because there are variables in them, we can also define a template. scripts are all js Code, it defines the data and operations required by this component. The style contains the css style and defines the style of this component. scoped indicates that the css style written here is only applicable to this component, you can limit the scope of a style.
Understanding of objects following the export defalut in the script tag.
Not in use. when a vue is a single file, we create a Vue root instance through the Vue constructor to start the vuejs project. The Vue constructor accepts an object with some configuration attributes el, data, component, template to support the entire application.
new Vue({ el: '#app', data: {    msg: "hello Vue"    } })
In. in the vue file, the objects after export default are equivalent to the objects accepted in the new Vue () constructor. They are all the data required to define the component ), and the method of the operand data, a more comprehensive export default object, including methods, data, computed, then you can see that this object and new Vue () the constructor accepts the same object. Note that data is written in different ways. In the. vue component, data must be a function and return (returns an object). The data of the returned object is implemented by the component.
Clear the self-contained hello. vue content in the project, and write a component to try the same.
<Template> <div class = "hello"> <input type = "txet" placeholder = "Enter the text" v-model = "msg" @ keypress. enter = "enter"> <p >{{ upper }}</p> </div> </template> <script> export default {data () {return {msg: 'Hello' }}, methods: {enter () {alert (this. msg) ;}}, computed: {upper () {return this. msg. toUpperCase () ;}}</script> <style scoped> input {width: 200px; height: 20px ;}p {color: red ;}</style>
There is an input box in the page. When the input is complete, the content under the input box is displayed synchronously, but it is in uppercase. After the input is complete, press enter. Obtain the user input content. We use the v-model command, which binds the user input content to a variable and responds to it, our variable values change with the changes in user input. That is to say, we always obtain the latest user input. In upper case, the computed attribute is used, and a pop-up window is bound to a keypress event. Through the description, you will find that it is a vue instance, it is actually a vue instance. Every vue component is a vue instance, which makes it easier to understand the objects following export default.
Communication between parent and child components
Each. vue file is a component. Components and components are combined to form an application, which involves communication between components and components. The most common communication is between parent and child. In vue, import another component in a component. This component is the parent component, and the introduced component is the child component.
In our vue-cli project, the src folder contains an App. vue file. In its script tag, import Hello from '. /components/Hello ', then App. vue is the parent component. vue is a sub-component. The parent component transmits data to the child component through props, and the child component transmits data to the parent component through custom events.
The parent component transmits a value to the child component, which is mainly carried out through the attribute of the element. in the App. in the vue template, there is a 
In Hello. in vue, add a field props to the object after export default, which is an array used to receive data transmitted by the parent component. props: ["mesFather"]. The mesFather string is defined here, which corresponds to the attributes of elements defined in the parent component. however, in the parent component, the attribute defined in the 
The template of App. vue is changed as follows:
<template> <div id="app">    
Hello. vue component. Here we will clear the self-contained Hello. vue in the project and write it as follows:
<template> <div class="hello">  <p>{{mesFather}}</p> </div></template><script>export default { props:['mesFather']}</script>
At this time, the message from father is displayed on the page. The parent element successfully transmits data to the child element.
Custom events are required when a child widget transmits data to a parent widget. For example, in Hello. vue, we write an input to receive user input. We want to pass the user input data to the parent component. At this time, the input needs to bind a keypress event to obtain the user's input, and also launch a custom event, such as valueUp. The parent component only needs to listen to this custom event, you can know that the child component is going to pass data to him. The child component can also carry parameters when launching a Custom Event. when listening to the event, the parent component can also accept parameters, which are the data to be transmitted.
In the Hello. vue template, add an input box, give it a v-model to get the user's input, and then add the keypress event to launch the event and transmit data. Add data to the script, define variables to get user input, and add methods to process the keypress event's processing function enter. The entire Hello. vue file is as follows:
<Template> <div class = "hello"> <! -- Add a keypress event to the input box --> <input type = "text" v-model = "inputValue" @ keypress. enter = "enter"> <p >{{ mesFather }}</p> </div> </template> <script> export default {props: ['mesfather '], // Add data. Bind the user input to the inputValue variable to obtain the data: function () {return {inputValue: ''}}, methods: {enter () {this. $ emit ("valueUp", this. inputValue) // The child component transmits the Custom Event valueUp and carries the value to be passed to the parent component. // if you want to pass many values to the parent component, these values must be listed in order as parameters such as this. $ emit ('valueup', this. inputValue, this. mesFather) ;}}</script>
In the App. in the vue, the hello component in the template is bound to a custom event, @ valueUp = "receive", used to listen to the Event initiated by the Child component, and then write a p element, displays the data transmitted by the Child component. <p> data transmitted by the Child component {childMes }}</p>
Correspondingly, in scrpit, data defines a variable childMes, and in methods, defines an event processing function reciever. Modify the entire App. vue as follows:
<Template> <div id = "app">  <! -- Add Custom Event valueUp --> 
Enter the content in input, and press enter to view the data passed by the Child component. The child component passes the data to the parent component successfully.
When you input data in the input box and press enter, it triggers keypress. enter event to call the event processing function enter. In enter, we launch an event valueUp with a parameter, because the 
In fact, the best way to write props in sub-components is props verification. in vue, write props: ['mesfather '], which is expressed as a parameter. If it is written as props verification, it not only expresses what parameters it needs, it can also express the parameter type, and if there is an error, vue will give a warning. Now you can change props to props verification. The props in js in Hello. vue is modified as follows:
props： {   'mesFather': {     type: String,     default: 'from father',     required:true   } }
If the communication between components is very complex, not only the parent and child components, but also the sibling components, you need to use status management, vuex
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.