vue把jade转换为html,vue 使用Jade模板写html,stylus写css的方法

日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。

安装包

jade使用前后对比

测试标题

这是一条测试的demo文本

// jade 模板

div.demo-components

h2 测试标题

span.text 这是一条测试的demo文本

i.icon

input(v-model='value1',@keydown.enter='loginIn')

p {{ oneText + "-" + twoText }}

使用Jade注意事项

需要简单了解jade基本使用语法(10分钟简单了解即可)

template 需要加上 lang='jade' 属性

标签内文本换行会解析错误，需要使用其他技巧性方法解决。例：

div

p 我是测试文本哇,可是文本太长需要换行啊，我恰巧回车试一

下啊，啊呀，报错啦！！

// 可以写进一个变量里、或方法中返回数据、或保持一行不换行

stylus 前后对比

// css less sass scss 样式demo此处省略

// stylus demo

stylus 可以使用极简的方式写css，也可以格式混合(为了保持格式统一，不建议)，将解析的任务交给webpack去做，我们只需要书写简单易读的代码即可。这是我喜欢的风格和方式，sass当然也可以做到，只是个人的机缘巧合现在使用了stylus。

总结

以上所述是小编给大家介绍的vue 使用Jade模板写html,stylus写css的方法详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！

vue把jade转换为html,vue 使用Jade模板写html,stylus写css的方法相关推荐

怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
【Vue】时间戳转换为年月日格式为 yyyy-MM-dd hh:mm js转换时间戳时间戳转换为年月日 Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)转换
Vue中将时间戳转换为年月日用法时间戳转换为年月日 yyyy-MM-dd hh:mm 用法1: formatDate(new Date(val * 1000), 'yyyy年MM月dd日 hh:m ...
VUE,数字状态转换为中文、根据不同状态显示不同颜色、element icon的自定义颜色
VUE,数字状态转换为中文.根据不同状态显示不同颜色.element icon的自定义颜色在页面根据数字显示中文状态.根据不同状态显示不同颜色 element 的icon是否可以改变颜色.大小? 在 ...
unicode怎么转换成html,Vue将Unicode转换为HTML标记
我打电话给一个API,它返回一个Unicode字符串,如下所示.Vue将Unicode转换为HTML标记当我在视图中输出它时,它不会自动将这些字符转换为HTML进行渲染,但我认为Vue会将它视为字符 ...
vue日期时间转换为年月日格式
vue日期时间转换为年月日格式 const dateFormat = (val, type) => {let time = ''if (val !== null) {const date = n ...
axios vue 回调函数_前端Vue 面试题大全
点蓝色字关注"程序员报刊" 「学习新闻招聘」 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类 ...
vue怎么vw布局好用_vue 实现 rem 布局的或者 vw 布局的方法
vue 实现 rem 布局的或者 vw 布局的方法一.实现 rem 布局移动端 name="viewport" content="width=device-widt ...
Jade —— 源于 Node.js 的 HTML 模板引擎
2013-12-11 发布 Jade -- 源于 Node.js 的 HTML 模板引擎开源项目介绍 web 模板引擎 node.js jade 207.8k 次阅读 · 读完需要 69 分钟 ...
vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
vue key重复_12道vue高频原理面试题，你能答出几道？
前言本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...

vue把jade转换为html,vue 使用Jade模板写html,stylus写css的方法

vue把jade转换为html,vue 使用Jade模板写html,stylus写css的方法相关推荐

最新文章

热门文章