当前位置 : 主页 > 网页制作 > html >

Vue工作原理

来源:互联网 收集:自由互联 发布时间:2021-06-12
1. 首先Vue项目中有一个index.html =单页面,页面进入的入口 div id="app"/div # 挂载点,挂的就是根组件App.vue 2. 根组件APP.vue是如何挂载渲染到index.html中的呢? 主要看main.js文件,在main.js中创

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

网友评论