Front-end notes [Vue] component development

1. Introduction

Vue is a front-end framework that supports component-based development. According to Vue, the suffix of the component is .vue (eg.App.Vue file is a Vue component).

2. Composition of components

Each Vue component consists of three parts: template, script, and style. Among them, each component must contain a template template structure, while script behavior and style are optional components.

1.template

Definition: (Vue stipulates) the template structure corresponding to each component needs to be defined in the <template> node

<template>
   <!-- 当前组件的DOM结构，需要定义到template标签内部  -->
</template>

Notice:

(1) template is just a container tag provided by Vue, which only plays the role of wrapping, and it will not actually render to the DOM element;

(2) template can only contain a unique root node

2.script

Definition: (Vue stipulates) Developers can encapsulate the JavaScript business logic of the component in the <script> node. The basic structure of the <script> node is as follows:

<script>
  //今后，组件相关的data数据、method方法等；
  //都需要定义到export default所导出的对象中
  
  export default{

  }

</script>

Notice:

Vue stipulates: the data in the vue component must be a function and cannot directly point to a data object

3.style

Definition: (specified by Vue) The style node in the component is optional. Developers can write styles in the <style> node to beautify the ui structure of the current component

<style>

  h1{
    font-weight:normal
  }

</style>

Notice:

Add the lang="less" attribute to the <style> tag to write component styles using the less syntax

3. Parent-child relationship between components

After the components are packaged, they are independent of each other, and there is no parent-child relationship

Only when used, according to the nesting relationship with each other, a parent-child relationship and a brother relationship are formed

4. Three steps to use components

Step 1: Import the required components using the import syntax

import Subassembly from '@/components/subassembly.vue'

Step 2: Register components using the components node

export default{
  components:{
     Subassembly 
  }
}

Step 3: Use the just registered component as a tag

<div class="box">

   <Subassembly></Subassembly>

</div>

5. Registration of components

<script>
 import Subassembly from '@/components/Subassembly.vue'
 import Subassembly2 from '@/components/Subassembly2.vue'
 import Subassembly3 from '@/components/Subassembly3.vue'

 export default{
   components:{

      Subassembly,
      Subassembly2,
      Subassembly3,

   }
 }



</script>

//导入需要被全局注册的那个组件
import Count from '@/components/Count.vue'

Vue.components('MyCount',Count)

Front-end notes [Vue] component development

Guess you like