Vue工作原理 - 爱码网

1. 首先Vue项目中有一个index.html =>单页面，页面进入的入口

　<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