First introduction to *.Vue files in 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 , and . These three parts represent html, js, and css respectively.

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

Copy after login

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:

import Header from '../components/header.vue' import Footer from '../components/footer.vue' export default { components: { Header, Footer }, data () { return { list: [] } }, created () { this.getData() }, methods: { getData () { this.$api.get('topics', null, r => { console.log(r) }) } } } .article_list {margin: auto;} Copy after login

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 reference first. The following format is easier to understand.

import Header from '../components/header.vue' import Footer from '../components/footer.vue' Copy after login

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

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

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 }, Copy after login

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: [] } }, Copy after login

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() }, Copy after login

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) }) } } Copy after login

style 部分

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

.article_list {margin: auto;} Copy after login

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

附录

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

总结

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

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