在vue里如何使用pug模板引擎

 更新时间:2023年10月10日 10:32:41   作者:依旧丶俊  
这篇文章主要介绍了在vue里如何使用pug模板引擎,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue使用pug模板引擎

pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签。

在vue中使用的话 需要事先安装依赖

#安装支持pug依赖
npm install pug pug-loader pug-filters -D
#安装支持jade依赖
npm install jade jade-loader -D

后在你的vue项目文件中的webpack.base.conf.js中,在module的rules节点下添加配置:

{
 test: /\.jade$/,
 loader: "jade"
},
{
 test: /\.pug$/,
 loader: 'pug'
}

然后在template标签中 lang=“pug” 即可启用

当然 怎么用就得去官网查看了 pug官网

pug模板引擎基本用法

Pug是jade的新版,jade由于商标已被注册,所以更名为pug。

缩进标注:Pug模板和大多数模板不同,它有自己的语法特点,采用缩进的方式进行标注,使用这种方式,使得代码更加清晰。

无尾标签:这种语法不需要类似 /html 这样的尾标签。

文本书写:在标签后 +空格+内容 的方式进行书写文本,例如下面代码中 h1后跟的 website即为标题名文本。

属性添加:在标签后用()括号对属性进行编写。

   //views文件夹下index.pug文件
   html
       head
           title Home
           link(rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" rel="external nofollow" )
           script(src="/lib/bootstrap/dist/js/bootstrap.min.js")
           style
           	include myStyle.css
       body
           div(class='container')
               h1 website 
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script 
           	include myScript.js

在这里插入图片描述

引入方式

自编写文件:使用include +文件名对文件进行引入。

第三方包文件:在服务器上通过nodejs结合express方式,使用app.use引入中间件。(此处例子导入bootstrap,需提前安装—— 在命令行通过npm install bootstrap进行安装)

     //server.js文件
     const express = require('express')
     const app = express()
     const expressPort = 3000
     app.listen(3000, () => {
         console.log(`App listening on port ${expressPort}`);
     })
     app.set('view engine','pug');
     //通过app.set方式让pug进入node项目中
     //app.set('views','./views'),pug默认地址会在一个叫views的文件夹里
     app.use('/lib/bootstrap',express.static('node_modules/bootstrap/dist'))
     //use方法作用:即引入一个所谓的中间件(将工作目录中动态文件变成静态文件提供给服务器)
     //引用提前安装好的bootstrap(npm init bootstrap)
     //'/lib/bootstrap'是一个虚拟地址,并不存在这个文件夹,但是可以通过这个路径对bootstrap文件进行访问。
     app.get('/',(req,res)=>{
         res.render('index');
     })

传参方式:具体为在后端代码中与pug模板引擎的传参方式。

在server.js后端代码中准备好传参数据:

   app.get('/',(req,res)=>{
       const options={
           name:'WangJunjie',
           age:'21'
       }
       res.render('index',options);	//options为传入参数,直接在统一作用域中进行调用
   })

在index.pug文件中进行使用(通过 #{ } 的方式):

       body
           div(class='container')
               h1 #{name}'s website //通过#{参数内部属性名}方式
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script 

在这里插入图片描述

这样就拿到了后端中的name数据,将name数据渲染到.pug文件上了。

同时,可以通过 script.的方式,将后端代码中的变量赋值给前端代码:

 body
           div(class='container')
               h1 website 
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script.
           	const name = '#{name}';
           	const age = '#{age}';
           script 
           	include myScript.js

特殊字符

  • “|” ,|后的字符会被原样输出。
  • “.” ,.表示下一级的所有字符都会被原样输出,不再被识别。是|的升级版,实现批量处理。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Nuxt的路由动画效果案例

    Nuxt的路由动画效果案例

    这篇文章主要介绍了Nuxt的路由动画效果案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue购物车插件编写代码

    vue购物车插件编写代码

    这篇文章主要为大家详细介绍了vue购物车插件的编写代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 如何在Vue中抽离接口配置文件

    如何在Vue中抽离接口配置文件

    这篇文章主要介绍了Vue中抽离接口配置文件的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue router使用query和params传参的使用和区别

    vue router使用query和params传参的使用和区别

    本篇文章主要介绍了vue router使用query和params传参的使用和区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vant van-list下拉加载更多onload事件问题

    vant van-list下拉加载更多onload事件问题

    这篇文章主要介绍了vant van-list下拉加载更多onload事件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vite配置@别名以及让vscode智能提示路经的步骤

    vite配置@别名以及让vscode智能提示路经的步骤

    这篇文章主要给大家介绍了关于vite配置@别名以及让vscode智能提示路经的步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • Vue登录功能的实现流程详解

    Vue登录功能的实现流程详解

    本文主要介绍了Vue实现登录功能全套详解(含封装axios),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    这篇文章主要介绍了在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue 自定义标签的src属性不能使用相对路径的解决

    Vue 自定义标签的src属性不能使用相对路径的解决

    这篇文章主要介绍了Vue 自定义标签的src属性不能使用相对路径的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 详解最新vue-cli 2.9.1的webpack存在问题

    详解最新vue-cli 2.9.1的webpack存在问题

    这篇文章主要介绍了最新vue-cli 2.9.1的webpack存在问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论