第6章:vue-router,vue-cli和單檔案元件

阿新 • • 發佈：2021-12-21

　　四，vue-router路由

　　1.簡介

　　使用Vue.js開發SPA（Single Page Application）單頁面應用

　　根據不同url地址，顯示不同的內容，但顯示在同一個頁面中，稱為單頁面應用

　　參考官網：https://router.vuejs.org/zh/

　　下載

　　使用cnpm下載

cnpm install [email protected] -S

　　下載後的js檔案在當前目錄下

node_modules/vue-router/dist

　　2.基本用法

　　html

<div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/news">新聞</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
        </div>
    </div>

　　JavaScripts

<script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var News={
            template:'<h3>我是新聞</h3>'
        }
        // 2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
        ]
        // 3.建立路由例項
        const router=new VueRouter({
            // routes //簡寫相當於routes:routes
            routes,
            // mode:'history'
        });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>

　　完整程式碼如下day03/09.html

　　注意：引入vue.js需要在vue-router.js之前，否則控制檯報錯，原因不明

Unknown custom element: <router-link>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由基本用法</title>
    <style>
        .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/news">新聞</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
        </div>
    </div>
    <script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var News={
            template:'<h3>我是新聞</h3>'
        }
        // 2.配置路由
        const routes=[
            {path:'/home',component:Home},
            {path:'/news',component:News},
        ]
        // 3.建立路由例項
        const router=new VueRouter({
            // routes //簡寫相當於routes:routes
            routes,
            // mode:'history'
        });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

　　頁面顯示，點選主頁顯示我是主頁，新聞顯示我是新聞

　　注意到點選連結會自動加#,如果不想看到這個#修改路由例項模式mode預設為hash修改為history

 const router=new VueRouter({
            // routes //簡寫相當於routes:routes
            routes,
            mode:'history'
        });

　　頁面顯示

　　點選主頁或者新聞也是有預設樣式的，可以通過控制檯檢視到　　

　　修改樣式，在<head>標籤內增加以下程式碼

<style>
        .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
</style>

　　頁面顯示

　　如果覺得這個樣式名稱太複雜也可以修改樣式名

 // 3.建立路由例項
        const router=new VueRouter({
            // routes //簡寫相當於routes:routes
            routes,
            // mode:'history'
            linkActiveClass:'active' //更新活動連結的class類名
 });

　　同時樣式定義的時候也修改對應的名稱

<style>
        /* .router-link-active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        } */
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>

　　預設開啟頁面是不顯示主頁或者新聞的需要點選才顯示，可以通過路由重定向，例如開啟首頁顯示Home或者在沒有找到路由的情況下跳轉至Home

　　修改配置路由程式碼

 // 2.配置路由
    const routes=[
        {path:'/home',component:Home},
        {path:'/news',component:News},
       {path:'*',redirect:'/home'} //重定向
     ]

　　頁面顯示，預設顯示Home，如果隨意寫一個沒有的路由也會跳到Home

　　3.路由巢狀和引數的傳遞

　　路由巢狀：路由對應的連結下還有連結

　　把上面設定的路由新聞處改成使用者，使用者下面又有兩個連結分別為使用者登入和使用者註冊

　　day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由巢狀和引數的傳遞</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/user">使用者</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
        </div>
    </div>
    <template id='user'>
        <div>
            <h3>使用者資訊</h3>
            <ul>
                <li><router-link to="/user/login">使用者登入</router-link></li>
                <li><router-link to="/user/regist">使用者註冊</router-link></li>
            </ul>
             <!-- 路由匹配到的元件將渲染在這裡,需要設定否則不渲染，點選無顯示 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>使用者登入...</h4>'
        }
        var Regist={
            template:'<h4>使用者註冊...</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.建立路由例項
            const router=new VueRouter({
                // routes //簡寫相當於routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活動連結的class類名
            });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

　　解析：在設定路由下新加關鍵字children對應巢狀的路由，寫法是一致的

　　頁面顯示

　　上面寫法是把標籤<router-link>寫入到標籤<li>內，也可以直接寫<router-link>標籤通過關鍵字tag來指定包含的標籤型別為<li>,以下為簡化寫法，效果是一樣的

                <!-- <li><router-link to="/user/login">使用者登入</router-link></li>
                <li><router-link to="/user/regist">使用者註冊</router-link></li> -->
                <router-link to="/user/login" tag='li'>使用者登入</router-link>
                <router-link to="/user/regist" tag='li'>使用者註冊</router-link>

　　傳遞引數的兩種形式

　　a.查詢字串：login?name=tom&pwd=123

　　b.rest風格url：regist/alice/456

　　傳遞引數獲取示例，修改程式碼，演示兩種傳遞引數及如何獲取傳遞的引數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由巢狀和引數的傳遞</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/user">使用者</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
        </div>
    </div>
    <template id='user'>
        <div>
            <h3>使用者資訊</h3>
            <ul>
                <!-- <li><router-link to="/user/login">使用者登入</router-link></li>
                <li><router-link to="/user/regist">使用者註冊</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>使用者登入</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>使用者註冊</router-link>
            </ul>
             <!-- 路由匹配到的元件將渲染在這裡,需要設定否則不渲染，點選無顯示 -->
            <router-view></router-view>
        </div>
    </template>
    <script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>使用者登入...獲取引數：{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>使用者註冊...獲取引數: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.建立路由例項
            const router=new VueRouter({
                // routes //簡寫相當於routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活動連結的class類名
            });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router  // 注入路由
        });
    </script>
</body>
</html>

　　解析

　　注意：使用方式1直接傳遞即可，使用方式2為了不讓瀏覽器認為傳遞的引數是路由需要定義，傳遞引數的方式，如下

　　頁面顯示

　　4.路由例項的方法

　　router.push()新增路由，功能上與<route-link>相同

　　router.replace()替換路由，不產生歷史記錄

　　示例 day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由巢狀和引數的傳遞</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/user">使用者</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
        </div>
        <button @click='push'>新增路由</button>
        <button @click='replace'>替換路由</button>
    </div>
    <template id='user'>
        <div>
            <h3>使用者資訊</h3>
            <ul>
                <!-- <li><router-link to="/user/login">使用者登入</router-link></li>
                <li><router-link to="/user/regist">使用者註冊</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>使用者登入</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>使用者註冊</router-link>
            </ul>
             <!-- 路由匹配到的元件將渲染在這裡,需要設定否則不渲染，點選無顯示 -->
             <div>
                <router-view></router-view>
             </div>
            <hr>
            
        </div>
    </template>
    <script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>使用者登入...獲取引數：{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>使用者註冊...獲取引數: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.建立路由例項
            const router=new VueRouter({
                // routes //簡寫相當於routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活動連結的class類名
            });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router,  // 注入路由
            methods:{
                push(){
                    router.push({path:'home'}); // 新增路由，切換路由
                },
                replace(){
                    router.replace({path:'user'}); // 替換路由，沒有歷史記錄
                },
            }
        });
    </script>
</body>
</html>

　　解析

　　增加兩個按鈕分別呼叫新增路由和替換路由的方法

　　方法如下，分別把路由指向home和user

　　頁面顯示

　　兩者的區別在於替換路由是沒有歷史記錄的即替換路由的上一頁

　　5.路由結合動畫

　　利用之前學的animate.css可以給路由結合動畫，只需要給<router-view></router-view>標籤套在<transition>標籤內即可

　　day03/10.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/animate.css">
    <title>路由巢狀和引數的傳遞</title>
    <style>
          .active{
            font-size: 20px;
            color:#ff7300;
            text-decoration: none;
        }
    </style>
    <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <!-- <script src='js/vue.js'></script> -->
  
</head>
<body>
    <div id='itany'>
        <div>
            <!-- 使用router-link元件來定義導航，to屬性指定連結url  -->
            <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
            <router-link to="/home">主頁</router-link>
			<router-link to="/user">使用者</router-link>
        </div>
        <div>
            <!-- router-view用來顯示路由的內容 -->
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
                <router-view></router-view>
            </transition>   
        </div>
        <button @click='push'>新增路由</button>
        <button @click='replace'>替換路由</button>
    </div>
    <template id='user'>
        <div>
            <h3>使用者資訊</h3>
            <ul>
                <!-- <li><router-link to="/user/login">使用者登入</router-link></li>
                <li><router-link to="/user/regist">使用者註冊</router-link></li> -->
                <router-link to="/user/login?name=tom&pwd=123" tag='li'>使用者登入</router-link>
                <router-link to="/user/regist/alice/456" tag='li'>使用者註冊</router-link>
            </ul>
             <!-- 路由匹配到的元件將渲染在這裡,需要設定否則不渲染，點選無顯示 -->
             <div>
               
                    <router-view></router-view>
               
             </div>
            <hr>
            
        </div>
    </template>
    <script>
        // 1.定義元件
        var Home={
            template:'<h3>我是主頁</h3>'
        }
        var User={
            template:'#user'
        }
        var Login={
            template:'<h4>使用者登入...獲取引數：{{$route.query}}</h4>'
        }
        var Regist={
            template:'<h4>使用者註冊...獲取引數: {{$route.params}}</h4>'
        }
        // 2.配置路由
        const routes=[
            {
                path:'/home',
                component:Home
            },
            
            {
                path:'/user',
                component:User,
                children:[
                    {
                        path:'login',
                        component: Login
                    },
                    {
                        path:'regist/:username/:password',
                        component: Regist
                    },
                ]
            },
            {
                path:'*',
                redirect:'/home'
            } //重定向
        ]
            // 3.建立路由例項
            const router=new VueRouter({
                // routes //簡寫相當於routes:routes
                routes,
                // mode:'history'
                linkActiveClass:'active' //更新活動連結的class類名
            });
        // 4.建立跟例項並將路由掛載到Vue例項上
        new Vue({
            el:'#itany',
            router,  // 注入路由
            methods:{
                push(){
                    router.push({path:'home'}); // 新增路由，切換路由
                },
                replace(){
                    router.replace({path:'user'}); // 替換路由，沒有歷史記錄
                },
            }
        });
    </script>
</body>
</html>

　　解析

　　新增動態進入出去動畫

　　五，單檔案元件

　　1. .vue檔案

　　.vue檔案，稱為單檔案元件，是Vue.js自定義的一種檔案格式，一個.vue檔案就是一個單獨的元件，在檔案內封裝了元件相關的程式碼：html，css，js

　　.vue檔案由三部分組成<template> <style><script>

<template>
    html
</template>

<style>
    css
</style>

<script>
    js
</script>

　　2.vue-loader

　　瀏覽器本身並不認識.vue結尾的檔案，所以必須對.vue檔案載入和解析，此時需要vue-loader

　　類似的loader還有許多，如：html-loader ，css-loader，style-loader,babel-loader等

　　需要注意的是vue-loader是基於webpack的

　　3.webpack

　　webpack是一個前端資源模組化載入器和打包工具，它能夠把各種資源都作為模組來使用和處理

　　實際上，webpack是通過不同的loader將這些資源載入後進行打包，然後輸出打包後的檔案

　　簡單來說，webpack就是一個模組載入器，所有的資源都可以作為模組來載入，最後打包輸出。

　　webpack官網：https://webpack.github.io/

　　webpack版本：v1.x v2.x

　　webpack有一個核心配置檔案：webpack.config.js，必須放在專案的根目錄下

　　4.示例，步驟

　　4.1 建立專案，目錄結構如下：

　　webpack-demo

|index.html
|main.js 入口檔案
|App.vue vue檔案
|package.json 工程檔案
|webpack.config.js webpack配置檔案
|.babelrc Babel配置檔案

　　其他檔案手動建立，package.json可以通過目錄建立初始檔案

cnpm init --yes

　　4.2編寫App.vue

　　每個部分都有一個簡單的內容

<template>
	<div id="itany">
		<h1>welcome to itany</h1>
	
	</div>
</template>

<script>

	console.log(111);

</script>

<style>
	body{
		background-color:#ccc;
	}
</style>

　　4.3安裝相關模組

cnpm install vue -S

　　-S為生產依賴，-D為開發依賴

cnpm init --yes
cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler webpack-cli

　　注意：複製貼上安裝可能會出現字元編碼問題無法安裝，可以手動輸入安裝，安裝後會更新package.json檔案

　　以下程式碼初始化package.json檔案

cnpm init --yes

　　執行完畢以後package.json檔案

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^2.5.0"
  }
}

　　修改了預設的scripts語句，下面語句的意思是環境dev啟動本機的8800埠允許所有主機訪問，注意需要--host 0.0.0.0否則只能是本機訪問

 "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"

　　如果安裝失敗可以使用以下方法重新安裝

rm -rf node_modules
rm -rf package-lock.json
npm cache clear --force
npm install

　　4.5編寫main.js

　　main.js

/**
 * 使用ES6語法引入模板
 */
import Vue from 'vue'
import App from './App.vue'

new Vue({
        el:'#app',
        render:function(h){ //使用render函式渲染元件
                return h(App);
        }
});

　　解析

import Vue from 'vue'

　　會從當前目錄node_modules 查詢模組

　　4.5 編寫webpack.config.js

　　webpack.config.js

module.exports={
        //配置入口檔案
        entry:'./main.js',
        //配置入口檔案輸出位置
        output:{
                path:__dirname, //專案根路徑
                filename:'build.js'
        },
        //配置模組載入器
        module:{
                rules:[
                        {
                                test:/\.vue$/, //所有以.vue結尾的檔案都由vue-loader載入
                                loader:'vue-loader'
                        },
                        {
                                test:/\.js$/, //所有以.js結尾的檔案都由babel-loader載入，除了node_modules以外
                                loader:'babel-loader',
                                exclude:/node_modules/
                        }
                ]
        }
}

　　4.6 編寫.babelrc

　　.babelrc

{
        "presets":[
                ["env",{"module":false}]
        ]
}
~

　　4.7 編寫package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server  --hot --port 8800 --host 0.0.0.0"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^2.5.0"
  }
}

　　4.8 執行測試

 cnpm run dev

　　實際就相當於執行以下命令

webpack-dev-server  --hot --port 8800 --host 0.0.0.0

　　啟動8800埠

　　頁面訪問

　　修改App.vue可以實現熱載入，例如修改以下內容

　　不需要重啟，頁面顯示

　　修改使點選tom修改name屬性

<template>
        <div id="itany">
                <h1>welcome</h1>
                <h2 @click="change">{{name}}</h2>

        <!--    <User></User> -->
        </div>
</template>

<script>

        //匯入模組
        // import User from './components/User.vue'

        // console.log(111);
        export default {
                data(){
                        return {
                                name:'tom'
                        }
                },
                methods:{
                        change(){
                                this.name='湯姆';
                        }
                },
                //components:{
                //      User
                // }
         }
</script>

<style>
        body{
                background-color:#ccc;
        }
</style>

　　頁面顯示

　　開發元件展示一個使用者的資訊

 cat components/User.vue
<template>
        <div class="user">
                <h2>使用者列表</h2>
                <ul>
                        <li v-for="value in users">{{value}}</li>
                </ul>
        </div>
</template>

<script>
        export default {
                data(){
                        return {
                                users:['tom','jack','mike','alice']
                        }
                }
        }
</script>

<style scoped> /* scoped表示該樣式只在當前元件中有效 */
        h2{
                color:red;
        }

　　修改App.vue

# cat App.vue
<template>
        <div id="itany">
                <h1>welcome</h1>
                <h2 @click="change">{{name}}</h2>

        <User></User>
        </div>
</template>

<script>

        //匯入模組
        import User from './components/User.vue'

        // console.log(111);
        export default {
                data(){
                        return {
                                name:'tom'
                        }
                },
                methods:{
                        change(){
                                this.name='湯姆';
                        }
                },
                components:{
                        User
                 }
         }
</script>

<style>
        body{
                background-color:#ccc;
        }
</style>

　　頁面顯示

　　六，vue-cli腳手架

　　1.簡介

　　vue-cli是一個vue腳手架，可以快速搭建專案結構

　　vue-cli本身集成了多種專案模板：

simple 很少使用簡單
webpack 包含ESLint程式碼規範的檢查unit單元測試
webpack-simple 沒有程式碼規範檢查和單元測試
browserify 使用的也比較多
browserify-simple

　　2.示例

　　2.1 安裝vuecli，配置vue命令環境

　　全域性安裝

cnpm install vue-cli -g

　　檢視版本

D:\vue.js\code\day03\webpack-demo>vue --version
2.9.6

　　列出可用的模板

　　2.2 初始化專案，生成專案模板

語法：vue init 模板名 專案名

D:\vue.js\code\day03>vue init webpack-simple vue-cli-demo

　　2.3 進入生成的專案目錄，安裝模組包

cd vue-cli-demo
cnpm install
cnpm run dev

　　在windows下自動開啟瀏覽器

　　生產中將專案打包

cnpm run build // 將專案打包輸出dist目錄，專案上線的話要講dist目錄拷貝到伺服器上

　　　3. 使用webpack模板

vue init webpack vue-cli-demo2

　　ESLint是用來統一程式碼規範和風格的工具，如縮排、空格、符號等，要求比較嚴格

　　eslint規則官網：https://eslint.org/

cnpm install
cnpm run dev 
cnpm run build

　　訪問首頁是一樣的

　　模組化開發

　　初始化

　　在新建的day04執行

D:\vue.js\code\day04>vue init webpack-simple vue-cli-demo

　　1.vue-router模組化

　　安裝vue-router，生產依賴

cnpm install vue-router -S

　　2.編輯main.js　

　　引用vue-router

　　src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

// 使用vue-router
Vue.use(VueRouter);


new Vue({
  el: '#app',
  render: h => h(App)
})

　　修改App.vue

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

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

　　執行　

cd vue-cli-demo
cnpm install
cnpm run dev

　　頁面顯示

　　繼續編輯App.vue增加主頁和新聞連結

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主頁</router-link>
      <router-link to="/news">新聞</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染顯示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

　　在目錄src下新建資料夾components新增Home.vue和News.vue

　　Home.vue

<template>
    <div id="home">
        <h3>這是主頁</h3>
    </div>
</template>

　　News.vue

<template>
    <div id="news">
        <h3>這是新聞</h3>
    </div>
</template>

　　在src下新增路由配置檔案

　　router.config.js

import Home from './components/Home.vue'
import News from './components/News.vue'

export default{
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News
        },
    ]
}

　　在main.js引入注入路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
// 使用vue-router
Vue.use(VueRouter);

// 建立路由例項
const router=new VueRouter(routerConfig);

new Vue({
  el: '#app',
  render: h => h(App),
  // 注入路由
  router
})

　　啟動專案

cnpm run dev

　　頁面顯示

　　列印路由資訊以及監視路由的變化，在App.vue增加以下程式碼

mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由傳送變化，跳轉到：'+newValue.path)
    }
  }

　　列印路由物件以及監視路由如果發生了變化則列印新路由資訊

　　頁面顯示

　　2. axios模組化

　　安裝　　　　

cnpm install axios -S

　　使用axios的兩種方式

　　　　方式1:在每個元件中引入axios

　　　　方式2:在入口檔案main.js全域性引入並新增到Vue的原型中

　　方式1示例

　　App.vue

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主頁</router-link>
      <router-link to="/news">新聞</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染顯示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click='send'>傳送AJAX請求</button>
  </div>
  
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  },
  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由傳送變化，跳轉到：'+newValue.path)
    }
  },
  methods:{
    send(){
      axios.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

　　頁面顯示

　　如果需要在Home元件中引用則需要在Home.vue引入這樣使用不方便

　　使用方式2示例

　　修改入口檔案main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'
// 使用vue-router
Vue.use(VueRouter);

// 建立路由例項
const router=new VueRouter(routerConfig);

// 加入Vue原型，其他元件可以直接引用
Vue.prototype.$http=axios
new Vue({
  el: '#app',
  render: h => h(App),
  // 注入路由
  router
})

　　需要使用axios的地方直接使用this.$http使用，修改App.vue

　　效果是一樣的

　　3.為自定義元件新增事件

　　src/compoents自定義元件 MyButton.vue

<template>
    <button>自定義按鈕</button>
</template>

<style>
    button{
        width:100px;
        height: 30px;
        background-color:#ccc;
        color:red;
    }
</style>

　　在App.vue引入元件並繫結事件send

<template>
  <div id="app">
    {{msg}}
    <h3>
      <router-link to="/home">主頁</router-link>
      <router-link to="/news">新聞</router-link>
    </h3>
    <div> 
      <keep-alive>
        <!-- 渲染顯示 -->
        <router-view> </router-view>
      </keep-alive>
    </div>
    <hr>
    <button @click='send'>傳送AJAX請求</button>
    <MyButton @click.native='send'></MyButton>
  </div>
  
</template>

<script>
// import axios from 'axios'
import MyButton from './components/MyButton.vue'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to itany'
    }
  },
  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function(newValue,oldValue) {
      console.log('路由傳送變化，跳轉到：'+newValue.path)
    }
  },
  methods:{
    send(){
      this.$http.get('https://api.github.com/users/tangyang8942')
      .then(resp=>{
        console.log(resp.data);
      }).catch(err=>{
        console.log(err);
      });
    }
  },
  components:{
    MyButton
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

　　解析

　　注意自定義需要需要加修飾符native監聽元件根元素的原生事件，否則不生效

　　點選按鈕呼叫send方法，和上面例子效果是一樣的

第6章:vue-router,vue-cli和單檔案元件

　　四，vue-router路由　　1.簡介　　使用Vue.js開發SPA（Single Page Application）單頁面應用

vue設計與實現第6章 ref 響應原理筆記

ref 函式實現程式碼 const a = ref(1); function ref(value){ const wrapper = {value} Object.defineProperty(wrapper,\'__v_isRef\',{

HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第6章表格與表單

本教程案例線上演示有路網PC端有路網移動端免費配套視訊教程免費配套視訊教程

Vue Router 的params和query傳參的使用和區別（詳盡）

1.vue之this.$route.query和this.$route.params的使用與區別轉載https://blog.csdn.net/mf_717714/article/details/81945218?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai

區分vue-router的hash和history模式

一、概念　　為了構建 SPA（單頁面應用），需要引入前端路由系統，這也就是 Vue-Router 存在的意義。

MySql 技術內幕 (第6章聚合和旋轉操作)

6.1　聚合 6.1.1　聚合函式 MySQL支援的聚合操作： AVG() BIT_AND() 位運算，與 BIT_OR() 位運算，或

第6章未來的函式：生成器和promise

目錄1. 生成器函式1.1 定義生成器函式1.2 迭代器物件1.3 對迭代器進行迭代1.4 把執行權交給下一個生成器2. 使用生成器2.1 用生成器生成ID2.2 用迭代器遍歷DOM樹3. 與生成器互動3.1 用引數和next方法傳送值3.2向生成器

浙大版《Python 程式設計》題目集第6章函式-1 使用函式求特殊a串數列和

技術標籤：# Python學習筆記python 第6章函式-1 使用函式求特殊a串數列和 def fn(a, n):

浙大版《Python 程式設計》題目集第6章函式-2 使用函式求素數和

技術標籤：# Python學習筆記python 第6章函式-2 使用函式求素數和 import math def prime(p):

淺析vue-router中params和query的區別

技術標籤：Vue 一、引入方式不同 query要用path來引入 this.$router.push({ path: \'test\', query: {

第6章背景和陰影

技術標籤：HTML5網頁設計css3 6.1 背景屬性 6.1.1 背景顏色 ■在使用background-color屬性時，取值可以是顏色關鍵字，如 red 表示紅色；也可以是 RGB（紅、綠、藍），如 RGB(255/0/0) 表示紅色；還可以是十六進

vue-router的安裝和使用

第一種方式（簡單）：新建專案時用 vue-cli 手動選擇 router 安裝。 1、用鍵盤 ↓ 移動選擇第三項“ Manually select features”（手動配置）；

第六章 Jenkins實現vue前端自動部署

一、安裝nodejs #1.nodejs下載地址 https://nodejs.org/dist/ 選擇自己需要的版本下載。這邊選擇版本9.8.0

Stream Processing with Apache Flink中文版-- 第6章基於時間和視窗的操作符

在本章中，我們將介紹用於時間處理和基於時間的操作符(如windows)的DataStream API方法。正如您在“時間語義”中學到的，Flink基於時間的操作符可以應用於不同的時間概念。

vue-router的原理和實現

我之前寫了一半了，居然又沒見了就離譜，從頭開始。 vue-router原理 vue-router是實現了前端路由，也就是URL和UI之間的對映關係，當URL改變時會引起UI更新，但無需重新整理頁面。那麼如何實現前端路由呢，也就是如

VLSI測試方法學和可測試設計第6章掃描路徑法

一，基本的掃描路徑設計二，部分掃描設計 1，隔離的序列掃描設計 2，非序列的掃描設計

計算機網路自頂向下第6章鏈路層和區域網（上）讀書筆記

最近在二刷《計算機網路——自頂向下》做點筆記，加深印象，書不在手邊時也能有個參考。之前的章節會陸續補充。

Java面试第 6 章数据库原理

6.1 SQL 语言的功能有哪些 SQL 是结构化查询语言（Structured Query Language）的缩写。

vue自定義標籤和單頁面多路由的實現程式碼

1. 自定義元件標籤（如在主頁插入頂欄/側邊欄等）比如說要將Header.vue插入Home.vue中顯示：定義好Header.vue，然後在Home.vue的script中匯入Header.vue：

《java併發程式設計實踐》---第6章任務執行

1、概述　　　　1.1、單任務單執行緒順序執行　　　　　　　　糟糕的響應性、吞吐量

第6章:vue-router,vue-cli和單檔案元件

四，vue-router路由

1.簡介

node_modules/vue-router/dist

2.基本用法

3.路由巢狀和引數的傳遞

4.路由例項的方法

5.路由結合動畫

五，單檔案元件

1. .vue檔案

2.vue-loader

3.webpack

4.示例，步驟

4.1 建立專案，目錄結構如下：

4.2編寫App.vue

4.3安裝相關模組

4.5編寫main.js

4.5 編寫webpack.config.js

4.6 編寫.babelrc

4.7 編寫package.json

4.8 執行測試

六，vue-cli腳手架

1.簡介

2.示例

2.1 安裝vue­cli，配置vue命令環境

2.2 初始化專案，生成專案模板

2.3 進入生成的專案目錄，安裝模組包

3. 使用webpack模板

模組化開發

1.vue-router模組化

2.編輯main.js

2. axios模組化

3.為自定義元件新增事件

相關推薦

　　四，vue-router路由

　　1.簡介

　　2.基本用法

　　3.路由巢狀和引數的傳遞

　　4.路由例項的方法

　　5.路由結合動畫

　　五，單檔案元件

　　1. .vue檔案

　　2.vue-loader

　　3.webpack

　　4.示例，步驟

　　4.1 建立專案，目錄結構如下：

　　4.2編寫App.vue

　　4.3安裝相關模組

　　4.5編寫main.js

　　4.5 編寫webpack.config.js

　　4.6 編寫.babelrc

　　4.7 編寫package.json

　　4.8 執行測試

　　六，vue-cli腳手架

　　1.簡介

　　2.示例

　　2.1 安裝vuecli，配置vue命令環境

　　2.2 初始化專案，生成專案模板

　　2.3 進入生成的專案目錄，安裝模組包

　　　3. 使用webpack模板

　　模組化開發

　　1.vue-router模組化

　　2.編輯main.js　

　　2. axios模組化

　　3.為自定義元件新增事件