vue資料雙向繫結 mustache語法

2021-08-27 08:32:20 字數 1873 閱讀 7633

mustache 模板，用於構造html頁面內容。在實際工作中，當同乙個模板中想要呼叫不同的函式來渲染畫面，在已經自定義好了的前提下，可以在渲染頁面時對傳入的引數進行手動判斷。

mustache 的模板語法很簡單，就那麼幾個：

先來乙個簡單demo，親測無bug：
}就是 mustache 的標示符，花括號裡的 data 表示鍵名，這句的作用是直接輸出與鍵名匹配的鍵值，例如：

var tpl = '}';


var res = mustache.render(tpl, data);


document.write(res);


//輸出：xiaohua
以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或多次渲染，例如改寫下 demo 中的 tpl：

var tpl = '} },},}


}';var res = mustache.render(tpl, data);


document.write(res);


//輸出：female, 22, reading
注意：如果} }中的 data 值為 null, undefined, false；則不渲染輸出任何內容。

該語法與} }類似，不同在於它是當 data值為 null, undefined, false 時才渲染輸出該區塊內容。

var tpl = '} 沒找到nothing鍵名就會渲染這段 }';


var res = mustache.render(tpl, data);


document.write(res);


//輸出：沒找到nothing鍵名就會渲染這段
}表示列舉，可以迴圈輸出整個陣列，例如：

var tpl = '}  }';


var res = mustache.render(tpl, data);


document.write(res);


//輸出: ch en math physics
以>開始表示子模組，如}；當結構比較複雜時，我們可以使用該語法將複雜的結構拆分成幾個小的子模組，例如：

var tpl = "


";var partials = }}


}}}"


};var res = mustache.render(tpl, data, partials);


document.write(res);


//輸出：


// female


// 22


// reading
}輸出會將等特殊字元轉譯，如果想保持內容原樣輸出可以使用}}，例如：

var tpl = '} }}


}'var res = mustache.render(tpl, data);


document.write(res);


console.log(typeof(data.msg.age));//控制台列印age型別為string


//輸出：22
!表示注釋，注釋後不會渲染輸出任何內容。

}


//輸出：
如果頁面上的內容是從後台獲取資料並渲染到頁面上的，我們就可以使用mustache模板了。

值得注意的是，render的資料一定要與鍵名相符合。

vue雙向資料繫結

話術 vue中v model可以實現雙向繫結，其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持，使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令，繫結試圖更新方法 第三部...

vue雙向資料繫結

1.資料響應式原理 主要是利用object.defineproterty 來自定義object的getter,setter function observe value,cb function definereactive obj,key,val,cb set newval class vue da...

vue雙向資料繫結原理

vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...