About the implementation of .vue file parsing

This article mainly introduces the implementation of detailed explanation of .vue file parsing. The content is quite good. I will share it with you now and give it as a reference.

vue single file

Vue is one of the very popular frameworks today. The overall feeling is that it is elegant and compact. I have recently started to learn it. I started using this framework to do some projects and learn from practice. After browsing the official documents, I started to use vue-cli scaffolding to quickly build a Vue project and learn quickly from practice. After looking at the project file structure, I have a lot of confusion about the single file ending in .vue. The specific problems encountered are as follows:

What is 5fb7ccb56c2fb1d80828bbe8bd9d71f7Tag

template is a new element of html5. It is mainly used to save the content in the client. The browser parses the content but does not render it. You can A template is considered a piece of content that is being stored for subsequent use in a document.

About single file component

The single file of vue is equivalent to a component in a page and contains the html about the component. -css-js file collection, the purpose of this is to facilitate project management and integration, the official statement is that there are construction steps.

There can only be one child node element under the dcdc0fa59b5fea5bdae0d810c3919fcd tag. If you write multiple tags such as a6f776b766579c28d02706af09482172, an error will be reported, as shown below

<template>
 <p></p>
 <p></p>
</template>

//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue file can contain html-css-js, and webpack automatically packages it into three files?

##In the .vue file, the dom structure can be written under the dcdc0fa59b5fea5bdae0d810c3919fcd tag, and the style file for the dom structure is as e21c45c96405fdca71b939a6b36490ec of the ; tag exists, and the same script that controls the DOM structure is written in another sibling element 7239f9c7b7d151b366b41e07a1e7636c. In this way, each component has its own corresponding structural style. In the same file, it will not be confused with other components.

Official hello.vue instance

What are the attributes of the style tag? What does difference mean?
##e5323b80b7cdba5fa628a1c89784fa75 tag contains scoped and module attributes, which represent the css scope and css module respectively. Generally, the scoped attribute is written to indicate that the style is only for the current component. And the template part of its sub-components takes effect

#What does the export default in the script tag mean?
You can see from the only picture in the whole text that the first line of code under the 7239f9c7b7d151b366b41e07a1e7636c tag is export default {……}, which is new in ES6 The syntax of the added module part adopts the module method. Each file is its own module, and export and import are used to expose and reference the interface. In a file or module, there can be multiple exports and imports, but there can only be one export default. After using this command, other modules do not need to know the name of the module variable to be loaded when referencing it.

What can be written under export default?
You can write a lot of things, including variables, methods, objects, etc., as long as you want to use it as an open interface, you can usually write data() in the .vue file. {} and method, etc., data refers to the template data defined in the component, and if you bind a click method to the element in dcdc0fa59b5fea5bdae0d810c3919fcd, such as d1b23b4775d0447f282b5db359c1144b , it can be as follows:

<script>
export default {
 name: &#39;hello&#39;,
 data () {
 return {
  msg: &#39;Welcome to Your Vue.js App&#39;
 }
 },
 methods: {
   login: function() {
    console.log(this.username,this.password);
   }
  }
}
</script>

I have just come into contact with vue not long ago. I believe that the best way to learn is to fight with war. If you don’t understand, go step by step. I believe it will be very interesting to understand. If there are some errors above, I hope someone can point them out. Thank you~

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

VUEJS 2.0 sub-component access/call parent component

##About vue-admin and backend ( flask) analysis of separation and combination

#

The above is the detailed content of About the implementation of .vue file parsing. For more information, please follow other related articles on the PHP Chinese website!