ref = "name": Registration reference information

• this.$ref. Name: get object (this is the operation dom node)

Calculation attribute: calculated

• Calling this function in the differential expression directly returns the result, not the function itself.

• When the data in data changes, it will be calculated automatically.

  new Vue({
          el:"#d1 ", / / / area of action
          data:{		//	parameter
  
          },
          methods:{	//  function
  
      	},
          computed:{	//	Calculate data function
  
          }
      })
  

The life cycle function of vue

<script>
export default {
    beforeCreate() {//	Before creation

    },
    created() {//	After creation
        		//	To mount data, you can generally obtain the initial data (when the page is loaded)
    },
    beforeMount() {//	Mount to front of page

    },
    mounted() {//	After mounting to the page

    },
    beforeUpdate() {//	Before updating the page
        			//	dom created, ready to render
    },
    updated() {//	After page update
        		//	To render a real dom
    },
    beforeDestroy() {//	Before destroying vue

    },
    destroyed() {//	After destroying vue

    },
}
</script>

Component: component is one of the most powerful functions of vue. A vue file is a component.

• Basic case

  • All of the following cases are built by vue cli

  <template>
    <div>
        <!-- Use components -->
        <myComp />
    </div>
  </template>
  
  <script>
  
  //1. Import components
  import mycom from 'Route'0
  
  export default {
      //2. Declaration component
      components : {
          myComp
      }
  }
  </script>
  

• Custom attribute

  //  export
  <template>
    <div>
        <!-- 2.Binding properties -->
        <input type="button" :value="Attribute name">
    </div>
  </template>
  
  <script>
  export default {
      data() {
          return {
  
          }
      },
      // 1. Declare properties
      props : ['Attribute name']
  }
  </script>
  
  //  Import
  <template>
    <div>
        <!--3.Assign values to custom properties-->
        <mycom Attribute name="Attribute value"></mycom>
    </div>
  </template>
  
  <script>
  import mycom from 'Route'
  export default {
      component : {
          mycom : mycom
      }
  }
  </script>
  

• Custom events

  //  export
  <template>
    <div>
        <!--1.Custom events-->
        <mycom @myClick="show2"></mycom>
    </div>
  </template>
  
  <script>
  import mycom from 'Route'
  export default {
      methods: {
          show2(){
              alert('show2')
          }
      },
      component : {
          mycom : mycom
      },
  }
  </script>
  
  //	Import
  <template>
    <div>
  
        <input type="button"  @click="show1">
    </div>
  </template>
  
  <script>
  export default {
      methods: {
          show1(){
              //  2. Call custom event
              this.$emit('myClick')
          }
      },
  }
  </script>
  

router: route manager

• Binding an access path to each component makes it easier to build a single component page

• Routing entry

  • 1. Create src/views/Home.vue page for writing test page
  • 2. Create src/router.js to configure routes (Path > component)

   routes: [
      {
        path: '/home',
        component: () => import('./views/Home.vue')
      }
    ]
  

  • 3. Modify the src/main.js page and add router support

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  new Vue({
      router,
      render: h => h(App)
  }).$mount('#app')
  

  • 4. Modify the App.vue page and add the < router View > tag to store the components matching the path.

  <template>
    <div>
    		<!--Jump to another page-->
    		 <router-link to="Component access path"></router-view>
    		<!--Component display location-->
        	<router-view></router-view>
    </div>
  </template>
  

• Custom title

  //  router/index.js
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  const routes = [
    {
      path: '/add',
      name: 'add',
      component: () => import('../views/Add.vue'),
      meta : {//	Custom data area
        title : 'Custom title name'
      }
    }
  
  ]
  
  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
  
  //  Route intercept switch
  //	To: indicates the component to be entered
  //	from: indicates the component to leave
  //	next: release function, which can also be used to redirect to the specified component
  router.beforeEach((to,from,next) => {
    if(to.meta.title!=null){
      document.title = to.meta.title;
    }else{
      document.title = 'Default title';
    }
    next();
  })
  
  export default router
  
  

• Routing operation in components

  • this.$router.push

    • Jump to the specified route

  • this.$router.go(-1)

    • Fallback to previous route

  • this.$route.params

    • Get parameters on path

      //  App.vue
      <router-link to="/home/1"></router-link>
      
      //  router/index.js
      {
      	//  Declaring parameters
          path: '/home/:id',
          component: () => import('../views/Home.vue')
      }
      
      //	views/Home.vue
      <script>
      export default {
      created() {
          //  Call method to get declaration parameters
          this.$route.params.id
        },
      }
      </script>
      

  • this.$route.query

    • Get parameters on path

      //  App.vue
      <router-link to="/home?id:1"></router-link>
      
      //  router/index.js
      {
      	//  Declaring parameters
          path: '/home',
          component: () => import('../views/Home.vue')
      }
      
      //	views/Home.vue
      <script>
      export default {
      created() {
          //  Call method to get declaration parameters
          this.$route.query.id
        },
      }
      </script>
      

  • this.$route.path

    • Get route path