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>

View Code

 

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>

View Code

 

页面创建案例user页面

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

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

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

View Code

 

页面标签路由配置、根组件文件写  <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,
        }

    ]

View Code

 

 

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中配好路由与页面组件的关系