vueRouter - 簡書

基本使用

1.什么是Vue Router?
- Vue Router和v-if/v-show一樣,是用來切換組件的顯示的
- v-if/v-show是標(biāo)記來切換(true/false)
  Vue Router用哈希來切換(#/xxx)
  比v-if/v-show強(qiáng)大的是Vue Router不僅僅能夠切換組件的顯示, 還能夠在切換的時(shí)候傳遞參數(shù)
2.Vue Router使用步驟
- 2.1導(dǎo)入Vue Router，定義組件
- 2.2定義路由規(guī)則
- 2.3根據(jù)路由規(guī)則創(chuàng)建路由對(duì)象
- 2.4將路徑對(duì)象掛載到Vue實(shí)例中
- 2.5修改URL哈希值
- 2.6通過<router-view>渲染匹配的組件
- 示例：

<script src="js/vue-router.js"></script>
<div id="app">
    <!--5.修改URL哈希值-->
    <a href="#/one">切換到第一個(gè)界面</a>
    <a href="#/two">切換到第二個(gè)界面</a>
    <!-- 路由出口 -->
    <!-- 6.路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一個(gè)界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二個(gè)界面</p>
    </div>
</template>
<script>
// 1.定義組件
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
// 2.定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
    // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象
const router = new VueRouter({
    routes: routes
});
// 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
let vue = new Vue({
    el: '#app',
    router: router,
    components: {
        one: one,
        two: two
    }
});
</script>

router-link

1.什么是router-link?
- 通過a標(biāo)簽確實(shí)能設(shè)置URL的hash,但是這種方式并不專業(yè)
- 在Vue Router中提供了一個(gè)專門用于設(shè)置hash的標(biāo)簽 router-link
- 如果是通過router-link來設(shè)置URL的HASH值, 那么不用寫#,它是通過to屬性來設(shè)置HASH值
- 格式：<router-link to="/類名"></router-link>
2.router-link特點(diǎn)
- 默認(rèn)情況下Vue會(huì)將router-link渲染成a標(biāo)簽, 但是我們可以通過tag來指定到底渲染成什么
- 格式：<router-link to="/類名" tag="標(biāo)簽名"></router-link>
3.給router-link設(shè)置選中樣式
- 默認(rèn)情況下我們可以通過重寫router-link-active類名來實(shí)現(xiàn)設(shè)置選中樣式
- 但是我們也可以通過linkActiveClass來指定選中樣式
4.重定向路由
- { path: '被重定向值', redirect: '重定向之后的值' }
- 這樣就可以設(shè)置初次打開頁面顯示的內(nèi)容
示例(上節(jié)示例的優(yōu)化版)：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    /*.router-link-active{*/
    /*    background: red;*/
    /*}*/
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<!--1.導(dǎo)入Vue Router-->
<!--注意點(diǎn): 必須先導(dǎo)入Vue之后再導(dǎo)入Vue Router-->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/one" tag="button">切換到第一個(gè)界面</router-link>
    <router-link to="/two" tag="button">切換到第二個(gè)界面</router-link>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一個(gè)界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二個(gè)界面</p>
    </div>
</template>
<script>
const one = {
    template: "#one"
};
const two = {
    template: "#two"
};
const routes = [
    // 重定向路由
    { path: '/', redirect: '/two' },
    // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則
    { path: '/one', component: one },
    { path: '/two', component: two }
];
const router = new VueRouter({
    routes: routes,
    // 指定導(dǎo)航激活狀態(tài)樣式類名
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
    router: router,
    // 專門用于定義局部組件的
    components: {
        one: one,
        two: two
    }
});
</script>

VueRouter-參數(shù)傳遞

1.Vue Router傳遞參數(shù)
- 只要將Vue Router掛載到了Vue實(shí)例對(duì)象上, 我們就可以通過vue.$route拿到路由對(duì)象频丘，只要能拿到路由對(duì)象,就可以通過路由對(duì)象拿到傳遞的參數(shù)
  - 方式一:通過URL參數(shù)的方式傳遞,在指定HASH的時(shí)候,通過?key=value&key=value的方式傳遞,在傳遞的組件的生命周期方法中通過this.$route.query獲取
  - 方式二:通過路由規(guī)則中的占位符傳遞
    在指定路由規(guī)則的時(shí)候通過/:key/:key的方式來指定占位符.在路徑中指定HASH的時(shí)候,通過/value/value的方式來傳遞值.在傳遞的組件的生命周期方法中通過this.$route.params的方式來獲取
  - 示例(沿用上個(gè)示例)：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <!--第一種傳遞參數(shù)的方式: -->
    <router-link to="/one?name=lnj&age=33" tag="button">切換到第一個(gè)界面</router-link>
    <!--第二種傳遞參數(shù)的方式: -->
    <router-link to="/two/zs/66" tag="button">切換到第二個(gè)界面</router-link>
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一個(gè)界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二個(gè)界面</p>
    </div>
</template>
<script>
// 1.定義組件
const one = {
    template: "#one",
    <!--第一種傳遞參數(shù)方法-->
    created: function () {
        console.log(this.$route.query.name);
        console.log(this.$route.query.age);
    }
};
const two = {
    template: "#two",
    <!--第二種傳遞參數(shù)方法-->
    created: function () {
        console.log(this.$route);
        console.log(this.$route.params.name);
        console.log(this.$route.params.age);
    }
};
// 2.定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
    // 數(shù)組中的每一個(gè)對(duì)象就是一條規(guī)則
    { path: '/one', component: one },
    <!--第二種傳遞參數(shù)方法-->
    { path: '/two/:name/:age', component: two }
];
// 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});

let vue = new Vue({
    el: '#app',
    // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
    router: router,
    // 專門用于定義局部組件的
    components: {
        one: one,
        two: two
    }
});
</script>

嵌套路由

什么是嵌套路由?
- 嵌套路由也稱之為子路由,就是在被切換的組件中又切換其它子組件
- 示例: 在one界面中又有兩個(gè)按鈕,通過這兩個(gè)按鈕進(jìn)一步切換one中的內(nèi)容

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 500px;
        height: 500px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .onesub1page, .onesub2page{
        width: 100%;
        height: 300px;
    }
    .onesub1page{
        background: orangered;
    }
    .onesub2page{
        background: blueviolet;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <router-link to="/one" tag="button">切換到第一個(gè)界面</router-link>
    <router-link to="/two" tag="button">切換到第二個(gè)界面</router-link>
    <router-view></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一個(gè)界面</p>
        <router-link to="/one/onesub1" tag="button">切換到第一個(gè)子界面</router-link>
        <router-link to="/one/onesub2" tag="button">切換到第二個(gè)子界面</router-link>
        <router-view></router-view>
    </div>
</template>
<template id="onesub1">
    <div class="onesub1page">
        <p>我是第一個(gè)界面子界面1</p>
    </div>
</template>
<template id="onesub2">
    <div class="onesub2page">
        <p>我是第一個(gè)界面子界面2</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二個(gè)界面</p>
    </div>
</template>
<script>
// 1.定義組件
const onesub1 = {
    template: "#onesub1",
};
const onesub2 = {
    template: "#onesub2",
};
const one = {
    template: "#one",
    components:{
        onesub1:onesub1,
        onesub2: onesub2
    }
};
const two = {
    template: "#two"
};
// 2.定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
    {
        path: '/one',
        component: one,
        children:[
            {
            // 如果是嵌套路由(子路由),那么不用寫一級(jí)路徑的地址, 并且也不用寫/
                path: "onesub1",
                component: onesub1
            },
            {
                path: "onesub2",
                component: onesub2
            }
        ]
    },
    { path: '/two', component: two }
];
// 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
    router: router,
    // 專門用于定義局部組件的
    components: {
        one: one,
        two: two
    }
});
</script>

==注意點(diǎn)==:
- 如果是嵌套路由(子路由),那么不用寫一級(jí)路徑的地址, 并且也不用寫/

命名視圖

什么是命名視圖?
- 命名視圖和前面講解的具名插槽很像,都是讓不同的出口顯示不同的內(nèi)容
- 命名視圖就是當(dāng)路由地址被匹配的時(shí)候同時(shí)指定多個(gè)出口,并且每個(gè)出口中顯示的內(nèi)容不同
- 示例：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .onepage, .twopage{
        width: 200px;
        height: 200px;
    }
    .onepage{
        background: pink;
    }
    .twopage{
        background: skyblue;
    }
    .nj-active{
        background: skyblue;
    }
</style>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

<div id="app">
    <router-view name="name1"></router-view>
    <router-view name="name2"></router-view>
</div>
<template id="one">
    <div class="onepage">
        <p>我是第一個(gè)界面</p>
    </div>
</template>
<template id="two">
    <div class="twopage">
        <p>我是第二個(gè)界面</p>
    </div>
</template>
<script>
// 1.定義組件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
    {
        path: '/',
        components: {
            name1: one,
            name2: two
        }
    },
];
// 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象
const router = new VueRouter({
    routes: routes,
    linkActiveClass: "ws-active"
});
let vue = new Vue({
    el: '#app',
    // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
    router: router,
    // 專門用于定義局部組件的
    components: {
        one: one,
        two: two
    }
});
</script>

==注意點(diǎn)==：
- 1.和匿名插槽一樣,如果指定了多個(gè)router-view, 那么當(dāng)路由地址被匹配之后,多個(gè)router-view中顯示的內(nèi)容是一樣的
- 2.和具名插槽一樣,如果想同時(shí)顯示多個(gè)不同的組件, 那么可以給出口指定名稱

Watch屬性

1.什么是Watch屬性?
- Watch屬性是專門用于監(jiān)聽數(shù)據(jù)變化的, 只要數(shù)據(jù)發(fā)生了變化,就會(huì)自動(dòng)調(diào)用對(duì)應(yīng)數(shù)據(jù)的回調(diào)方法
- 格式如下：

"$route.path": function (newValue,oldValue)              {
              console.log(newValue, oldValue);
              }

2.Watch監(jiān)聽路由變化
- Watch屬性不僅僅能夠監(jiān)聽數(shù)據(jù)的變化,還能夠監(jiān)聽路由地址的變化,只要路由地址發(fā)生變化, 就會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的回調(diào)函數(shù).
- 在企業(yè)開發(fā)中我們可以通過Watch來判斷當(dāng)前界面是從哪個(gè)界面跳轉(zhuǎn)過來的
- 示例：

<div id="app">
    <input type="text" v-model="num1">
    <span>+</span>
    <input type="text" v-model="num2">
    <span>=</span>
    <input type="text" disabled v-model="res">
</div>
<script>
// 1.定義組件
const one = {
    template: "#one",
};
const two = {
    template: "#two"
};
// 2.定義切換的規(guī)則(定義路由規(guī)則)
const routes = [
    { path: '/one', component: one },
    { path: '/two', component: two }
];
// 3.根據(jù)自定義的切換規(guī)則創(chuàng)建路由對(duì)象
const router = new VueRouter({
    routes: routes
});
let vue = new Vue({
    el: '#app',
    // 4.將創(chuàng)建好的路由對(duì)象綁定到Vue實(shí)例上
    router: router,
    watch: {
        // 可以通過watch監(jiān)聽Model中數(shù)據(jù)的變化, 只要數(shù)據(jù)發(fā)生變化, 就會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的回調(diào)函數(shù)
      num1: function (newValue, oldValue) {
          this.res = parseInt(this.num1) + parseInt(this.num2)
      },
      num2: function (newValue, oldValue) {
          this.res = parseInt(this.num1) + parseInt(this.num2)
      }
    },
    data: {
        num1: 0,
        num2: 0,
        res: 0
    },
    // 專門用于存儲(chǔ)監(jiān)聽事件回調(diào)函數(shù)
    methods: {
    /*   不用watch抛腕，用鼠標(biāo)抬起keyup的寫法
        change1(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        },
        change2(){
            this.res = parseInt(this.num1) + parseInt(this.num2)
        }
    */
    },
    // 專門用于定義局部組件的
    components: {
        one: one,
        two: two
    }
});
</script>

生命周期方法

1.什么是生命周期方法?
- 和webpack生命周期方法一樣,都是在從生到死的特定階段調(diào)用的方法
- PS: 生命周期鉤子 = 生命周期函數(shù) = 生命周期事件
2.Vue生命周期方法分類
- 2.1創(chuàng)建期間的生命周期方法
  - beforeCreate:
    - 在調(diào)用beforeCreate的時(shí)候,僅僅表示Vue實(shí)例剛剛被創(chuàng)建出來。此時(shí)此刻還沒有初始化好Vue實(shí)例中的數(shù)據(jù)和方法,所以此時(shí)此刻還不能訪問Vue實(shí)例中保存的數(shù)據(jù)和方法
  - created:
    - 在調(diào)用created的時(shí)候,是我們最早能夠訪問Vue實(shí)例中保存的數(shù)據(jù)和方法的地方
  - beforeMount:
    - 在調(diào)用beforeMount的時(shí)候,表示Vue已經(jīng)編譯好了最終模板,但是還沒有將最終的模板渲染到界面上
  - mounted:
    - 在調(diào)用mounted的時(shí)候,表示Vue已經(jīng)完成了模板的渲染,表示我們已經(jīng)可以拿到界面上渲染之后的內(nèi)容了
  - 示例：

<div id="app">
    <p>{{msg}}</p>
</div>
<!-- 以下是beforeMount時(shí)內(nèi)存中的狀態(tài)鹅很，而還沒有渲染到頁面上
<div id="app">
    <p>微雙</p>
</div>
-->

<script>
let vue = new Vue({
    beforeCreate:function(){
        // console.log(this.msg); // undefined
        // console.log(this.say); // undefined
    },
    created:function(){
        // console.log(this.msg); // 微雙
        // console.log(this.say);  // 輸出say的函數(shù)
    },
    beforeMount:function(){
        // console.log(document.querySelector("p").innerHTML);  // {{msg}}
        // console.log(document.querySelector("p").innerText);  // {{msg}}
    },
    mounted:function(){
        console.log(document.querySelector("p").innerHTML);  // 微雙
        console.log(document.querySelector("p").innerText);  // 微雙
    },
    el: '#app',
    data: {
        msg: "微雙"
    },
    // 專門用于存儲(chǔ)監(jiān)聽事件回調(diào)函數(shù)
    methods: {
        say(){
            console.log("say");
        }
    }
});
</script>

2.2運(yùn)行期間的生命周期方法
- beforeUpdate:
  - 在調(diào)用beforeUpdate的時(shí)候,表示Vue實(shí)例中保存的數(shù)據(jù)被修改了
  - ==注意點(diǎn)==:只有保存的數(shù)據(jù)被修改了才會(huì)調(diào)用beforeUpdate, 否則不會(huì)調(diào)用
  - ==注意點(diǎn)==:在調(diào)用beforeUpdate的時(shí)候, 數(shù)據(jù)已經(jīng)更新了,但是界面還沒有更新
- updated:
  - 在調(diào)用updated的時(shí)候,表示Vue實(shí)例中保存的數(shù)據(jù)被修改了,并且界面也同步了修改的數(shù)據(jù)了住涉。
  - 也就是說:數(shù)據(jù)和界面都同步更新之后就會(huì)調(diào)用updated
- 示例：

<div id="app">
    <p>{{msg}}</p>
</div>

<script>
let vue = new Vue({
    beforeUpdate:function(){
        // console.log(this.msg);  // 微雙2
        // console.log(document.querySelector("p").innerHTML);  // 微雙
        // console.log(document.querySelector("p").innerText);  // 微雙
    },
    updated:function(){
        console.log(this.msg);  // 微雙2
        console.log(document.querySelector("p").innerHTML);  // 微雙2
        console.log(document.querySelector("p").innerText);  // 微雙2
    },
    el: '#app',
    data: {
        msg: "微雙"  // 修改為微雙2后測試beforeUpdate和updated
    },
    // 專門用于存儲(chǔ)監(jiān)聽事件回調(diào)函數(shù)
    methods: {
        say(){
            console.log("say");
        }
    }
});
</script>

Vue實(shí)例對(duì)象可以看做是一個(gè)大的組件,我們自定義的組件可以看做是一個(gè)小的組件那么大的組件中可以使用的屬性和方法,在小的組件中也可以使用
- 例如: 在Vue實(shí)例中我們可以添加data,methods, 那么在自定義的組件中也可以添加data, methods
- 所以Vue實(shí)例中可以使用生命周期方法,組件中也可以使用生命周期方法

2.3銷毀期間的生命周期方法
- beforeDestroy:
  - 在調(diào)用beforeDestroy的時(shí)候,表示當(dāng)前組件即將被銷毀了
  - ==注意點(diǎn)==:只要組件不被銷毀,那么beforeDestroy就不會(huì)調(diào)用
  - ==beforeDestroy函數(shù)是我們最后能夠訪問到組件數(shù)據(jù)和方法的函數(shù)==
- destroyed：
  - 在調(diào)用destroyed的時(shí)候,表示當(dāng)前組件已經(jīng)被銷毀了
  - ==注意點(diǎn)==:只要組件不被銷毀,那么destroyed就不會(huì)調(diào)用
  - ==不要在這個(gè)生命周期方法中再去操作組件中數(shù)據(jù)和方法==
- 示例：

<div id="app">
    <button @click="change">切換</button>
    <!--通過v-if來切換, 會(huì)直接刪除和重新創(chuàng)建-->
    <one v-if="isShow"></one>
</div>
<template id="one">
    <div>
        <p>組件</p>
    </div>
</template>
<script>
    Vue.component("one", {
        template: "#one",
        data: function(){
            return {
                msg: "微雙"
            }
        },
        methods: {
            say(){
                console.log("say");
            }
        },
        beforeDestroy: function(){
            console.log("beforeDestroy");  // beforeDestroy
            console.log(this.msg);  // 微雙
            console.log(this.say);  // say函數(shù)
        },
        destroyed: function(){
            console.log("destroyed");  // destroyed
        }
    });
    let vue = new Vue({
        el: '#app',
        data: {
            isShow: true,
        },
        methods: {
            change(){
                this.isShow = !this.isShow;
            }
        }
    });
</script>

Vue-特殊特性

1.Vue特殊特性
- Vue特點(diǎn):數(shù)據(jù)驅(qū)動(dòng)界面更新,無需操作DOM來更新界面
- 也就是說Vue不推薦我們直接操作DOM,但是在企業(yè)開發(fā)中有時(shí)候我們確實(shí)需要拿到DOM操作DOM裆站。那么如果不推薦使用原生的語法獲取DOM, 我們應(yīng)該如何獲取DOM?
- 在Vue中如果想要拿到DOM元素我們可以通過ref來獲取
2.ref使用
- 2.1在需要獲取的元素上添加ref屬性.
  - 例如: <p ref="mypp">我是段落</>
- 2.2在使用的地方通過this.$refs.xxx獲取
  - 例如 this.$ref.myppp
3.ref特點(diǎn)
- ref添加到元素DOM上, 拿到的就是元素DOM
- ref添加到組件上, 拿到的就是組件

獲取元素和組件
- 如果是通過原生的語法來獲取元素,無論是原生的元素還是自定義的組件,拿到的都是原生的元素
  - 并且VUE官方并不推薦我們這樣獲取
- 在Vue中如果想獲取原生的元素或者獲取自定義的組件, 可以通過ref來獲壤锰薄（vue推薦）
  - ==注意點(diǎn)==
    - ref如果是添加給元素的元素,那么拿到的就是元素的元素
    - ref如果是添加給自定義的組件,那么拿到的就是自定義的組件
示例：

<div id="app">
    <button @click="myFn">我是按鈕</button>
    <p ref="myppp">我是原生的DOM</p>
    <one id="myOne" ref="myOne"></one>
</div>
<template id="one">
    <div>
        <p>我是組件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one",
    data: function(){
        return {
            msg: "微雙"
        }
    },
    methods: {
        say(){
            console.log("say");
        }
    },
});
let vue = new Vue({
    el: '#app',
    methods: {
        myFn(){
            // VUE官方并不推薦我們這樣通過原生的語法來獲取元素
            // console.log(document.querySelector("p"));
            // console.log(document.querySelector("#myOne"));

            console.log(this.$refs);
            console.log(this.$refs.myppp);
            console.log(this.$refs.myOne);
            console.log(this.$refs.myOne.msg);
            console.log(this.$refs.myOne.say);
        }
    }
});
</script>

組件渲染方式

1.Vue渲染組件的兩種方式
- 1.1先定義注冊(cè)組件,然后在Vue實(shí)例中當(dāng)做標(biāo)簽來使用
- 1.2先定義注冊(cè)組件,然后通過Vue實(shí)例的render方法來渲染
- 示例：

// 第一種 在Vue實(shí)例中當(dāng)做標(biāo)簽來使用
<div id="app">
    <one></one>  // 輸出結(jié)果為one的組件展示在vue實(shí)例中
</div>
<template id="one">
    <div>
        <p>我是組件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one"
});
let vue = new Vue({
    el: '#app'
});
</script>

// 第二種 通過Vue實(shí)例的render方法來渲染
<div id="app">    // 輸出結(jié)果為vue實(shí)例被One這個(gè)組件全覆蓋
</div>
<template id="one">
    <div>
        <p>我是組件</p>
    </div>
</template>
<script>
Vue.component("one", {
    template: "#one"
});
let vue = new Vue({
    el: '#app',
    render: function(createElement){
        let html = createElement("one");
        return html;
    }
});
</script>

2.兩種渲染方法的區(qū)別
- 1.1當(dāng)做標(biāo)簽來渲染,不會(huì)覆蓋Vue實(shí)例控制區(qū)域
- 1.2通過render方法來渲染,會(huì)覆蓋Vue實(shí)例控制區(qū)域