Vue模板語法 04

2021-09-25 20:10:49 字數 1477 閱讀 7714

單頁面應用程式:

只有第一次會載入頁面, 以後的每次請求, 僅僅是獲取必要的資料.然後, 由頁面中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只是將對應的...