Basic steps of vue

The code of Vue is placed in the generated src. Under the src, App.vue is the root component, main.js and components (other components are placed inside)

1. First, define a component name in components, and write content in it. Take HelloWorld.vue as an example:

   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
     </div>
   </template>
   
   <script>
   //Components are function module interfaces
   //data can be expressed in two ways: 1. Function form, 2. Object form
   //Must be written as a function in a component
   export default {  //Expose
     name: 'HelloWorld',
     data () { 
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     }
   }
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   h1{
     color: red;
   }
   </style>
   

2. Click to open App.vue

   • Introducing HelloWorld.vue
   • Map component labels
   • Using component labels
     

     <template>
       <div id="app">
         <img src="./assets/logo.png">
         <HelloWorld/> <!--3.Using component labels-->
       </div>
     </template>
     
     <script>
     //1. Introduce HelloWorld component
     //2. Map component label
     import HelloWorld from './components/HelloWorld'
     
     export default {
       components: {
         HelloWorld
       }
     }
     </script>
     
     <style>
     
     #app {
     
       font-family: 'Avenir', Helvetica, Arial, sans-serif;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-align: center;
       color: #2c3e50;
       margin-top: 60px;
     }
     </style>
     

3. Complete main.js

   • Introducing vue
   • Write vue instance
   • Introducing App
   • Render App as tag (map component tag)
   • Using component tags with template
     

     //Entry js: create vue instance
     //1. introduce vue
     //2. Write vue instance
     //3. introduce App
     //4. Render App as tag (map component tag)
     //5. Use component label with template
     import Vue from 'vue'   //Case sensitive
     import App from './App'
     
     /* eslint-disable no-new */
     new Vue({
       el: '#app',   //The el in the vue instance is the id in index.html under the root directory
       components: { App },
       template: '<App/>'
     })
     

4. npm run dev runs the browser to see the effect