vue.js frame is a gradual build a user interface, which uses a bottom-up design incremental development. (Bottom-up design method is based on the functional requirements of the system, starting from the specific device, logic unit or similar system designer with great skill and experience, by connecting them to each other, revised and expanded to form the desired system.) Vue core library focus only on the view layer, it is not only easy to use but also easy to integrate with existing third-party libraries or projects. On the other hand, when the single-file assemblies and Vue ecosystem support libraries used in combination, Vue also fully capable of providing drive for complex one-page application.
What is * .vue file
First, vue-cli Scaffolding project has encountered many such index.vue or App.vue of the files. If you are new to vue development of students you may not have seen this thing before. * .Vue file, is a custom file type, described by a syntax similar to HTML Vue assembly. Each file contains three types of .vue top language block <template>, <script> and <style>. The three parts representing the html, js, css.
Where <template> and <style> is supported by pre-compiled language to write. For example, in a project on the use of scss precompiled, therefore, it is written like this:
Method / Step
-
html has its own pre-compiled language, vue is also supported, but generally, front-end staff or more Italian html native language.
In addition, App.vue file has been using an @import "./style/style"; will be written to the specified style to the place to go. So, all in the back of my article, I will not appear this section. All styles, will be in the position corresponding to the src / style / folder to write. The advantage of this is that no repeat of the introduction of various scss foundation documents, and do style code of the item can control.
* .Vue file code analysis
First, a look at these:
-
These are the basic structure of a simple * .vue file. Part of our part to explain.
template section
The following, no longer call it * .vue files. Vue change it into components. First, a vue components, template represents its html structure, I believe we can understand. However, note that, not to say that the code wrapped in <template> </ template> on it, but must be set inside a square html tags to wrap all the code. In the present example, using a <div> </ div> tag.
See <Header> </ Header> When this code is certainly very strange, this is what stuff. In fact, this is a custom component. We write a component in other places, and then you can come in this way introduced. Also <Footer> </ Footer> is a component.
script section
First, we need two custom components, let's quote came in. The following format, better understand it.
-
Secondly, in addition to the referenced file, we will package all the code in the middle of the following code:
-
First introduced the Header and Footer both the source file components, then the component we want to affirm reference to the components inside. In this way, we can use the template in the inside.
-
the code data is the data presentation, the empty array to a list of data. In the template can be used this.list usage data. This will be mentioned later in the article, not in-depth here, it can recognize up.
-
created content represents the component loading is complete, you need to perform. For example, here, let components when loading is complete, execute a call this.getData () function. Also created is one of the hook Functions vuejs. (Specific Functions hook see Appendix)
-
methods is the method of this component, it can be said to function. For example, the above code, said assembly custom function called a method of getData ().
-
tyle part
Here is relatively simple, is to write some style template for html elements in content appear. The following code:
-
Here you should have a certain awareness of vue component files. The back post, will involve more of a variety of writing, therefore, we recommended that after reading this article, spend more time, to see vue official documents. Although all the documentation you may not be able to read, but there should be a general understanding, otherwise the next steps will be more difficult.
appendix
Hook, can be understood as vuejs life cycle, and the function is the event method at all stages of the life cycle. As shown below
-