Vue工作原理

1. 首先Vue項目中有一個index.html  =>單頁面，頁面進入的入口

　<div id="app"></div>   # 掛載點，掛的就是根組件App.vue

2. 根組件APP.vue是如何掛載渲染到index.html中的呢？　　

　　主要看main.js文件，在main.js中創建一個根組件，這個根組件沒有template模板，而是把template模板放在了App.vue中。

　　通過回調函數h將根組件html加載過來，返回級render, render交給Vue作為虛擬DOM渲染到index頁面上。

　　

　注：./代表相對路徑的當前目錄，文件后綴可以省略 【main中配置的信息for 整個項目配置，配置 vue |  根組件App |   倉庫 。。。  cookie |  ajax(axios) | element-ui】

　　　@代表src的絕對路徑

import Vue from 'vue'
import App from './App.vue'
// import router from './router'
import router from '@/router'   @代表src的絕對路徑
import store from './store'

new Vue({
  router,  ==> 將router交給Vue，這樣在全局都可以能過this.$router拿到router值了
  store,   ==>  同上，可以全局使用
  render: h => h(App)
}).$mount('#app');
　　　　||
　　　　||

new Vue({
    el:"#app",
    router,
    store,
　　// function (h) {return 1}  |   (h) => { return 1}   |  h => 1
    render: function (fn) {     
        return fn(App)
    }
});

3. Vue組件【小組件】的使用

　 小組件的說明，三部分:

<!--相當於原來let subTag={template=``} 中的template必須有一個根標簽-->
<template>
</template>


<!--外部引用導出， let subTag={template=``} 中的let subTag-->
<!--大括號內完成組件的各項成員：data | methods...-->
<script>
    export default {
        name: "FannyWorld"
    }
</script>


<!--scoped給組件加的作用域,全局的可以加在根組App中-->
<style scoped>
</style>

創建小組件案例， 小組件創建完成后，可以在About頁面組件中注冊

<!--相當於原來let subTag={template=``} 中的template必須有一個根標簽-->
<template>
    <div class="fanny">
        <h1 :class="{ active: is_active}" @click="btnClick">fanny組件</h1>
    </div>
</template>


<!--外部引用導出， let subTag={template=``} 中的let subTag-->
<!--大括號內完成組件的各項成員：data | methods...-->
<script>
    export default {
        data (){
            return {
                is_active: false,
            }
        },
        methods:{
            btnClick (){
                this.is_active =! this.is_active;
            }
        }
    }
</script>


<!--scoped給組件加的作用域,全局的可以加在根組App中-->
<style scoped>
    .active{
        color: red;
    }
</style>

 

views.About.vue頁面組件中注冊：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <FannyComp></FannyComp>
  </div>

</template>

<script>
  // import FannyComp from '../components/FannyWorld'   ==>導入組件
  import FannyComp from '@/components/FannyWorld'
  export default {
 components:{
          FannyComp     ==>注冊組件
      }
  }
</script>

 

4.頁面組件的創建與使用

　如果想要有一個新的頁面，

    1）必須在Views中創建頁面組件,  

　2）然后的router.js文件中導入頁面組件， 在routes中配置好路由與頁面組件對應關系

　3）在根組件文件App.vue中的template掛載點標簽中寫：<router-view/>

　頁面創建案例Myhome頁面

<template>
    <div class="my-home">
        <h1>我的home</h1>
    </div>
</template>

<script>
    export default {
        name: "MyHome"
    }
</script>

<style scoped>
    .my-home{
        color: red;
    }
</style>

 

頁面創建案例user頁面

<template>
    <div class="user">
        <h1>user</h1>
    </div>
</template>

<script>
    export default {
        name: "User"
    }
</script>

<style scoped>
    .user{
        color: red;
    }
</style>

 

頁面標簽路由配置、根組件文件寫  <router-view/>  【component不能還S】

import MyHome from './views/MyHome'
import User from './views/User'

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
    routes:[
        {
          path: '/',
            name:'myhome',
            component:MyHome,
        },

        {
          path: '/user',
            name:'user',
            component:User,
        }

    ]

 

 

5. App.vue中兩類標簽：

<router-link to="/">Home</router-link>   to完成路由指定路徑跳轉

<router-view/>  完成跳轉的組件渲染，該標簽只要寫一個，相當於是一個渲染容器，Vue會路由中的配置自動找到對應的頁面組件

 

補充：小組件在頁面組件中注冊、【掛載渲染被Vue中的main.js完成了，無需再關注】

　　　頁面組件的顯示由根組件App <router-view>完成， 路由的跳轉由App的<router-link to...>完成，前提是在router.js中配好路由與頁面組件的關系