Vue的組件和路由

組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。

 

 組件的作用

 

組件是對特點功能代碼(html,css,js)的封裝, 通過組件的名字可以重復利用該組件中的代碼.

1全局組件

 

全局組件的語法:
   Vue.component("自定義標簽的名字",{配置對象})

 

全局組件的特點:
    　　全局組件可以在任何被掛着的標簽中使用.
 　　全局組件的配置對象中必須包含template屬性
代碼演示

 <div id="app"> 2 <myform></myform> 3 </div> 

<!-- script必需使用 type=text/template才可以使用-->
<script id="mytemp2" type="text/template">
    <form action="" method="post">
        名稱:<input type="text" name="username" /> <br />
        密碼:<input type="password" name="password" />  <br />
        <input type="submit" value="提交" />
    </form>
</script>

<script>

    //全局組件(任何掛載點都可以使用)
    Vue.component("myform",{
        //如果模板內容太多，寫在這里會很麻煩
        template:"#mytemp2"
    })

    new Vue({
        el:"#app",
        data:{
            message:"你好啊！"
        }
    })

</script>

局部組件

 局部語法:
   var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部組件的名字1" : {組件的配置對象}
        "局部組件的名字2" : {組件的配置對象}
    }
  });

 

 局部組件的特點
   局部組件只能夠在所掛載的標簽中使用.

 <div id="app"> 2 <myform></myform> 3 </div> 

<template id="mytemp">
    <div>//模板這個是
        名稱:<input type="text" name="username" /> <br />
        密碼:<input type="password" name="password" />  <br />
        <input type="submit" value="提交" @click="say" />
    </div>
</template>

<script>

    new Vue({
        el:"#app",
        data:{
           
        },
        components:{
            //只有當前的掛載點使用
            myform:{
                template:"#mytemp",
                //這個data必需是一個函數
                data() {
                    return {
                        count: 0,
                        message:"我也是一個中國人"
                    }
                },
                methods:{
                    say(){
                        alert("點我啊");
                    }
                }
            }
        }
    })

</script>

路由

 

路由是負責將進入的瀏覽器請求映射到特定的 組件 代碼中。  即決定了由誰(組件)去響應客戶端請求。簡單說路由就是url地址和對應的資源(組件)的映射，通過一個路徑的url地址，可以唯一找到一個資源。路由不包含在vue中，是一個插件，需要單獨下載。

 

官方地址：https://router.vuejs.org/zh/

路由的使用

 

<div id="app">
    <p>
        <!--
            router-link:路由標簽（它就是一個a標簽）
            to="/foo":路徑(到哪里雲)
         -->
        <router-link to="/main">首頁</router-link>
        <router-link to="/singer">歌手</router-link>
        <router-link to="/hot">熱門歌曲</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>


<script>

    // 2. 定義路由
    // 每個路由應該映射一個組件。 其中"component" 可以是
    // 通過 Vue.extend() 創建的組件構造器，
    // 或者，只是一個組件配置對象。
    // 我們晚點再討論嵌套路由。
    var routes = [
        {
            path: '/main',
            component: {
                template:"<h2>我是主頁我怕誰</h2>"
            }
        },
        {
            path: '/singer',
            component: {
                template:"<h2>我是歌手第5季</h2>"
            }
        }, {
            path: '/hot',
            component: {
                template:"<h2>葫蘆娃</h2>"
            }
        }
    ]

    //定義一個路由
    var router = new VueRouter({
        routes // (縮寫) 相當於 routes: routes
    })

    new Vue({
        el:"#app",
        router:router
    })

</script>