APP
Vue.js
一、Vue.js概述
1. Vue.js介紹
-
Vue.js和Vue相同(讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架
漸進式框架要實現的目標就是方便項目增量開發(即插即用)
2. Vue.js庫的引入方法
-
在HTML頁面使用script標簽引入Vue.js的庫即可使用
遠程CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 本地 <script src="vue.min.js"></script>
3. Vue.js的基本組成
-
Vue.js的基本組成
-
標簽內容中：插值表達式
{{}}作用：通常用來獲取Vue實例中定義的各個數據(data)
使用場景：可以作為div標簽的內容
標簽屬性中不能使用插值表達式
-
Vue實例中：掛載點(element)
el:'xxx'作用：定義Vue實例掛載的元素節點，表示Vue接管該區域，Vue會管理el選項命中的元素及其內部元素
使用場景：一般寫在Vue實例中，xxx為選擇器
el選擇掛載點時，建議使用id選擇器
-
Vue實例中：數據對象
data:{xxx}作用： Vue中用到的數據定義在data中
使用場景：一般寫在Vue實例中，xxx可以是定義的不同類型數據
data中的類型
- 普通
key:value，value可以是數字、字符串、布爾值 - 對象類型數據(value是
{}，在{}中可以包含多組普通key:value) - 數組類型(value是
[]，在[]中包含多個value)
- 普通
-
Vue實例中：方法
methods:{xxx}作用：在
{}中可以包含多組方法定義方法名:function(){}使用場景：一般寫在Vue實例中，其中在一個方法的定義中可以使用this獲取當前實例數據對象data中的某字段的value，獲取后的字段可以看作是一個全局變量，可以在多個方法的定義中對其value進行改變
-
Vue實例中的其他屬性
- computed
- filters
- watch
- components
-
示例Code
<body> <div id="app"> <!-- {{}} 雙括號是 VUE 中的差值表達式,將表達式的值輸出到 HTML 頁面 --> {{name}} <br> {{student.name}} {{student.age}} <ul> <li>{{names[0]}}</li> <li>{{names[1]}}</li> <li>{{names[2]}}</li> </ul> </div> </body> <script> var VM = new Vue({ // 定義 Vue 實例掛載的元素節點,表示 vue 接管該 div el:"#app", // 定義 model 模型數據對象 data:{ name:"hello, how are you doing", // 對象類型 student: { name: "Jeff", age: "18" }, // 數組類型 names: ["Kim", "Chris", "Jack"] } }) </script>
-
4. Vue.js的特點
-
Vue.js聲明式渲染的好處
聲明數據，Vue幫我們將數據渲染到HTML，將數據和DOM分離
使用jQuery將數據渲染到HTML有時需要將數據和標簽進行拼接，這種方式將會影響程序執行效率
在Vue中不需要考慮如何更改DOM元素, 重點放在更改數據, 數據更新之后, 使用數據的那個元素會同步更新
二、Vue.js常用指令
1. 指令概述
- 指令是帶有
v-前綴的特殊屬性，通過指令來操作DOM元素（HTML標簽）
2. v-text (獲取data中的數據)
-
作用: 獲取data中的數據，設置標簽的內容（類似用插值表達式）
v-text與插值表達式的區別：
若v-text所在的標簽中有內容，v-text 獲取data數據，設置標簽內容，會覆蓋當前標簽的內容
插值表達式會將標簽的內容拼接到v-text獲取的內容之后
-
v-text的value中可以使用運算符
+拼接額外內容（拼接內容支持數字或字符串） -
示例Code
<body> <div id="app"> <h1>{{message}}</h1> <!-- 使用插值表達式,不會覆蓋 --> <h1>{{message}}golang</h1> <!-- v-text 獲取data數據,設置標簽內容,會覆蓋之前的內容體--> <!-- 拼接字符串 --> <h2 v-text="message+1">golang</h2> <h2 v-text="message+'abc'"></h2> </div> </body> <script> var VM = new Vue({ el: "#app", data: { message: "Java Developer" } }) </script>
2. v-html (設置標簽的 innerHTML)
-
作用： 設置元素的 innerHTML，可以向當前的標簽中寫入新的標簽
與v-text和插值表達式一樣可以獲取data中的數據，前兩種僅僅是獲取數據，v-html可以獲取整個標簽
-
使用場景：
當data數據中某個key對應的value是帶鏈接的a標簽時，可以將屬性v-html指定屬性值為這個數據的key
-
示例Code
<body> <div id="app"> <!-- 獲取普通文本 --> {{name}} <h1 v-text="name"></h1> <h1 v-html="name"></h1> <!-- 設置元素的innerHTML --> <h1 v-html="url"></h1> </div> </body> <script> var VM = new Vue({ el: "#app", data: { name: "JavaScript Developer", url: "<a href='http://www.baidu.com'>baidu</a>" } }) </script>
3. v-on (為標簽綁定事件)
-
作用：為元素綁定事件, 比如:
v-on:click="方法名"，可以簡寫為@click="方法名"綁定的方法定義在 Vue實例的, methods屬性中定義
-
事件綁定方法，可以傳入自定義參數（定義方法時,需要定義形參,來接收實際的參數）
-
事件的后面跟上
.修飾符可以對事件進行限制，如.enter可以限制觸發的按鍵為回車 -
示例Code
Vue實例methods定義的方法中，使用this代表當前實例的data數據對象來調用當前實例data中的字段對應的value
<body> <div id="app"> <!-- 單擊事件 --> <input type="button" value="f1 click here" v-on:click="f1"> <!-- 單擊事件省略寫法 --> <input type="button" value="f2 click here" @click="f2"> <!-- 雙擊事件 --> <input type="button" value="f1 double click" @dblclick="f1"> <!-- 雙擊事件調用方法并傳參 --> <input type="button" value="hello double click" @dblclick="hello(1, 'a')"> <!-- 輸入后按下回車調用方法hi --> <input type="text" @keyup.enter="hi"> <h2 @click="f1">{{name}}</h2> </div> </body> <script> var VM = new Vue({ el: "#app", data: { name: "Jeff", hobby: "hiking" }, methods: { f1: function() { alert("123!") }, f2: function() { alert(this.name) console.log(this.hobby) }, hi: function() { alert("hi") }, hello: function(p1, p2) { alert(p1+p2) } }, }) </script>
4. v-show (切換內容顯示狀態)
-
作用：根據布爾值，切換元素內容(可以是h1、img標簽等)的顯示狀態（值為true顯示, 為false則隱藏），數據改變之后,顯示的狀態會同步更新
-
原理：是修改元素的display屬性，實現顯示或者隱藏
-
使用方法：v-show的屬性值設置為Vue實例數據對象data中的值為布爾的字段名
-
示例Code
<body> <div id="app"> <h1 v-show="isShow">Hi, How are you doing?</h1> <button v-on:click="f1">click here</button> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow: true }, methods: { f1: function(){ this.isShow = !this.isShow; } } }) </script>
5. v-if (切換標簽的顯示狀態)
-
作用：作用同v-show，根據布爾值切換元素的顯示狀態
-
原理：通過操作DOM元素（隱藏整個當前標簽），來切換顯示狀態，效率較低
-
使用場景：頻繁切換使用v-show，反之使用v-if
-
示例Code
<body> <div id="app"> <h1 v-if="isShow">Have a good day</h1> <button v-on:click="f1">click here</button> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow: true }, methods: { f1: function(){ this.isShow = !this.isShow; } } }) </script>
6. v-bind (為標簽綁定屬性)
-
作用：標簽屬性中不能使用插值表達式，需要使用v-bind為標簽綁定屬性
-
使用方法：完整寫法
v-bind:屬性名，可以簡寫為:屬性名 -
示例Code:
<body> <div id="app"> <!-- 使用v-bind設置src屬性值 --> <img v-bind:src="imgSrc" > <!-- v-bind簡寫 設置src屬性值和設置title屬性值 --> <img :src="imgSrc" :title="imgTitle" > <!-- 設置class --> <div v-bind:style="{fontSize: size + 'px'}">v-bind</div> <div :style="{fontSize: size + 'px'}">v-bind</div> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ imgSrc:"./img/icon01.jpg", imgTitle:"image01", size:100 } }) </script>
7. v-for (遍歷數組生成列表項)
-
作用：根據數據生成列表結構
-
數組經常和 v-for結合使用，數組有兩個常用方法:
push()向數組末尾添加一個或多個元素shift()把數組中的第一個元素刪除 -
數組的長度可以進行動態的變化，會同步更新到頁面上，是響應式的
-
示例Code
<body> <div id="app"> <input type="button" value="add" v-on:click="f1"> <input type="button" value="remove" v-on:click="f2"> <!-- 對普通數組進行遍歷 --> <ul> <li v-for="(item, index) in arr"> {{index}} city: {{item}} </li> </ul> <!-- 對對象數組進行遍歷 --> <ul> <li v-for="p in persons"> {{p.name}} </li> </ul> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ // 普通數組 arr:["Detroit", "Chicago", "San Francisco"], // 對象數組 persons:[ {name: "Jeff"}, {name: "Lucy"}, {name: "Helen"} ] }, methods: { f1: function(){ this.persons.push({name: "Chris"}); }, f2: function(){ this.persons.shift(); } }, }) </script>
三、MVVM模式
1. MVVM概述
-
MVVM模式將頁面,分層了 M 、V、和VM ,解釋為：
Model: 負責數據存儲
View: 負責頁面展示
View Model: 負責業務邏輯處理（比如Ajax請求等），對數據進行加工后交給視圖展示
-
示例Code
<body> <div id="app"> <!-- View 視圖部分 --> <h2>{{name}}</h2> </div> </body> <script> //創建的vue實例,就是 VM ViewModel var VM = new Vue({ el: "#app", //data就是MVVM模式中的 model data: { name: "hello", }, }); </script>
2. 數據雙向綁定
-
MVVM提供了數據的雙向綁定
-
單向綁定: 就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新
<body> <div id="app"> <input type="text" v-bind:value="message"> <input type="button" value= "next one" v-on:click="f1"> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"how are you doing" }, methods:{ f1:function(){ this.message="I am good" } } }) </script> -
雙向綁定: 用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定
更新View的情況：
填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，如果此時
MVVM框架可以自動更新Model的狀態，那就相當于我們把Model和View做了雙向綁定
-
-
v-mode指令實現數據雙向綁定
v-model 指令的作用：
- 便捷的設置和獲取表單元素的值
- 綁定的數據會和表單元素值相關聯
- 雙向數據綁定
<body> <div id="app"> <!-- 通過在view輸入內容來修改model --> <input type="text" v-model="message"><br/> <input type="text" v-model="password"><br/> <!-- 按鈕通過調用方法修改model來改變view上的輸出結果 --> <input type="button" value="update" @click="f1"><br/> {{message}}<br/> {{password}}<br/> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"how are you doing", password:"123" }, methods: { f1:function(){ this.message="this item has been changed"; this.password="this item has been changed"; } }, }) </script>
四、axios庫
1. axios概述
-
axios：目前十分流行網絡請求庫, 專門用來發送請求, 其內部還是Ajax, 進行封裝之后使用更加方便
Vue2.0之后建議用axios替換jQuery Ajax
-
作用: 在瀏覽器中可以幫助我們完成Ajax異步請求的發送
Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術, 維護用戶體驗性, 進行網頁的局部刷新
-
axios庫的引入方法
<!-- 官網提供的 axios 在線地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 本地引入axios --> <script src="./js/axios.min.js"></script>
2. axios發送請求
-
GET
-
一般格式
axios.get(URL?key=value&key2=value2).then(function(response){},function(error) {});要訪問接口的URL和key主要由接口文檔提供
then方法中的傳參是回調函數：
function(response){}表示請求后有響應就會觸發function(error) {}表示請求后失敗就會觸發通過回調函數的形參可以獲取響應的內容或者錯誤信息
-
示例Code
接口文檔
請求地址:https://autumnfish.cn/api/joke/list 請求方法:get 請求參數:num(笑話條數,數字) 響應內容:隨機笑話從URL中獲取2條笑話，打印在console上
<body> <input type="button" value="get請求" id="get"/> </body> <script> document.getElementById("get").onclick = function() { axios.get("https://autumnfish.cn/api/joke/list?num=2").then( //請求成功,調用 function(resp) { console.log(resp); }, //請求失敗,調用 function(err) { console.log(err); } ); }; </script>
-
-
POST
-
一般格式
axios.post(URL,{key:value,key2:value2}).then(function(response) {},function(error){})要訪問接口的URL和key主要由接口文檔提供
then方法中的傳參是回調函數：
function(response){}表示請求后有響應就會觸發function(error) {}表示請求后失敗就會觸發通過回調函數的形參可以獲取響應的內容或者錯誤信息
-
示例Code
接口文檔
請求地址:https://autumnfish.cn/api/user/reg 請求方法:post 請求參數:username(用戶名,字符串) 響應內容:注冊成功或失敗通過username進行注冊，將注冊結果打印在控制臺上
<body> <input type="button" value="post請求" id="post"/> </body> <script> document.getElementById("post").onclick = function() { axios.post("https://autumnfish.cn/api/user/reg", {username:"123456"}).then( //請求成功,調用 function(resp) { console.log(resp); }, //請求失敗,調用 function(err) { console.log(err); } ); }; </script>
-
3. axios案例
-
通過Vue+axios 完成一個獲取笑話的案例
接口文檔：
請求地址:https://autumnfish.cn/api/joke 請求方法:get 請求參數:無 響應內容:隨機笑話示例Code
axios回調函數中this指向已經改變, 無法訪問data中的數據
解決方案:
- 將this進行保存, 回調函數中直接使用保存的this即可
- 或者使用ES6的箭頭函數，就可以使用this
<body> <div id="app"> <input type="button" value="get請求" id="get" v-on:click="getJoke()"/> {{message}} </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"default content" }, methods: { getJoke:function() { // 回調函數中無法直接調用this，需要進行保存 var that = this; // 異步訪問 axios.get("https://autumnfish.cn/api/joke").then( function(resp) { console.log(resp); console.log(resp.data); console.log(that.message); that.message = resp.data; }, function(err) { console.log(err); } ); } }, }) </script> -
解決插值表達式閃爍的問題
-
問題：當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼
-
解決方法：可以使用 v-cloak 指令來解決這一問題，可以使頁面加載完成后再進行渲染
-
添加樣式
<style> /* 通過屬性選擇器,設置 添加了v-cloak */ [v-cloak] { display: none; } </style> -
在id為app的div中添加v-cloak
<div class="wrap" id="app" v-cloak>
-
-
五、computed
1. 計算屬性概述
-
作用: 減少運算次數，緩存運算結果，運用于重復相同的計算
-
定義函數也可以實現與 計算屬性相同的效果,都可以簡化運算
不同的是計算屬性是基于它們的響應式依賴進行緩存的，只在相關響應式依賴發生改變時它們才會重新求值
2. 計算屬性案例
-
示例Code
<body> <div id="app"> <!-- 重復調用插值表達式 --> <h1>{{a*b}}</h1> <h1>{{a*b}}</h1> <!-- 調用方法res1 --> <h1>{{res1()}}</h1> <h1>{{res1()}}</h1> <!-- 計算屬性直接使用屬性名 --> <h1>{{res2}}</h1> <h1>{{res2}}</h1> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ a:10, b:20 }, methods:{ res1:function(){ console.log("res1 is running..."); return this.a*this.b; } }, computed:{ res2:function(){ console.log("res2 is running..."); return this.a*this.b; } } }) </script>
六、filter和watch
1. 過濾器概述
- 過濾器常被用來處理文本格式化的操作
- 過濾器使用的兩個位置：插值表達式
{{}}、v-bind表達式中 - 過濾器通過管道(
|)傳輸數據
2. 局部過濾器
-
示例Code
需求: 通過過濾器給電腦價格前面 添加一個符號￥
<body> <div id="app"> <p>price of computer: {{price | addIcon}}</p> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ price:200 }, methods: { }, computed: { }, //局部過濾器 filters: { //處理函數，value = price ，是固定參數，表示"|"前的部分 addIcon(value) { return "￥" + value; } } }) </script>
3. 全局過濾器
-
示例Code
需求: 將用戶名開頭字母大寫
<body> <div id="app"> <p>{{user.name | changeName}}</p> </div> </body> <script> //在創建Vue實例之前 創建全局過濾器 Vue.filter("changeName", function(value){ //將姓名開頭字母大寫,然后再重新拼接 return value.charAt(0).toUpperCase()+value.slice(1); }); var VM = new Vue({ el:"#app", data:{ user:{ name:"tom", } }, }) </script>
4. 偵聽器
-
watch：用于觀察Vue實例上的數據變動，觀察變量的變化，進行相應的處理
-
作用：當有一些數據需要隨其他數據變動而變動時，可以使用偵聽屬性
-
示例Code
<body> <div id="app"> <h2>counter:{{count}}</h2> <input type="button" @click="count++" value="click here"> </div> </body> <script> var VM = new Vue({ el:"#app", data: { count:1 }, watch: { // 監聽器中的方法名必須是data中的指定數據名 count:function(nval, oval) { alert("counter has been changed from : " + oval + " to " + nval); } } }) </script>
5. 偵聽器案例
-
需求: 監聽輸入的firstName和lastName的變化，實時顯示fullName
-
示例Code
<body> <div id="app"> <div>firstName: <input type="text" v-model="userFirstName"></div> <div>lastName: <input type="text" v-model="userLastName"></div> {{userFullName}} </div> </body> <script> var VM = new Vue({ el:"#app", data: { userFirstName:"default_firstName", userLastName:"default_lastName", userFullName:"default_fullName" }, watch: { //監聽，程序在運行的時候，實時監聽事件 userFirstName:function(nval, oval){ this.userFullName = nval + " " + this.userLastName; }, userLastName:function(nval, oval){ this.userFullName = this.userFirstName + " " + nval; } } }) </script>
七、component
1. 組件概述
- 將相同的功能進行抽取，封裝為組件；在組件化開發時，只需要書寫一次代碼，隨處引入即可使用
- 調用全局組件或是局部組件只能是在Vue接管的區域中，以標簽
<組件名></組件名>方式調用
2. 全局組件
-
基本格式
Vue.component("組件名", { template:"<xxx> </xxx>", data(){ return { xxx:"xxx" } }, methods:{ 方法名(){ } } }) -
template模板表示組件的內容，在template模板中, 只能有一個根元素
-
組件中的data 必須是一個函數, 注意與Vue實例中的data區分
在data函數中的return中定義數據的格式與Vue示例中的data相同
-
組件名以小寫開頭，采用短橫線分割命名: 例如 hello-Word
-
示例Code
<body> <div id="app"> <!-- 可以多次使用組件 --> <cony-header></cony-header> <cony-header></cony-header> <cony-header></cony-header> </div> </body> <script> //全局組件位置在Vue實例之外 Vue.component("cony-header", { //組件的命名一般使用短橫線方式, 組件中的模板只能有一個根元素 template: "<div>header component code<h1 @click='hello'>{{msg}}</h1></div>", //組件中的data是一個函數 data() { return { msg: "I am good" } }, methods: { hello(){ alert("hi, how are you doing?"); } }, }); var VM = new Vue({ el:"#app", data:{ }, methods: { }, }); </script>
3. 局部組件
-
基本格式
var VM = new Vue({ el:"app", components: { 組件名: { template: "", data() { return { xxx:"xxx" } } } } }) -
局部組件components指的是寫在Vue實例中的組件，與el、methods、data同級
-
在components中可以定義多個組件
-
示例Code
<body> <div id="app"> <web-msg></web-msg> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ }, methods: { }, components: { "web-msg": { template:"<div><h1>{{msg1}}</h1><h2>{{msg2}}</h2></div>", data() { return{ msg1:"developing...", msg2:"complete!" } } } } }) </script>
4. template和組件分離
-
由于把HTML寫在組件里面不方便也不好看，所以將它們分開寫
-
分離后，瀏覽器會把 HTML 里的 template 標簽過濾掉，所以 template 標簽的內容是不會在頁面中展示的。直到它被 JS 中的 Vue 調用
-
在 html 中，template 標簽一定要有一個 id，因為通過 id 是最直接被選中的。 data 和 methods等參數，全部都要放到 Vue 實例里面寫
-
示例Code
<body> <div id="app"> <web-msg></web-msg> </div> <!-- 將模板寫在HTML中, 給模板指定一個ID --> <template id="temp1"> <div> <button @click="show">{{msg}}</button> </div> </template> </body> <script> var VM = new Vue({ el:"#app", data:{ }, methods: { }, components: { "web-msg": { // 模板內容與使用id選擇器類似 template:"#temp1", data() { return{ msg: "click here" } }, methods: { show() { alert("wait a moment...") } }, } } }) </script>
八、Vue.js的生命周期
1. 生命周期概述
- 每個Vue實例在被創建之前都要經過一系列的初始化過程，這個過程就是Vue.js的生命周期
2. 常用的鉤子函數
-
beforeCreate在Vue對象實例化之前執行 -
created執行時，組件的實例化已經完成，但是DOM還未生成使用場景：定義created函數在DOM生成之前進行查詢操作，created執行完成后顯示DOM
-
beforeMount執行時，模板已經在內存中編輯完成了，但還沒有渲染到頁面中beforeMount執行時，模板的插值表達式原樣顯示，不顯示掛載組件中的內容
-
mounted執行時，模板已經被渲染到頁面，執行完就會顯示頁面的內容 -
beforeUpdate執行時，內存中的數據已經更新了，但是還沒有渲染頁面 -
updated執行時，內存中的數據已經更新了，此方法執行完顯示頁面
九、router庫
1. 路由與SPA概述
- 路由：實現了根據指定的URL分配到對應的處理程序
- SPA(single page web application)：只有一張Web頁面的應用，加載單個HTML頁面并在用戶與應用程序交互時動態局部更新該頁面Web應用程序
3. Vue.js中的路由
-
router：是 Vue.js 官方的路由管理器
-
route：route相當于一條路由，一個路由就對應了一條訪問路徑，route也代表一個路由對象，一個路由對象中包含了path和component兩部分
-
routes：routes代表一組路由，相當于是route數組
-
router-link組件：用于設置一個導航鏈接，切換不同 HTML內容，to 屬性為目標地址， 即要顯示的內容
router-link 是對a標簽的封裝,通過to屬性指定連接
-
router-view組件：路由導航到指定組件后，進行渲染顯示頁面
2. 路由的使用
-
使用步驟：
-
導入Vue.js的router庫
-
定義路由所需的組件（作為下一步中的臨時變量）
-
定義路由（數組），每個路由有兩個部分（path和component）
-
創建路由管理實例VueRouter并初始化實例中的routes屬性
-
創建Vue實例，將router注入到vue實例中，讓整個應用都有路由的功能，使用
$mount()指定掛載點Vue 的$mount()為手動掛載，在項目中可用于延時掛載（例如在掛載之前要進行一些其他操作、判斷等）， 之后要手動掛載上。new Vue時，el和$mount并沒有本質上的不同。
-
添加超鏈接：使用router-link組件來進行導航，to屬性指定鏈接(route中定義的path)，指定的鏈接會跳轉到對應的component下
-
添加路由匹配到組件之后的出口：使用router-view組件
-
-
示例Code
測試效果：
- 打開頁面后
- 單擊go to homePage后
- 單擊go to newsPage后
<body> <div id="app"> <h1>test router</h1> <p> <!-- 使用 router-link 組件來導航,to屬性指定鏈接 --> <router-link to="/home">go to homePage</router-link> <router-link to="/news">go to newsPage</router-link> </p> <!-- 路由的出口, 路由匹配到的組件(頁面)將渲染在這里 --> <router-view></router-view> </div> </body> <script> //1.定義路由所需的組件(作為定義路由中的中間變量) const home = {template: "<div>首頁</div>"}; const news = {template: "<div>新聞</div>"}; //2.定義路由 每個路由都有兩部分 path和component const routes = [ {path: "/home", component: home}, {path: "/news", component: news}, ]; //3.創建router路由器實例,對路由對象routes進行管理 const router = new VueRouter({ routes: routes, }); //4.創建Vue實例, 調用掛載mount函數,讓整個應用都有路由功能 const VM = new Vue({ router }).$mount("#app");//$mount是手動掛載代替el </script>
本文摘自 ：https://www.cnblogs.com/
