Tất tần tật về Routing

Bản thân VueJS không cung cấp tính năng tự xây dựng route tuy nhiên để làm được việc này chúng ta cần cài đặt thêm một package vue-router

# CÀI ĐẶT BẰNG NPM

                  npm install vue-router 

# Copy đoạn script này vào vị trí chứa script đối với project VueJS

                import {router} from './router'
                  /*Phải thêm router vào*/
                  new Vue({
                    ...
                    router,
                    render: h => h(App)
                  }).$mount('#app')      
                
              

# Thêm đoạn code về router trong thư mục router/index.js giống như code minh họa:

                
                  import Vue from 'vue'
                  import Router from 'vue-router'
                  import Overview from '@/components/Overview'
                  import Feature from '@/components/Feature'
                  import Theme from '@/components/Theme'
  
                  Vue.use(Router)
  
                  export const router = new Router({
                    mode: 'history',
                    routes: [
                      {
                        path: '/overview',
                        name: 'Overview',
                        component: Overview
                      },
                      {
                        path:'/feature',
                        name:'feature',
                        component: Feature
                      },
                      {
                        path:'/theme',
                        name:'theme',
                        component: Theme
                      },
                  
                    ]
                  })
                
              

# Sử dụng Router - Định nghĩa Routing trong HTML

                
                  <div>
                  <router-link to="/overview"><v-btn rounded style="margin:10px; box-shadow: 0px 0px;" color="#fff0"><span
                  style="color:white"> Overview - Setting </span></v-btn></router-link>
                  </div>
                  <div>
                  <router-link to="/feature"><v-btn rounded style="margin:10px; box-shadow: 0px 0px;" color="#fff0"><span
                  style="color:white"> Feature </span></v-btn></router-link>
                  </div>
                  
                  <div>
                  <router-link to="/theme"><v-btn rounded style="margin:10px; box-shadow: 0px 0px;" color="#fff0"><span
                  style="color:white"> Style & animations </span></v-btn></router-link>
                  </div>
                  
                  <div>
                  <router-link to="/UI"><v-btn rounded style="margin:10px; box-shadow: 0px 0px;" color="#fff0"><span
                  style="color:white">UI Comoponent </span></v-btn></router-link>
                  </div>
                
              

# Thêm Router View sau khi định nghĩa các đường link là nơi chứa các component router

                
                  <router-view></router-view>
                
              

Ví dụ 29. Hiển thị tiêu đề có kích thước khác nhau với một component

Node và Trees

                
<div>
  
Bài đồng dao
  Năm mới năm me
<!-- TODO: Hoàn thành bài đồng dao -->
</div>
                
              

Virtual DOM

JFX

                  
createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
)
                  
                

                  
import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
}))
                  
                

Reactive Interface

                  
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive