單頁面應用程式:
只有第一次會載入頁面, 以後的每次請求, 僅僅是獲取必要的資料.然後, 由頁面中js解析獲取的資料, 展示在頁面中
傳統多頁面應用程式:
對於傳統的多頁面應用程式來說, 每次請求伺服器返回的都是乙個完整的頁面
優勢1 ajax
2 錨點的使用(window.location.hash #)
3 hashchange 事件 window.addeventlistener(「hashchange」,function () {})
4 監聽錨點值變化的事件,根據不同的錨點值,請求相應的資料
5 原本用作頁面內部進行跳轉,定位並展示相應的內容
路由思路
1、確保引入vue.vue-router的js依賴
2、首先需要定義元件(就是展示不同的頁面效果)
3、需要將不同的元件放入乙個容器中(路由集合)
4、將路由集合組裝成路由器
5、將路由掛載到vue例項中
6、定義錨點
7、跳轉
1、確保引入vue.vue-router的js依賴
src=
"">
script
>
2、首先需要定義元件(就是展示不同的頁面效果)
/* 定義元件 */
const home = vue.extend();
const about = vue.extend();
3、需要將不同的元件放入乙個容器中(路由集合)
//存放路徑和組建的對應關係
let routes = [,
];
4、將路由集合組裝成路由器
//組裝路由器
let router = new vuerouter();
5、將路由掛載到vue例項中
new vue(;
}});
6、定義錨點
>
"/home"
replace
>
go to homerouter-link
>
"/about"
>
go to aboutrouter-link
>
li>
7、跳轉
>
>
router-view
>
li>
"/home" replace>go to home<
/router-link>
展示如下: 04vue 模板語法 指令
指令 directives 是帶有v 字首的特殊屬性。即 vue給html元素增加了一些自定義屬性,這些自定義是屬性是以 v 開頭的屬性 v text 更新元素的 textcontent。如果要更新部分的 textcontent 需要使用 插值。v html 更新元素的 innerhtml v sh...
VUE 模板語法
message span 雙大括號裡面的內容會被替換成msg的變數值,在msg變數值改變的時候會自動更新html裡的內容 只輸出純文字文字,不會有html效果,為了輸出html需要用到v html指令 using mustaches p using v html directive v html r...
Vue模板語法
插值v html指令 我們可以在js裡自定義html 屬性v bind 簡寫 我們可以可以指定標籤的一些屬性給它們賦值,還有v model也是賦值,但是它會影響整個所有它定義的那個資料,而不只是乙個 v bind 與v model的區別 v model是做資料雙向繫結的指令 v bind只是將對應的...