Vue入門學習

本文轉載自查看原文 2021-04-27 22:15 575

Vue

簡介

Vue：是一套用於構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。

CSS預處理器：提供CSS缺失的樣式層復用機制，減少冗余代碼，提高樣式代碼的可維護性，大大提高前端在樣式上的開發效率。

CSS預處理器：是一種專門的編程語言，進行web頁面樣式設計，通過編譯器轉化為正常的CSS文件，以供項目使用。

常用CSS預處理器：

SASS，基於Ruby，通過服務端處理，功能強大，解析效率高，需要學習Ruby語言。

LESS，基於NodeJS，通過客戶端處理，使用簡單。

TypeScript：

TypeScript是一種由微軟開發的開源、跨平台的編程語言。它是JavaScript的超集，最終會被編譯為JavaScript代碼。
TypeScript擴展了JavaScript的語法，所以任何現有的JavaScript程序可以運行在TypeScript環境中。TypeScript是為大型應用的開發而設計，並且可以編譯為JavaScript。

JavaScript框架：

JQuery：優點是簡化了DOM操作，缺點是DOM操作太頻繁，影響前端性能。
Angular：Google收購的前端框架，由一群Java程序員開發，其特點是將將后台的MVC模式搬到了前端，並增加了模塊化開發的理念，與微軟合作，采用TypeScript語法開發，對后端程序員友好，對前端程序員不太友好。
React：FaceBook出品，一款高性能JS前端框架，其特點是提出了新概念【虛擬DOM】用於減少真實DOM操作，在內存中模擬DOM操作，有效的提升了前端的渲染效率；缺點是復雜，需要額外學習一門JSX語言。
Vue：一款漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發，路由，狀態管理等新特性，其特點是包含了Angular（模塊化）和React（虛擬DOM）的優點。
Axios：前端通信框架，因為Vue的邊界很明確，就是為了處理DOM，不具備通信能力；為此就需要一個通信框架與服務器交互，當然也可以使用JQuery提供的Ajax通信功能。

UI框架

Ant-Design：阿里巴巴出品。基於React的UI框架。
ElementUI，iview，ice：餓了么出品，基於Vue的UI框架。
BootStrap：Twitter推出的用於前端開發的開源工具包。
AmazeUI：一款HTML5跨屏前端框架。

JavaScript構建工具：

Babel：JS 編譯工具，主要用於瀏覽器不支持的ES新特性，比如用於編譯TypeScript。
WebPack：模塊打包器，主要作用是打包，壓縮，合並及按序加載。

MVVM模式的實現者：

Model：模型層，這里表示JavaScript對象。
View：視圖層，這里表示DOM（HTML操作的元素）。
ViewModel：連接視圖和數據的中間件，Vue.js就是MVVC中ViewModel層的實現者。

在MVVC架構中，是不允許數據和視圖直接通信的，只能通過ViewModel來通信，而ViewModel就是定義了一個Observer觀察者。

ViewModel能夠觀察到數據的變化，並對視圖對應的內容進行更新。
ViewModel能夠監聽到視圖的變化，並能通知數據發生改變。

因此，Vue.js就是一個MVVM的實現者，它的核心就是實現了DOM監聽與數據綁定。

為什么使用MVVM：分離視圖和模型

低耦合：視圖可獨立於Model變化和修改，一個ViewModel可綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可復用：可以把一些邏輯視圖放在一個ViewModel中，讓很多View重用這段邏輯視圖。
獨立開發：開發人員可以專注業務邏輯和數據的開發（ViewModel），設計人員專注於頁面設計。
可測試：測試可以針對ViewModel來寫。

第一個Vue程序

IDEA安裝Vue.js插件

demo.html

<body>
<div id="app">
     <h1>{{message}}</h1>
    <span v-bind:title="message">
    鼠標懸停幾秒查看動態綁定的信息
    </span>

</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello,vue!"
        }
    });
</script>

</body>

Vue基本語法

<body>
<!--View層-->
<div id="app">
   <h1 v-if="ok">Yes</h1>
   <h1 v-else>No</h1>
</div>
<div id="app2">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            ok: true
        }
    });
    var vm = new Vue({
        el:"#app2",
        data:{
            type: 'A'
        }
    });
</script>
</body>

<body>
<div id="app">
   <h1 v-for="item in items">{{item.message}}</h1>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
          items:[
              {message: 'zzrr'},
              {message: 'Vue'}
          ]
        }
    });
</script>
</body>

監聽事件

<body>
<!--View層-->
<div id="app">
   <button v-on:click="sayHi">click me</button>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: 'zzr'
        },
        methods: {
            // 方法必須定義在Vue的methods對象中
            sayHi: function () {
                alert(this.message);
            }
        }
    });
</script>
</body>

雙向綁定

文本框綁定

<body>
<!--View層-->
<div id="app">
<!--   輸入的文本：<input type="text" v-model="message">{{message}}-->
    <textarea v-model="message"></textarea>
   輸入文本框內容為：{{message}}

</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
</body>

單選框綁定

<body>
<!--View層-->
<div id="app">

    性別：
    <input type="radio" name="sex" value="男" v-model="zr">男
    <input type="radio" name="sex" value="女" v-model="zr">女
    <p>
        你選中了：{{zr}}
    </p>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            zr: ""
        }
    });
</script>
</body>

下拉框

<body>
<!--View層-->
<div id="app">
    <p>
        下拉框：<select v-model="message">
        <option value="" disabled>--請選擇--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
        value: {{message}}
    </p>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
</body>

組件

<body>
<!--View層-->
<div id="app">
    <zzr v-for="item in items" v-bind:zr="item"></zzr>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 定義一個Vue組件component
    Vue.component("zzr",{
        props: ['zr'],
        template: '<li>{{zr}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","linux","vue"]
        }
    });
</script>
</body>

Axios異步通信

Axios是一個開源的可以用在瀏覽器端和 Node.JS 的異步通信框架，它的主要作用是和Ajax一樣實現異步通信。

Axios：

從瀏覽器中創建XMLHttpRequests
從Node.js創建http請求
支持Peomise API [JS中鏈式編程]
攔截請求和響應
轉換請求數據和響應數據
取消請求
自動轉換 JSON 數據
客戶端支持防御XSRF [跨站請求偽造]

測試

<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    解決閃爍問題-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--View層-->
<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <div>{{info.links}}</div>
    <div>{{info.address.city}}</div>

    <a v-bind:href="info.url">博客園</a>
</div>

<!--    導入Vue.js和axios-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data(){//data方法
          return{
              //請求的返回參數格式，必須和json字符串一樣
              info: {
                  name: null,
                  url: null,
                  address:{
                      city: null,
                      country: null
                  },
                  links:[{
                      name: null,
                      url: null
                  }]
              }
          }
        },
        mounted(){//鈎子函數
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>
</body>

data.json

{
  "name": "zr",
  "url": "https://www.cnblogs.com/zhou-zr",
  "page": "11",
  "address": {
    "city": "武漢",
    "country": "中國"
  },
  "links": [
    {
      "name": "bokeyuan",
      "url": "cnblogs.com/zhou-zr"
    },
    {
      "name": "zrkuang",
      "url": "www.baidu.com"
    }
  ]
}

計算屬性

計算屬性：是一個能夠將計算結果緩存起來的屬性（將行為轉化成了靜態的屬性），可理解為緩存。

demo8.html

<body>
<!--View層-->
<div id="app">
    <p>currentTime()：{{currentTime()}}</p>
    <p>currentTime2：{{currentTime2}}</p>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"hello,zzzrrr!"
        },
        methods: {
            currentTime: function () {//在瀏覽器控制台輸出vm.currentTime()時間戳值會改變
                return Date.now();//返回時間戳
            }
        },
        computed: {//計算屬性   methods，computed方法名不能重，重名會調用methods中的方法
            currentTime2: function () {//在瀏覽器控制台輸出vm.currentTime2時間戳值不會改變
                 this.message;  //增加這一行后控制台vm.message="zzrr"再輸出時間戳值會改變
                return Date.now();//返回時間戳
            }
        }
    });
</script>

</body>

調用方法時，每次需要計算，既然計算就必然產生系統的開銷，如果這個結果不經常變化就可以考慮將這個結果緩存起來。計算結果的主要目的就是將不經常變化的計算結果進行緩存，以節省系統的開銷。

Slot

在Vue.js中我們使用元素作為承載分支內容的出口，稱為插槽，可以應用在組合組件的場景中。

v-bind:簡寫 :

demo9.html

<body>

<!--View層-->
<div id="app">
    <tudo>
        <!--v-bind:簡寫 :-->
        <tudo-title slot="tudo-title" :title="title"></tudo-title>
        <tudo-items slot="tudo-items" v-for="item in tudoItems" :items="item"></tudo-items>
    </tudo>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    Vue.component("tudo",{
        template:
            '<div>\
            <slot></slot>\
            <ul>\
            <slot></slot>\
            </ul>\
            </div>'
    });

    Vue.component("tudo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("tudo-items",{
        props: ['items'],
        template: '<li>{{items}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "周周",
            tudoItems: ["Java","ZZRR","Kuang"],
        }
    });
</script>

</body>

自定義事件

v-on:簡寫 @

this.$emit 自定義事件分發

demo10.html

<body>

<!--View層-->
<div id="app">
    <tudo>
        <tudo-title slot="tudo-title" :title="title"></tudo-title>
        <tudo-items slot="tudo-items" v-for="(item,index) in tudoItems" :items="item" v-bind:index="index" v-on:remove="removeItems(index)"></tudo-items>
    </tudo>
</div>

<!--    導入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>

    Vue.component("tudo",{
        template:
            '<div>'+
            '<slot name="tudo-title"></slot>'+
            '<ul>'+
            '<slot name="tudo-items"></slot>'+
            '</ul>'+
            '</div>'
    });

    Vue.component("tudo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("tudo-items",{
        props: ['items','index'],
        //v-on:簡寫 @
        template: '<li>{{index}}----{{items}} <button @click="remove">刪除</button></li>',
        methods: {
            remove: function (index) {
                //this.$emit  自定義事件分發
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "周周",
            tudoItems: ["Java","ZZRR","Kuang"],
        },
        methods: {
            removeItems: function (index) {
                console.log("刪除了"+this.tudoItems[index]);
                this.tudoItems.splice(index,1); //一次刪除一個元素
            }
        }
    });
</script>

</body>

第一個Vue-cli程序

安裝node.js(官網下載64位的安裝包，直接安裝到自己指定目錄)
cmd以管理員打開，node-v；npm-v分別輸入查看版本
安裝淘寶鏡像加速器，npm install cnpm -g

安裝vue-cli，輸入cnpm install vue-cli -g
輸入vue list，查看可以基於哪些模板創建 vue 應用程序，通常選擇webpack

新建一個項目文件夾，cmd進入該文件夾，輸入vue init webpack myvue(一路no即可)

進入vue項目中 cd myvue，再執行npm install
npm run dev啟動項目

可輸入以上地址訪問，ctrl+c 終止

webpack學習使用

webpack是一個現代JavaScript應用程序的靜態模塊打包器（model bundler），當webpack處理應用程序時，它會遞歸的構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將這些模塊打包成一個或者多個包（bundle）。

cmd以管理員啟動：

npm install webpack -g
npm install webpack-cli -g

測試安裝成功：

webpack -v
webpack-cli -v

項目包(webpack-study)下modules文件夾下

hello.js

//暴露一個方法
exports.sayHi = function () {
    document.write("<h1>zzzrrr</h1>")
};

(webpack-study)/modules/main.js

var hello = require("./hello");
hello.sayHi();

項目包(webpack-study)下webpack.config.js

module.exports = {
    entry: "./modules/main.js",
    output:{
        filename: "./js/bundle.js",
    }
};

打包

管理員cmd進入到(webpack-study)下，webpack打包，webpack --watch熱部署（選一個即可）。

項目包下index.html

<body>
<script src="dist/js/bundle.js"></script>
</body>

Vue-Router路由

Vue-Router是Vue.js官方的路由管理器，它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌，包含的功能有：

嵌套的路由/視圖類
模塊化的，基於組件的路由配置
路由參數，查詢，通配符
基於Vue.js過渡系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的CSS class的連接
HTML5歷史模式或hash模式，在IE9中自動降級
自定義的滾動條行為

項目目錄下：npm install vue-router --save-dev

src/components/Content.vue

<template>
  <h1>內容頁</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

src/components/Main.vue

<template>
  <h1>首頁</h1>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

src/components/Zzr.vue

<template>
  <h1>ZZRR</h1>
</template>

<script>
export default {
  name: "Zzr"
}
</script>

<style scoped>

</style>

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Content from "../components/Content";
import Main from "../components/Main";
import Zzr from "../components/Zzr";

//安裝路由
Vue.use(VueRouter);

//配置導出路由

export default new VueRouter({
  routes: [
    {
      //路徑
      path: '/content',
      name: 'content',
      //跳轉的組件
      component: Content
    },
    {
      //路徑
      path: '/main',
      name: 'content',
      //跳轉的組件
      component: Main
    },
    {
      //路徑
      path: '/zzr',
      name: 'content',
      //跳轉的組件
      component: Zzr
    },
  ]
});

src/App.vue

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <router-link to="/main">首頁</router-link>
    <router-link to="/content">內容頁</router-link>
    <router-link to="/zzr">Zzr</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</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;
}
</style>

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'  //自動掃描里面的路由配置
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

項目下執行 npm run dev，然后訪問。

vue+elementUI

創建工程步驟

創建工程

vue init webpack hello-vue

cd hello-vue

安裝

npm install vue-router --sava-dev

安裝

npm i element-ui -S

安裝依賴

npm install

安裝SASS加載器

cnpm install sass-loader node-sass --save-dev

啟動測試

npm run dev

解釋說明：

npm install moduleName：安裝模塊到項目目錄下。

npm install -g moduleName：-g 安裝模塊到全局，具體安裝到哪個位置，要看 npm config prefix 的位置。

npm install --save moduleName：--save 的意思值將模塊安裝到項目目錄下，並在package文件的 dependencies 節點寫入依賴，-S為該命令的縮寫。

npm install --save-dev moduleName：--save-dev 的意思值將模塊安裝到項目目錄下，並在package文件的 devDependencies 節點寫入依賴，-D為該命令的縮寫。

搭建項目，結構目錄如下：

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">歡迎登錄</h3>
      <el-form-item label="賬號" prop="username">
        <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登錄</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="溫馨提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>請輸入賬號和密碼</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: '',
        password: ''
      },

      // 表單驗證，需要在 el-form-item 元素中增加 prop 屬性
      rules: {
        username: [
          {required: true, message: '賬號不可為空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密碼不可為空', trigger: 'blur'}
        ]
      },

      // 對話框顯示和隱藏
      dialogVisible: false
    }
  },
  methods: {
    onSubmit(formName) {
      // 為表單綁定驗證功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 使用 vue-router 路由到指定頁面，該方式稱之為編程式導航
          this.$router.push("/main");
        } else {
          this.dialogVisible = true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
</style>

App.vue

<template>
  <div id="app">
    <h1>App</h1>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from "../views/Main"

Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

App.vue

<template>
  <div id="app">
    <h1>App</h1>
  <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',

}
</script>

main.js

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

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(ElementUI);
new Vue({
  el: '#app',
  router,
  render: h => h(App), //Element
})

執行npm run dev后，訪問http://localhost:8080/#/login

注意如果打包發布失敗：在pakage.json中降低sass版本為"sass-loader": "^7.3.1",

如果出現：

執行 npm uninstall node-sass 卸載

再安裝 cnpm install node-sass@4.14.1

最后：npm run dev

嵌套路由

嵌套路由又稱子路由，在實際應用中，通常由多層嵌套的組件而成，同樣的，URL中各段動態路徑也按某種結構對應嵌套各層組件。

在上一個項目基礎下增加user文件夾

List.vue

<template>
  <h1>用戶列表頁</h1>
</template>

<script>
export default {
  name: "List"
}
</script>

<style scoped>

</style>

Profile.vue

<template>
  <h1>個人信息</h1>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from "../views/Main"

import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,
      //嵌套路由
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },
    {
      path: '/login',
      component: Login,
    }
  ]
});

Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用戶管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--插入的地方-->
                <router-link to="/user/profile">個人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <!--插入的地方-->
                <router-link to="/user/list">用戶列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分類管理</el-menu-item>
              <el-menu-item index="2-2">內容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>個人信息</el-dropdown-item>
              <el-dropdown-item>退出登錄</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <!--在這里展示視圖-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #2acaff;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>

參數傳遞及重定向

方法一

修改Main.vue

<el-menu-item index="1-1">
  <!--插入的地方  name；地址，params：參數  傳參：v-bind -->
  <router-link :to="{name: 'UserProfile',params: {id:1}}">個人信息</router-link>
</el-menu-item>

修改index.js

//嵌套路由
children: [
  {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile},
  {path: '/user/list',component: UserList}
]

修改Profile.vue，接收

<template>
  <!--  所有的元素不能直接在根節點下-->
  <div>
    <h1>個人信息</h1>
    {{$route.params.id}}
  </div>
</template>

方法二

Main.vue和方法一相同

index.js

//嵌套路由
children: [
  {path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props:true},
  {path: '/user/list',component: UserList}
]

修改Profile.vue，接收

<template>
  <!--  所有的元素不能直接在根節點下-->
  <div>
    <h1>個人信息</h1>
    {{id}}
  </div>
</template>

<script>
export default {
  props: ['id'],
  name: "Profile"
}
</script>

<style scoped>

</style>

重定向

index.js中增加

{
  path: '/goHome',
  redirect: '/main',
}

Main.vue中增加

<el-menu-item index="1-3">
  <!--插入的地方-->
  <router-link to="/goHome">回到首頁</router-link>
</el-menu-item>

登錄顯示用戶名：

methods: {
  onSubmit(formName) {
    // 為表單綁定驗證功能
    this.$refs[formName].validate((valid) => {
      if (valid) {
        // 使用 vue-router 路由到指定頁面，該方式稱之為編程式導航
        this.$router.push("/main/"+this.form.username);
      } else {
        this.dialogVisible = true;
        return false;
      }
    });
  }
}

index.js中Main組件上增加 props: true,

path: '/main/:name',
props: true,
component: Main,

Main.vue增加 props:['name'], 接收參數， {{name}} 顯示

 <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>個人信息</el-dropdown-item>
              <el-dropdown-item>退出登錄</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{name}}</span>
        </el-header>
        <el-main>
          <!--在這里展示視圖-->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  props:['name'],
  name: "Main"
}
</script>

測試 http://localhost:8080/#/login 登錄后右上方顯示用戶名

404和路由鈎子

路由模式有兩種：

hash：路徑帶#符號，如 http://localhost:8080/#/login
history：路徑不帶#符號，如 http://localhost:8080/login

index.js中增加 mode: 'history',

export default new Router({
  mode: 'history',
  routes: [
    {
    });

配置404頁面

NotFound.vue

<template>
<div><h1>404,你的頁面走丟了</h1></div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

index.js

import NotFound from "../views/NotFound";
....
//路由中增加
{
      path: '*',
      component: NotFound,
    }

路由鈎子與異步請求

beforeRouteEnter：在進入路由前執行

beforeRouteLeave：在離開路由前執行

Profile.vue

export default {
  props: ['id'],
  name: "Profile",
  beforeRouteEnter:(to, from, next)=>{
    console.log("進入路由之前！");
    next();
  },beforeRouteLeave:(to, from, next)=>{
    console.log("進入路由之后！");
    next();
  },
  methods: {
    getData: function () {
      this.axi
    }
  }
}

參數說明：

to：路由將要跳轉的路徑信息
from：路徑跳轉前的路徑信息
next：路由的控制參數
- next() 跳入下一個頁面
- next('/path') 改變路由的跳轉方向，使其跳到另一個路由
- next(false) 返回原來的界面
- next((vm)=>{}) 僅在beforeRouteEnter中可用，vm是組件實例

在鈎子函數中使用異步請求：

安裝axios：cnpm install axios -s （打包失敗使用npm install --save vue-axios或官網npm install --save axios vue-axios）
main.js中引用axios

Profile.vue

<script>
export default {
  props: ['id'],
  name: "Profile",
  beforeRouteEnter:(to, from, next)=>{
    console.log("進入路由之前！");
    next(vm => {
      vm.getData();//進入路由之前執行該方法
    });
  },beforeRouteLeave:(to, from, next)=>{
    console.log("進入路由之后！");
    next();
  },
  methods: {
    getData: function () {
      this.axios({
        method: 'get',
        url: 'http://localhost:8080/static/mock/data.josn',
      }).then(function (response) {
        console.log(response);
      })
    }
  }
}
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 學習 Vue ，從入門到放棄 vue學習筆記(一)入門 vue+typescript入門學習學習Vue 入門到實戰——學習筆記學習Vue 入門到實戰——學習筆記（二） 2019vue學習視頻(入門到精通) Vue快速入門學習筆記(更新ing) vue.js學習之入門實例新手入門指導：Vue 2.0 的建議學習順序 VUE入門