實現方案:
解析：< script>」中type是x-template是一種比較有用的功能。如果在宣告乙個元件時，在template中定義模板，如果要換行的話，要加上乙個「\」，如果是比較簡單的模板還好，如果比較多的話，就會感覺眼花繚亂的，因此我們有乙個看起來舒服的方式：x-template。
只要寫出< script type=「text/x-template」 id=「x-template」 >< /script> 在其中間就可以愉快的寫html**了。不用考慮換行等問題。這裡注意，要加乙個id名稱，並將其賦給template，然後在宣告的元件中加乙個
vue字串模板single單個根元素限制：
限制：中根元素必須只能有乙個
原因：因為template定義的模板，一定要用乙個根元素包裹起來，每個元件必須只有乙個根元素，比如上例中，如果去掉< div>標籤，那麼就相當於有多個根元素。
字串模板小結
js模板引擎template.js
簡介：template.js&&template-web.js，這是乙個模板引擎，簡單來說就是構建乙個模板，讓其生成html的js**。
提供一套模板語法，使用者可以寫乙個模板區塊，每次根據傳入的資料，生成對應資料產生的html片段，渲染不同的效果
使用步驟：
簡要步驟就是：
1.製作模板；2、獲取資料
3.將資料插入模板中 ；4.將模板插入html**中
語法：（1）使用
引用簡潔語法的引擎版本，例如
（2）表示式
} 符號包裹起來的語句則為模板的邏輯表示式
（3）輸出表示式
對內容編碼輸出： }
不編碼輸出： }
編碼可以防止資料中含有 html 字串，避免引起 xss 攻擊
案例：1、製作模板
2、獲取資料
/* 2、獲取資料 */
var data=,,,
]}
3.將資料插入模板中
/* 3.將資料插入模板中 */
var tplinnerhtml = document.getelementbyid('tpl').innerhtml;
var html = template(tplinnerhtml,data);
/* 4、將模板插入html**中 */
document.getelementbyid('wp').innerhtml = html;
優勢：1、效能卓越，執行速度通常是 mustache 與 tmpl 的 20 多倍（效能測試）
2、支援執行時除錯，可精確定位異常模板所在語句
3、對 nodejs express 友好支援
4、支援預編譯，可將模板轉換成為非常精簡的 js 檔案
5、支援所有流行的瀏覽器
拓展：除了本節所講template-web.js外，前端開發常用的模版引擎還包含handlebars和mustache
其實就是模板化，這是以前就開始推崇的面向資料程式設計的乙個方式。比如jquery template
handlebars是一款很高效的模版引擎,提供語意化的模版語句,最大的相容mustache模版引擎, 提供最大的mustache模版引擎相容, 無需學習新語法即可使用，效能問題現在逐漸被替代，了解即可，面試常問。
（1）arttemplate模板引擎
arttemplate是新一代js模板引擎，它在v8中的渲染效率可接近js效能極限,在chrome下渲染效率測試中分別是知名引擎mustache與micro tmpl的25/32倍(效能測試)，arttemplate的模板還支援使用自動化工具預編譯。
（2）分類
arttemplate的庫分為兩種，乙個是template.js(採用"}")，另外乙個是template-native.js(採用"")；第乙個是簡潔語法版，第二個是原生語法(感覺像jsp)版，兩個庫的語法不可混用，否則會報錯。
（3）原理
提前將html**放進乙個中，當需要用到時，在js裡這樣呼叫:var htmlstr = template(「test」,放json資料或其他)，然後$("#*").html(htmlstr)，最後放進去就好
（4）功能概述
提供一套模板語法,使用者可以寫乙個模板區塊,每次根據傳入的資料,生成對應資料產生的html片段,渲染不同的效果
（5）**包限制
template.js包不支援簡化寫法；只能用 ,template-web.js簡潔和原始語法都可以。
ES6模板字串
es6提供了模板字串使字串的拼接以及模板的編寫變得特別簡單,組合字串的時候不在需要加號單引號這些，直接使用一對反引號即可，而且字串中需要變數的時候直接 的這種方式，大括號裡面可以是任何的js表示式，變數，物件的屬性，還可以是乙個函式，模板字串還可以進行巢狀。const person lili con...
es6 模板字串
模板字串 反引號表示 是增強版的字串,可以用作普通字串,也可以使用多行字串,也可以巢狀使用 1 this is a string 2 this is a string 3 let n a this is string 在模板字串中輸出多行字串的時候,會按照書寫的格式進行輸出,字元之間的空格和縮排都會...
es6模板字串
es6新增的建立字串的方式，使用反引號定義 let str 模板字串 console.log str 特點 可以解析變數。將變數放於 中 let val 123 let str2 模板字串 console.log str2 現在在模板字串的字串換行書寫，同時顯示也會進而換行顯示 let obj le...