Explanation of *.Vue files in Vue.js

vue.js is a progressive framework for building user interfaces. It adopts a bottom-up incremental development design. (The bottom-up design method is based on the system functional requirements, starting from specific devices, logic components or similar systems, and relying on the designer's skilled skills and rich experience to interconnect, modify and expand them to form the required System.) Vue's core library only focuses on the view layer. It is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications when combined with single-file components and libraries supported by the Vue ecosystem.

What is *.vue file

First of all, in the project we built using vue-cli scaffolding, we have encountered many files, such as index.vue or App.vue. . What the hell is this? If you are new to vue development, you may have never seen this thing before. The *.vue file is a custom file type that uses HTML-like syntax to describe a Vue component. Each .vue file contains three types of top-level language blocks

Among them

<style></style>

html also has its own precompiled language , vue is also supported, but generally speaking, our front-end staff still prefer the native language of html, so I won’t elaborate too much.

In addition, I have used the sentence @import "./style/style"; in the App.vue file to write our style to the specified place. Therefore, this part of the content will not appear in all my subsequent articles. All styles will be written in the corresponding locations in the src/style/ folder. The advantage of this is that I don’t need to repeatedly introduce various scss basic files, and the style code of the project can be controlled.

*.vue file code analysis

First, let’s take a brief look:

<template>
  <p>
    <header></header>
    </p>
<p>
      </p>
<ul>
        <li>
      </ul>
    
    <footer></footer>
  
</template>
<script>
import Header from &#39;../components/header.vue&#39;
import Footer from &#39;../components/footer.vue&#39;
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get(&#39;topics&#39;, null, r => {
        console.log(r)
      })
    }
  }
}
</script>
<style>
  .article_list {margin: auto;}
</style>

The above is The basic structure of a simple *.vue file. Let's explain it part by part.

template part

Below, I no longer call it a *.vue file. Changed to vue component. First of all, a vue component, its template represents its html structure, I believe everyone can understand it. But it should be noted that we are not saying that it is enough to wrap the code in , but that an html tag must be placed inside to wrap all the code. In this example, we use the

tag.

Everyone must be very surprised when they see the code

. What is this? Actually, this is a custom component. We have written a component elsewhere, and then we can introduce it in this way. Likewise

is also a component.

script part

First, we need two custom components, which we will quote first. The following format is easier to understand.

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

Secondly, except for the referenced files, we wrap all the code in the following code:

export default {
  // 这里写你的代码，外面要包起来。
}

We first introduced the source files of the two components Header and Footer. Next, we need to declare the referenced components into components. In this way, we can use it in template.

components: { Header, Footer },

data is our data. Our demo code gives an empty array data of a list. In the template, we can use this.list to use our data. We will talk about this in a later article. We won’t go into details here, just get to know it.

data () {
  return {
    list: []
  }
},

created represents the content that needs to be executed when our component is loaded. For example, here, we let the component execute a function called this.getData() when loading is complete. In addition, created is one of the hook functions in vuejs. (Please refer to the appendix for specific hook functions)

created () {
  this.getData()
},

methods are the methods of our component, which can also be said to be functions. For example, the above code indicates that our component has customized a method function called getData().

methods: {
  getData () {
    this.$api.get('topics', null, r => {
      console.log(r)
    })
  }
}

style part

This is relatively simple, just write some styles for the html elements that appear in the content in our template. As follows, my code:

<style>
.article_list {margin: auto;}
</style>

At this point, we should have a certain understanding of vue component files. The following blog posts will involve more various writing methods. Therefore, it is recommended that after reading this article, you spend more time checking the official documentation of vue. Although you may not be able to understand all the documents, you must have a general understanding, otherwise the following learning will be more difficult.

Appendix

Hooks can be understood as the life cycle of vuejs, while functions are event methods at each stage of the life cycle. As shown below

Related recommendations:

A summary of practical vue.js project tips

##Vue. Introduction to the implementation method of js divided components

What are the commonly used instructions in Vue.js

The above is the detailed content of Explanation of *.Vue files in Vue.js. For more information, please follow other related articles on the PHP Chinese website!