VUE中的pug使用

安装 pug
   npm i -D pug-html-loader pug-plain-pug
   #安装支持pug依赖
   npm install pug pug-loader pug-filters -D
   #安装支持jade依赖
   npm install jade jade-loader -D
   pug ：安装pug
   pug-loader：pug的loader
   pug-cli：pug 编译工具
   pug-filters：pug的过滤器

修改脚手架里面的文件
   config.js
       module.exports = {
           rules:[ {
           test: /\.pig$/ ,
           loader : " pug-html-loader "
           } ]
       }
template lang = "pug"

li(style = {color:'red',fontSize:'30px'}) {{num}}
这个里面类似的 font - size 可以写成 fontSize

- var classes = ['foo', 'bar', 'baz']
a(class=classes) classes 里面可以写成 class

input框旁边如何跟文本

<template lang="pug">
div.titleulli(style = {color:'red',fontSize:'30px'}) {{num}}li a(href="baidu.com") 百度|lia(href="baidu.com") 百度2liinput( type='checkbox'name="一个三"checkbox)| input框li- var classes = ['.foo' , '.cor']p(class='classes') 这个是一个P标签a.btnt(href="baidu.com") class名字为btnt的标签并且可以跳转#contenp #conten 可以直接生成一个iD为 conten的div标签- var fuzhi = {}fuzhi.class = 'bab'div#bab(data-bar="foo")&attributes(fuzhi)</template>
<script>
export default {data() {return {num:'你好啊11111'}},
}
</script>
<style lang="sass">
*list-style: nonepadding: 0margin: 0
.foofont-size: 30px
.corcolor: red
.btntcolor: redfont-size: 30px
#contenwidth: 100pxheight: 100pxborder: 1px solid red
</style>

<template lang="pug">
div.titlep|这个是一个P标签|这句话换行了p |一个ulli item Ali item Bli item cimg(src="")p.一个P标签写什么#[em 东西]
</template>
//- 补一个

VUE中的pug使用相关推荐

vue中使用pug语法调用函数传参 mixin
npm i -D pug pug-html-loader pug-plain-loadermodule.exports = {chainWebpack: config => {config.mo ...
pug模板语法在vue中的使用--HTML的模板引擎
一. 介绍 pug,原名jade,是流行的HTML模板引擎,,最大的特色是使用缩进排列替代成对标签.它简化了HTML的成对标签的写法,使代码更加简洁.开发效率更高,但是同时它也带来了一些副作用:可移植 ...
.vue文件转换成html,在vue中把含有html标签转为html渲染页面的实例
在vue中把含有html标签转为html渲染页面的实例在标签内部添加v-html指令即可使用pug的写法: 这个content表示的是一个含标签的变量输入content为: 我是p标签输出结果 ...
js pug 代码_Vue项目中配置pug解析支持
Vue 的用法没有变化: transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}&q ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...

VUE中的pug使用

VUE中的pug使用相关推荐

最新文章

热门文章