国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Mustache學習筆記

qylost / 2003人閱讀

摘要：一個返回值渲染后的例那年那夏我是，年齡結果我是那年那夏，年齡的思想的核心是標簽和。從上面的代碼中可以看到定義模板時，使用了這樣的標記，這就是的標簽，只不過它用替代了，以免跟標簽的混淆。

Mustache學習筆記

Mustache 是一款基于javascript 實現的模板引擎,類似于 Microsoft’s jQuery template plugin,但更簡單易用，在前后端分離的技術架構下面，前端模板引擎是一種可以被考慮的技術選型，隨著重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技術已經成為了某種形式上的標配，Mustache 的價值在于其穩定和經典：

主頁：https://github.com/janl/musta...

文檔：https://mustache.github.io/mu...

1.出現的問題
在使用中會有可能在頁面渲染時會出現{{xxx}}這種標簽，雖然會被頁面立即替換掉，但是對于用戶呈現來講，依然不太友好

2.具體使用方式
從git hub上獲取相關的mustache.js文件，在頁面的head標簽內引用Jquery.js 和Mustache.js兩個腳本文件

簡介
3.渲染
渲染形式單一：var view = Mustache.render(template,obj);

參數：一個是模板html，一個是數據源對象。

view：一個返回值（渲染后的html ）

例：

var obj={name:"那年那夏",age:"23"}

var template="我是{{name}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結果：我是那年那夏，年齡23

4.mustache的思想
mustache的核心是標簽和logic-less。從上面的代碼中可以看到定義模板時，使用了{{name}}這樣的標記，這就是mustache的標簽，只不過它用{{}}替代了<>，以免跟html標簽的<>混淆。logic-less，可以翻譯為輕邏輯，因為在定義模板的時候不會用到if-else，不會有循環式的編碼，一切都用標簽來解決，它的標簽非常簡單，但是能應付所有場景，只要用以下幾個標簽幾乎就能解決所有的問題：

{{prop}}

{{{prop}}}

{{#prop}}{{/prop}}

{{^prop}}{{/prop}}

{{!prop}}

{{> prop}}

5.mustache標簽介紹
1）{{person}}變量
如上面例子中可以直接使用

嵌套使用

var obj={ "name": { "first": "xx,", "last": "yy," }, "age": "23" }

var view={{name.first}} {{name.last}} {{age}}

輸出：xx,yy,23

2）{{{prop}}} 帶有HTML的變量
在{{prop}}中的html會直接轉義，如果不想轉義則使用{{{name}}}或{{&name}}

如：var obj={name:"那年那夏",age:"23"}

var template="我是{{{name}}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結果：我是那年那夏，年齡23

3){{#prop}}{{/prop}} 循環
1.遍歷數組

數組循環的時候可以用.作為下標

var obj={ "arr": ["1", "2", "3", "4"] };

var template="{{#arr}} {{.}} {{/arr}}"

輸出：1234

2.遍歷對象

var obj={ "str": [ { "name": "xx，" }, { "name": "yy，" }, { "name": "zz" } ] };

var template="{{#str}} {{name}} {{/str}}"

輸出xx,yy,zz

3,False和空的list

在以上代碼塊中，如果str這個key存在，并且有一個值是false或者一個空的列表，包含在塊之間的元素不會做任何顯示的.同樣如果str是一個列表，如果它為空，標簽內部的內容也是不會被顯示出來的.

如：var obj={ “str”: false } ;

var view="xxx{{#str}yyy{{/str}}}"

輸出xxx

4){{^prop}} {{/prop}}當 prop值為 null, undefined, false 時才渲染輸出該區塊內容。
如：var obj={ “str”: false } ;

var view="xxx{{^str}yyy{{/str}}}"

輸出xxxyyy

5)判斷使用{{#prop}}{{/prop}}{{^prop}} {{/prop}}
if else

{{#prop}} ... {{/prop}}

{{^prop}} ... {{/prop}}

布爾判斷

當對象沒有值時你可能不希望展示{{#prop}} ... {{/prop}}

數組的布爾判斷

當一個數組沒有任何值的時候，可能會希望不做任何的顯示，所以需要這個判斷{{#prop}} ... {{/prop}}

Lambdas

當Key的值是一個可以被調用的對象，譬如是一個函數或者一個lambda，該對象將會被調用并且傳遞標簽包含的文本進去

var obj={ "name": "Willy",

"prop": function(){

                 return function(text){      return "" + text + ""    }

           }

}

var view={{#prop}} {{name}} is xxx. {{/prop}}

輸出

我們看到prop是一個可以被調用的函數他當標簽使用的時候會被再次調用，并且包在其中的其他標簽也會被轉義執行，這個特性，可以用來做很多很多的事情.

6.{> prop}}Partials的使用
Partials 標簽開始是以一個大于號開始,像這樣{{> box}}.

Partials在運行期被渲染 (相對于編譯期渲染而言),因此可以使用它來做一些遞歸，可以避免無限的循環.

例：

var tpl = "

{{namme}}

    {{>msg}}
"

var partials = {msg: "{{#msg}}

  • {{sex}}
  • {{age}}
  • {{hobit}}
    • {{/msg}

    var html = Mustache.render(tpl, data, partials);

    //輸出：

    xiaohua

    • female
      • 


    • 22
      • 


    • reading
      •

    7){{!prop}} 注釋（沒啥用

    Today {{! ignore me }}

    輸出

    Today

    8)核心方法
    Mustache.parse(template);//預解析（可選步驟）

    Mustache.render(template, obj);

    模板既然有好處，也有壞處。就是編譯模板需要時間，所以在我們已知會使用某個模板的前提下，我們可以預先編譯好這個模板，以便后面的使用。

    參考說明：https://www.cnblogs.com/yaozh...

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109959.html

    相關文章

    • Vue2.5筆記：Vue中的模版

      摘要：模版語法中的模版是基于的模版語法，所有的模版都是合法的，所以能被遵循規范的瀏覽器和解析器解析。表達式模版中不僅僅可以進行簡單的數據綁定操作，我們還可以在模版中進行簡單的表達式。我們也簡單的敘述了模版編譯的整個流程。 我們在上一篇說到如何把 Vue 實例中的數據顯示到視圖中，就會需要用到我們的模版，我們只是簡單的使用了一些，模版其實還有很多其他的特性。今天我們就來看看模版的其他特性。 模...

      shevy 評論0 收藏0

    • vue入門筆記體系（五）vue指令

      摘要：指令指令帶有前綴，以表示它們是提供的特殊特性。添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。 vue指令 指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本，更新元素的 innerHTML 。注意：內...

      myshell 評論0 收藏0

    • [譯] 用 Webpack 武裝自己

      摘要：現在來做一個的入口讓我們在文件里進行的配置。如果想要顯示它們，我們可以在運行的時候使用你還可以使用，在改變代碼的時候自動進行打包。新建文件，里面是一段，告訴使用進行預處理。 本文譯自：Webpack your bags這篇文章由入門到深入的介紹了webpack的功能和使用技巧，真心值得一看。 由于我英語水平有限，而且很少翻譯文章，所以文中的一些語句在翻譯時做了類似語義的轉換，望諒解。...

      Tychio 評論0 收藏0

    • Vue學習筆記（一）

      摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護。隱藏四事件之前說了一些關于事件的指令，這里詳細學習一下事件的相關知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進行數據綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護。 Vue有以下特點： 是一個構建用戶界面的框架 是一...

      baoxl 評論0 收藏0

    發表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <