Home > Web Front-end > JS Tutorial > vue uses Jade template to write html

vue uses Jade template to write html

小云云
Release: 2018-02-23 10:00:54
Original
1546 people have browsed it

vue uses Jade template to write html, and stylus writes css

In daily work, I use vue to develop pages and webApps. When I write too much, I want to be lazy and simplify various writing methods, so I use jade to write html. Writing css with stylus saves a lot of steps and improves efficiency. Installation package

// 安装jade包
npm install jade jade-loader --save-dev
// 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装
npm install stylus stylus-loader --save-dev
Copy after login
Configuration file
// webpack.base.conf.js 配置
// jade
{
    test : /\.jade$/,
    loader : 'jade-loader',
}
// stylus 如果使用vue-cli构建,无需配置此项
{
    test : /\.styl$/,
    loader : 'stylus-loader',
}
Copy after login
Comparison before and after using jade
// html 模板
<template>
    <p class=&#39;demo-components&#39;>
        <h2>测试标题</h2>
        <p>
            <span class=&#39;text&#39;>这是一条测试的demo文本</span>
            <i class=&#39;icon&#39;></i>
        </p>
        <input v-model=&#39;value1&#39; @keydown.enter=&#39;loginIn&#39;>
        <p>{{ oneText + "-" + "twoText" }}</p>
    </p>
</template>
Copy after login
// jade 模板
<template lang=&#39;jade&#39;>
    p.demo-components
        h2 测试标题
        p
            span.text 这是一条测试的demo文本
            i.icon
        input(v-model='value1',@keydown.enter='loginIn')
        p {{ oneText + "-" + twoText }}
</template>
Copy after login
Notes on using Jade
  • Need a simple understanding of the basics of jade Use the syntax (it takes 10 minutes to understand it simply)

  • template needs to add lang='jade'attribute

  • Line wrapping of text within tags will cause parsing errors and requires other technical methods to resolve. Example:

<template lang=&#39;jade&#39;>
    p
        p 我是测试文本哇,可是文本太长需要换行啊,我恰巧回车试一
          下啊,啊呀,报错啦!!
</template>
// 可以写进一个变量里、或方法中返回数据、或保持一行不换行
Copy after login
stylus Before and after comparison
<style lang=&#39;css&#39;> // css less sass scss 样式demo此处省略 

// stylus demo
<style lang=&#39;stylus&#39;>
    .main-body
        width 300px
        heihgt 200px
        background-color rgba(0,0,0,1)
        .main-model
            width 50px
            height 50px
            margin 20px auto
</style>
Copy after login
  • stylus You can use a minimalist way to write css, or you can mix formats (in order to maintain a unified format , not recommended), leave the parsing task to webpack, we only need to write simple and easy-to-read code. This is the style and method I like. Of course, sass can also do it. It’s just a personal coincidence that I now use stylus.

The above is the detailed content of vue uses Jade template to write html. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template