在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

特殊字符

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

总结

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

相关文章

  • Vue项目中npm install卡住问题解决的详细指南

    Vue项目中npm install卡住问题解决的详细指南

    这篇文章主要介绍了Vue项目中npm install卡住问题解决的相关资料,文中包括更换npm镜像源、清除npm缓存、删除.npmrc文件和升级Node.js版本,需要的朋友可以参考下
    2024-12-12
  • vue2+elementui上传照片方式(el-upload超简单)

    vue2+elementui上传照片方式(el-upload超简单)

    这篇文章主要介绍了vue2+elementui上传照片方式(el-upload超简单),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VUE实现强制渲染,强制更新

    VUE实现强制渲染,强制更新

    今天小编就为大家分享一篇VUE实现强制渲染,强制更新,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解vue-amap引入高德JS API的原理

    详解vue-amap引入高德JS API的原理

    vue-amap是对高德地图JS API进行封装的、适用于vue项目的地图组件库,本文主要介绍了vue-amap引入高德JS API的原理,具有一定的参考价值,感兴趣的可以了解一下
    2022-06-06
  • 详解如何提高 webpack 构建 Vue 项目的速度

    详解如何提高 webpack 构建 Vue 项目的速度

    这篇文章主要介绍了详解如何提高 webpack 构建 Vue 项目的速度,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue3项目配置按需自动引入自定义组件unplugin-vue-components方式

    vue3项目配置按需自动引入自定义组件unplugin-vue-components方式

    这篇文章主要介绍了vue3项目配置按需自动引入自定义组件unplugin-vue-components方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue之数据交互实例代码

    vue之数据交互实例代码

    本篇文章主要介绍了vue之数据交互实例代码,vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,有兴趣的可以了解一下
    2017-06-06
  • 基于vue的video播放器的实现示例

    基于vue的video播放器的实现示例

    这篇文章主要介绍了基于vue的video播放器的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Vue数据变了但页面没有变的几种情况及解决方法

    Vue数据变了但页面没有变的几种情况及解决方法

    如果,你发现自己需要在Vue中做一次强制更新,99.99%的情况,是你在某个地方做错了事,本文给大家就介绍了Vue数据变了,但页面没有变的几种情况及解决方法,并通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll 实现简单自动无缝滚动且添加对应点击事件的简单整理

    vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求,目前支持上下左右无缝滚动,单步滚动,及支持水平方向的手动切换功能,本节介绍,vue添加 vue-seamless-scroll实现自动无缝滚动的效果,并对应添加点击事件
    2023-01-01

最新评论