网站特色分析图怎么做,广州开发区投资集团有限公司,海口seo外包服务,手机大全网站[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗#xff1f;说说你对这模板引擎的理解
模板引擎#xff1a;
负责组装数据#xff0c;以另外一种形式或外观展现数据。 优点#xff1a;
可维护性#xff08;后期改起来方便#xff09;#xff1b;
可扩展性#…[vue] 你知道vue的模板语法用的是哪个web模板引擎的吗说说你对这模板引擎的理解
模板引擎
负责组装数据以另外一种形式或外观展现数据。 优点
可维护性后期改起来方便
可扩展性想要增加功能增加需求方便
开发效率提高程序逻辑组织更好调试方便
看起来舒服不容易写错解答
git地址 https://github.com/janl/mustache.js 模板引擎技术是非常有用的所以它不是一个冷门的知识反而是需要我们去了解的 所以我们通过github的安装指令一步一步的来实现基本的api 我搜查了很多资料网上并没有一个使用npm包的方式来做demo都是使用render来执行渲染鉴于我们日常工作中使用npm比较多我做一版npm的demo 首先npm init初始化一个空项目 然后安装mustache
npm i mustache -s -d在package.json中填写如下内容
scripts: {build: mustache dataView.json myTemplate.mustachepublic/output.html,},
如同这个指示看到的一样我们需要创建一个json文件这个文件就是变量配置文件还需要创建一个模板文件这个模板文件相当于执行render函数的文件这种方式更加一目了然 我们创建它们我使用了vscode并且装了相关的mustache的插件所以语法会有提示 我们首先在json文件中写入一个对象里面写一个值然后在模板文件中使用{{}}来执行渲染
然后执行
npm run build就会发现在public下面生成了一个html文件如果报错说明你的文件目录跟我的不一样
我们在json文件中写入了这么多值有普通的值有布尔值有数组等等
age: 19,html: p123/p,isTrue: true,thisIsObject: {name: shenhao,age: 19},isArray: [{name : shenhao},{name : shenhao},{name : shenhao}]}我们在模板中写出了这些代码我在模板中写了一个简单的html
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title/headbody{{name}} 有一个 {{html}} brhr{{thisIsObject.name}} {{thisIsObject.age}}brhr-webkit- {{#isTrue}} 如果是真就显示了 {{/isTrue}}brhr循环一下下面的内容, 如果是数组可以用.来表示循环的每一个元素{{#isArray}} {{name}} {{/isArray}}brhr{{!^}}与{{!#}}相反如果变量是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的理解了 希望理解了这个技术你可以在其他语言同样可以用到它
个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家发表自己的见解
主目录
与歌谣一起通关前端面试题
