三类人员 网站开发,网络推广活动方案策划,wordpress 媒体库 七牛,佛山百度网站快速排名Pug 模板引擎#xff1a;学习与使用
在前端开发中#xff0c;模板引擎的使用可以极大地提高代码的可读性和可维护性。Pug#xff08;也称为 Jade#xff09;是一个流行的 Node.js 模板引擎#xff0c;它使用简洁的语法来创建 HTML 结构。由于在vue3文档中看到了Pug的影子…Pug 模板引擎学习与使用
在前端开发中模板引擎的使用可以极大地提高代码的可读性和可维护性。Pug也称为 Jade是一个流行的 Node.js 模板引擎它使用简洁的语法来创建 HTML 结构。由于在vue3文档中看到了Pug的影子,便决定学习体验一番。
一、安装与配置
首先确保你的项目中已经安装了 Node.js 和 npmNode 包管理器。然后可以通过 npm 来安装 Pug。在命令行中执行以下命令
npm install pug二、基础语法
Pug 的语法非常简洁它使用缩进来表示 HTML 元素的层级关系而不是使用传统的尖括号和结束标签。以下是一些基础语法的示例
1. 文档类型与 HTML 元素
doctype html
htmlheadtitle My Pug Pagebodyh1 Hello, Pug!2. 变量与插值
- var name Johnp Hello, #{name}!3. 条件语句 - var isLoggedIn trueif isLoggedInp You are logged in.elsep Please log in.4. 循环
- var users [Alice, Bob, Charlie]ulfor user in usersli #{user}三、混合与包含
Pug 允许你创建可重用的代码块称为混合mixin以及包含其他模板文件。
1. 混合
mixin listulli Item 1li Item 2list()2. 包含
假设你有一个名为 header.pug 的模板文件你可以在其他模板中这样包含它
include headerbodyh1 My Page四、在 vue3 的 template 中使用 Pug
尽管 Pug 有自己的语法可以定义变量可以有 if 和 case-when 条件分支和 each-in 遍历有自己的插值方式 #{} 但如果在 template 里使用 Pug 语言则不建议使用这些语法而应该结合 Vue 的指令(如 v-if , v-for )和 mushache 插值方式。主要有以下原因 一致性和可预测性Vue 提供了自己的模板语法该语法在 Vue 社区中广泛接受和使用。使用 Vue 的指令和插值方式可以确保代码的一致性和可预测性这有助于其他 Vue 开发者更容易地理解和维护你的代码。 集成和兼容性Vue 的指令和插值方式与 Vue 的响应式系统紧密集成。使用 Vue 的语法可以确保数据的变化能够正确地触发视图的更新。而使用 Pug 的原生语法可能会导致一些意料之外的行为或兼容性问题。 工具链支持Vue 的模板语法在 Vue 的官方工具链如 Vue CLI、Vite 等中得到了很好的支持。这些工具可以帮助你进行代码拆分、热重载、静态分析等操作。相比之下使用 Pug 可能会增加配置的复杂性并可能减少与 Vue 工具链的集成度。 社区支持Vue 的模板语法拥有庞大的社区支持这意味着你可以更容易地找到相关的教程、文档和社区讨论。而 Pug 的社区虽然也很活跃但可能与 Vue 社区不完全重合。 可读性和维护性虽然 Pug 提供了一种简洁的语法来编写模板但对于不熟悉 Pug 的开发者来说它可能会增加阅读和维护的难度。使用 Vue 的模板语法可以使代码更加直观和易于理解。
1. 安装对应插件
npm i pug pug-plain-loader2. 插值属性和指令
mushache插值
script setup langts
let title hello world,
/script
template langpug
divh1 {{ title }}p This is a Pug template in Vue 3!
/template这段代码中使用 mushache 对 title 进行插值
属性 每个元素的属性都应该写在其后面的圆括号中除了 id 和 class 可以简写。所有的 指定都是属性都应写在括号中
script setup langts
.box(idbox)header(classheader)p(classtitle) {{ title }}
/templatev-if 条件分支
script setup langts
import { ref } from vueconst isAdd ref(true)/script
template langpug
button(v-ifisAdd) 新增
button(v-else) 编辑
/templatev-for 遍历
script setup langts
import { ref } from vueconst boxText ref([ 1,2,3,4,5])/script
template langpug
ulli(v-for(item, i) in boxText)p {{ item }}
/templatev-bind 和 v-on
script setup langts
import { ref } from vueconst isAdd ref(true)const boxText ref([x,xx,xxx,xxxx,xxxx])const add () {}const edit () {}/script
template langpug
ulli(v-for(item, i) in boxText)p(:class[p index]) {{ item }}button(v-ifisAdd clickadd) 新增
button(v-else clickedit) 编辑
/templatev-model 双向绑定
script setup langts
import { ref } from vue
const username ref();
/scripttemplate langpug
input(v-modelusername placeholder请输入用户名)
/template
3. 插槽
创建子组件ChildComponent.vue
在子组件中可以定义默认插槽或具名插槽。例如
!-- ChildComponent.vue --script setup langts
// 定义组件的逻辑部分...
/scripttemplate langpug
divh2 Child Componentslot() // 默认插槽slot(namenamedSlot) // 具名插槽
/template在父组件中使用子组件的插槽 (ParentComponent.vue)
在父组件中可以使用 template 标签和 v-slot 指令来定义插槽内容
!-- ParentComponent.vue --script setup langts
import ChildComponent from ./ChildComponent.vue;
/scripttemplate langpug
divh1 Parent ComponentChildComponenttemplate(v-slot) // 默认插槽内容p This is the default slot content.template(v-slot:namedSlot) // 具名插槽内容p This is the named slot content.
/template在上面的例子中父组件 ParentComponent 使用了 ChildComponent并通过 template 标签和 v-slot 或 v-slot:namedSlot 来定义插槽内容。
使用作用域插槽 对于作用域插槽你可以在子组件的 slot 标签上绑定属性然后在父组件的插槽模板中通过 v-slot 的值来接收这些属性。 子组件中定义作用域插槽
!-- ChildComponent.vue --script setup langts
import { ref } from vue;const someItem ref({ name: Example, value: 123 });
/scripttemplate langpug
divslot(namescopedSlot :itemsomeItem) // 传递数据的作用域插槽
/template父组件中使用作用域插槽
!-- ParentComponent.vue --script setup langts
import ChildComponent from ./ChildComponent.vue;
/scripttemplate langpug
divh1 Parent ComponentChildComponenttemplate(v-slot:scopedSlot{ item }) // 接收作用域插槽的数据p {{ item.name }}: {{ item.value }}
/template在这个作用域插槽的例子中子组件通过 slot 标签的 :itemsomeItem 传递了一个响应式对象 someItem 到作用域插槽。父组件通过 v-slot:scopedSlot{ item } 来接收这个对象并在模板中使用它。
五、总结
在 Vue 3 中使用 Pug也称为 Jade作为模板引擎具有一些明显的优点和潜在的缺点。
1. 优点:
简洁的语法Pug 的语法非常简洁通过缩进和换行来表示元素之间的层级关系减少了模板中的冗余代码。这使得代码更加清晰易读也更容易编写和维护。提高开发效率由于 Pug 的语法简洁开发者可以更快地编写模板提高开发效率。同时Pug 还支持混合mixin功能允许开发者定义可重用的代码块进一步减少重复代码。强大的功能Pug 提供了丰富的功能如条件语句、循环、过滤器等使得开发者能够在模板中实现复杂的逻辑。这些功能使得 Pug 在处理复杂页面布局和交互时具有很大的灵活性。与 Vue 3 的良好集成Vue 3 支持使用不同的模板引擎包括 Pug。Pug 可以与 Vue 3 的响应式系统、组件系统等无缝集成使得开发者能够充分利用 Vue 3 的功能和特性。
2. 缺点:
学习成本对于没有使用过 Pug 的开发者来说需要花费一定的时间来学习其语法和特性。虽然 Pug 的语法相对简洁但与 HTML 相比仍有一定的差异这可能会增加学习成本。社区支持虽然 Pug 是一个流行的模板引擎但相对于 HTML 来说其社区规模可能较小。这意味着在遇到问题时可能难以找到足够的资源和支持。浏览器兼容性由于 Pug 在编译时会转换为 HTML因此在浏览器兼容性方面通常不会有问题。但是如果开发者在 Pug 中使用了某些非标准的特性或语法可能会导致在某些浏览器中出现问题。工具链集成虽然 Vue 3 支持 Pug但某些 Vue 生态中的工具链如 Vue CLI 插件、构建工具等可能不完全支持 Pug 或需要额外的配置。这可能会增加项目的复杂性和配置成本。
因此在选择是否使用 Pug 时需要根据项目的需求和团队的实际情况进行权衡。
