<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <title>Vue入門之extend全局方法</title>
? <script src="https://unpkg.com/vue/dist/vue.js"></script>
? <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
? <style>
? ul, li { list-style: none; }
? ul { overflow: hidden; }
? li { float: left; width: 100px; }
? h2 { background-color: #903;}
? </style>
</head>
<body>
? <div id="app">
? ? <top-bar> </top-bar>
? ? <hr>
? ? ? <p>email to: {{ email }}</p>
? ? <hr>
? ? <router-view class="view one"></router-view>
? ? <footer-bar></footer-bar>
? </div>
? <script>
? ? var topbarTemp = `
? ? ? <nav>
? ? ? ? <ul>
? ? ? ? ? <li v-for="item in NavList">
? ? ? ? ? ? <router-link :to="item.url">{{ item.name }}</router-link>
? ? ? ? ? </li>
? ? ? ? </ul>
? ? ? </nav>? ? ? ?
? ? `;
? ? // 定義組件：topbar
? ? Vue.component('top-bar', {? ? ? ? ?
? ? ? template: topbarTemp,
? ? ? data: function () {
? ? ? ? return {
? ? ? ? ? NavList: [
? ? ? ? ? ? { name: '首頁', url: '/home'},
? ? ? ? ? ? { name: '產(chǎn)品', url: '/product'},
? ? ? ? ? ? { name: '服務(wù)', url: '/service'},
? ? ? ? ? ? { name: '關(guān)于', url: '/about'}
? ? ? ? ? ]
? ? ? ? }
? ? ? }
? ? });? ? ? ? ? ?
? ? Vue.component('footer-bar', {? // 定義組件 footerbar
? ? ? template: `
? ? ? ? <footer>
? ? ? ? ? <hr/>
? ? ? ? ? <p>版權(quán)所有@flydragon<p>
? ? ? ? </footer>
? ? ? `
? ? });
? ? // 創(chuàng)建home模塊
? ? var home = {
? ? ? template: `<div> <h2>{{ msg }}<h2></div>`,
? ? ? data: function () {
? ? ? ? return { msg: 'this is home view' }
? ? ? }
? ? };
? ? // 創(chuàng)建product 模塊
? ? var product = {
? ? ? template: `<div> <h2>{{ msg }}<h2></div>`,
? ? ? data: function () {
? ? ? ? return { msg: 'this is product view' }
? ? ? }
? ? }
? ? // 創(chuàng)建service 模塊
? ? var service = {
? ? ? template: `<div> <h2>{{ msg }}<h2></div>`,
? ? ? data: function () {
? ? ? ? return { msg: 'this is service view' }
? ? ? }
? ? }
? ? // 創(chuàng)建about 模塊
? ? var about = {
? ? ? template: `<div> <h2>{{ msg }}<h2></div>`,
? ? ? data: function () {
? ? ? ? return { msg: 'this is about view' }
? ? ? }
? ? }
? ? // 定義路由對象
? ? var router = new VueRouter({
? ? ? routes: [
? ? ? ? { path: '/home', component: home },
? ? ? ? { path: '/product', component: product },
? ? ? ? { path: '/service', component: service },
? ? ? ? { path: '/about', component: about }
? ? ? ]
? ? });
? ? // 初始化一個Vue實例
? ? var app = new Vue({? ? ? ?
? ? ? el: '#app',? ? ? ? ? ? ?
? ? ? data: {? ? ? ? ? ? ? ? ?
? ? ? email: 'flydragon@gmail.com'
? ? ? },
? ? ? router: router
? ? });
? </script>
</body>
</html>
