pug模板语法在vue中的使用

您所在的位置：网站首页 › 战神引擎是什么写法 › pug模板语法在vue中的使用

pug模板语法在vue中的使用

2024-07-13 19:39| 来源: 网络整理| 查看: 265

一、介绍

pug，原名jade，是流行的HTML模板引擎，，最大的特色是使用缩进排列替代成对标签。它简化了HTML的成对标签的写法，使代码更加简洁、开发效率更高，但是同时它也带来了一些副作用：可移植性差、调试困难、性能并不出色。

二、使用理由 HTML标签必须进行闭合，如果不闭合的话容易报错。HTML没有模板机制，如果不使用前端框架维护起来非常困难三、简单事例 #hello a.link-button Link Link 四、安装 1.下载依赖 npm i -D pug pug-html-loader pug-plain-loader 2. 配置 // webpack.base.conf { test:/\.pug$/, loader: "pug-html-loader" } // 或者 module.exports = { chainWebpack: config => { config.module.rule('pug') .test(/\.pug$/) .use('pug-html-loader') .loader('pug-html-loader') .end() } } 3. 使用，注意要加 lang=“pug” div.hello h1 Hello World 4.实践

下面将拿出实际项目中的一些代码进行改造原代码

选择相册： {{ item.name }} 上传照片

改造后 12行代码变成9行，标签完全简化

.gallery .btn-group span 选择相册: Select(v-model="cataId" style="width:200px") Option(v-for="item in catalogs" :value="item.id" :key="item.id" clearable) {{ item.name }} Button(type="info") 上传照片 vue-waterfall-easy(:imgsArr="imgsArr" @scrollReachBottom="loadMore" ref="waterfall") 五、语法

pug和HTML最大的不同在于它拥有自己的语法，拥有循环、条件控制、定义变量等功能。可以说如果在没有前端框架的年代，这些功能是多么的有诱惑力，但是，近几年React、Vue的出现，已经解决了这些痛点。

1.条件判断 - let friends = 10 //加上-后不会进行输出 case friends when 0 p 您没有朋友 when 1 p 您有一个朋友 default p 您有 #{friends} 个朋友 - let user = { description: 'foo bar baz' } - let authorised = false #user if user.description h2.green 描述 p.description= user.description else if authorised h2.blue 描述 p.description. 用户没有添加描述。不写点什么吗…… else h2.red 描述 p.description 用户没有描述描述

foo bar baz

上面的例子跟JavaScript的switch和if判断很相似。

2.循环 div - for (let x = 0; x < 3; x++) li item item item item div - let list = ["Uno", "Dos", "Tres","Cuatro", "Cinco", "Seis"] each item in list li= item Uno Dos Tres Cuatro Cinco Seis

可以看到，在pug里面可以使用for循环进行遍历，同时我还发现webstorm的代码格式化在格式化pug代码的时，不能正确的进行缩进，如果对上面的代码进行格式化，代码将无法正常进行解析。

3.包含/模块化

可以通过include xxx.pug将外部的文件插入进来，当然由于Vue自身已经包含了模块化功能，所以这项功能在Vue中几乎没有用处

4.嵌入 - var title = "On Dogs: Man's Best Friend"; - var author = "enlore"; - var theGreat = "转义!"; h1= title p #{author} 笔下源于真情的创作。 p 这是安全的：#{theGreat} On Dogs: Man's Best Friend

enlore 笔下源于真情的创作。

这是安全的：;span;转义!;/span;

pug中使用了#{}的方式。Vue中使用了{{}}双括号的方式。React中使用了{}单括号的方式。

以上是对pug模板引擎的一些了解，如果针对性工作可在官网上学习哦~

【本文地址】

pug模板语法在vue中的使用

pug模板语法在vue中的使用

今日新闻

推荐新闻