What are the components of a vue page?

The vue page has three components: 1. Template (template), that is, the interface display code (HTML code) wrapped in the template tag; 2. The business implementation code (js script code) wrapped in the script tag; 3 , the interface style code (css style code) wrapped by the style tag.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

A vue page usually consists of three parts: template (template), js (script), style (style)

• <template>Interface display code (note that there can only be one large div)</template>

• #<script>export default { Business implementation code}</script>

• ##

##[template-template]

(1) The template can only contain one parent node , that is to say, there can only be one top-level div (as shown in the picture above, the parent node is the div of #app, which has no sibling nodes)

(2) is a sub-router view insert Slot, the subsequent routing pages are displayed here, which is equivalent to iframe

[script-JS code]

vue is usually written in es6 and exported with export default , which can contain data, life cycle (mounted, etc.), methods, etc.

[style-CSS style]

The style is wrapped by the style tag . By default, it affects the whole world. If you need to define the scope It only works under this component. You need to add scoped to the label,

Introducing external CSS examples:

<style>
    import &#39;./assets/css/public.css&#39;
</style>

[Related recommendations:

vuejs video tutorial

、

web front-end development】

The above is the detailed content of What are the components of a vue page?. For more information, please follow other related articles on the PHP Chinese website!