First introduction to *.Vue files in Vue.js_vue.js

vue.js is a progressive framework for building user interfaces. It adopts a bottom-up incremental development design. This article mainly introduces the first introduction to Vue.Js pit filling diary*.Vue files, which are required Friends can refer to

What is 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 a *.vue file

First of all, we have encountered many projects built with vue-cli scaffolding, such as This file is 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 d477f9ce7bf77f53fbcf36bec1b69b7a, 3f1c4e4b6b16bbbd69b2ee476dc4f83a and c9ccee2e6ea535a969eb3f532ad9fe89. These three parts represent html, js, and css respectively.

Among them d477f9ce7bf77f53fbcf36bec1b69b7a and c9ccee2e6ea535a969eb3f532ad9fe89 support writing in precompiled language. For example, in our project, we use scss precompilation, so we write it like this:

<style lang="scss">

html It also has its own precompiled language, which vue also supports. However, generally speaking, our front-end staff still prefer the native language of html, so I will not 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 class="article_list">
      <ul>
        <li></li>
      </ul>
    </p>
    <Footer></Footer>
  </p>
</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 d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2, but that an html tag must be placed inside to wrap all the code. In this example, we use the e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 tag.

Everyone must be very surprised when they see the code 2432be42592c7cf43d7b271eae4dbb5a31a13137de512d4e98c7af37c2f9fe88. 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 479c53d55bf259afb26198039255ccd72fd8772b288aec020c7313ab369d9e3e is also a component.

script part

First, we need two custom components, which we reference 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 indicates what 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 is the method of our component, which can also be said to be a function. 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 部分

这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：

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

到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。

附录

勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图

 

总结

以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！

相关推荐：

vue.js devtools遇到一系列问题详解

关于Vue.js 2.5新特性介绍

vue.js做出图书管理平台的详细步骤

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