[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解
[vue] 你知道vue的模板語法用的是哪個web模板引擎的嗎？說說你對這模板引擎的理解
模板引擎：
負責組裝數據，以另外一種形式或外觀展現數據。
優點：
解答
git地址： https://github.com/janl/mustache.js
模板引擎技術是非常有用的，所以它不是一個冷門的知識，反而是需要我們去了解的；
所以我們通過github的安裝指令，一步一步的來實現基本的api
我搜查了很多資料，網上并沒有一個使用npm包的方式來做demo，都是使用render來執行渲染，鑒于我們日常工作中使用npm比較多，我做一版npm的demo
首先npm init初始化一個空項目；
然后安裝mustache
在package.json中填寫如下內容：
"scripts": {"build": "mustache dataView.json myTemplate.mustache>public/output.html",},如同這個指示看到的一樣，我們需要創建一個json文件，這個文件就是變量配置文件，還需要創建一個模板文件，這個模板文件相當于執行render函數的文件，這種方式更加一目了然；
我們創建它們，我使用了vscode，并且裝了相關的mustache的插件，所以語法會有提示；
我們首先在json文件中寫入一個對象，里面寫一個值，然后在模板文件中使用{{}}來執行渲染；
然后執行
npm run build就會發現在public下面生成了一個html文件，如果報錯，說明你的文件目錄跟我的不一樣
我們在json文件中，寫入了這么多值，有普通的值，有布爾值，有數組等等
"age": "19","html": "<p>123</p>","isTrue": true,"thisIsObject": {"name": "shenhao","age": "19"},"isArray": [{"name" : "shenhao"},{"name" : "shenhao"},{"name" : "shenhao"}]}我們在模板中寫出了這些代碼，我在模板中寫了一個簡單的html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body>{{name}} 有一個 {{&html}} <br><hr>{{thisIsObject.name}} {{thisIsObject.age}}<br><hr>-webkit- {{#isTrue}} 如果是真就顯示了 {{/isTrue}}<br><hr>循環一下下面的內容, 如果是數組，可以用.來表示循環的每一個元素{{#isArray}} {{name}} {{/isArray}}<br><hr>{{!^}}與{{!#}}相反，如果變量是null、undefined、 false、和空數組講輸出結果</body></html>我們來講解一下基本的api
{{name}}：會在json中查詢對應的值，并且渲染
{{&html}}: html在json中如果式一個html標簽，可以用這樣的方式進行轉義 (類似vue中的v-html)
{{#boolean}} 和 {{/boolean}}: 是一個組合，如果boolean為真那么它們之間的內容會渲染，否則不會
{{^boolean}}: 和上面用法一樣，只不過是上面的else
{{object.name}}: 同樣支持對象鍵值對的方式獲取
{{#array}} 和 {{/array}}: 如果這樣寫是一個數組，那么不僅有判斷boolean的真假，它會迭代中間可以寫迭代中的每一個元素，每一個元素可以用{{.}}來獲取，如果要獲取迭代中的內容是一個鍵值對，那么可以直接使用{{name}}
這就是mustache簡單的用法，上面有demo，你們可以對著demo敲一遍就能非常easy的理解了；
希望理解了這個技術，你可以在其他語言同樣可以用到它！
個人簡介
我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家發表自己的見解
主目錄
與歌謠一起通關前端面試題
總結
以上是生活随笔為你收集整理的[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗？说说你对这模板引擎的理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： access转换MySQL教程,如何将A
- 下一篇： TextWatcher的使用