Inhaltsverzeichnis
Vue verwendet die Jade-Vorlage zum Schreiben von HTML und der Stift schreibt CSS.
Konfigurationsdatei
Vergleich vor und nach der Verwendung von Jade
Vorsichtsmaßnahmen für die Verwendung von Jade
Stylus Vorher-Nachher-Vergleich
Heim Web-Frontend js-Tutorial vue verwendet die Jade-Vorlage zum Schreiben von HTML

vue verwendet die Jade-Vorlage zum Schreiben von HTML

Feb 23, 2018 am 10:00 AM
html 使用

Vue verwendet die Jade-Vorlage zum Schreiben von HTML und der Stift schreibt CSS.

Bei meiner täglichen Arbeit verwende ich Vue zum Entwickeln von Seiten und WebApps. Wenn ich zu viel schreibe, möchte ich faul sein und verschiedene Schreibvorgänge vereinfachen Daher verwende ich Jade zum Schreiben von HTML. Das Schreiben von CSS mit einem Stift spart viele Schritte und verbessert die Effizienz. Installationspaket

// 安装jade包
npm install jade jade-loader --save-dev
// 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装
npm install stylus stylus-loader --save-dev
Nach dem Login kopieren
Konfigurationsdatei
// webpack.base.conf.js 配置
// jade
{
    test : /\.jade$/,
    loader : 'jade-loader',
}
// stylus 如果使用vue-cli构建,无需配置此项
{
    test : /\.styl$/,
    loader : 'stylus-loader',
}
Nach dem Login kopieren
Vergleich vor und nach der Verwendung von Jade
// html 模板
<template>
    <p class='demo-components'>
        <h2>测试标题</h2>
        <p>
            <span class='text'>这是一条测试的demo文本</span>
            <i class='icon'></i>
        </p>
        <input v-model='value1' @keydown.enter='loginIn'>
        <p>{{ oneText + "-" + "twoText" }}</p>
    </p>
</template>
Nach dem Login kopieren
// jade 模板
<template lang='jade'>
    p.demo-components
        h2 测试标题
        p
            span.text 这是一条测试的demo文本
            i.icon
        input(v-model='value1',@keydown.enter='loginIn')
        p {{ oneText + "-" + twoText }}
</template>
Nach dem Login kopieren
Vorsichtsmaßnahmen für die Verwendung von Jade
  • Sie müssen kurz die grundlegende Syntax von Jade verstehen (es dauert 10 Minuten, um sie einfach zu verstehen)

  • Vorlage muss das lang='jade'-Attribut

    hinzufügen
  • Zeilenumbruch von Text innerhalb von Tags führt zu Parsing-Fehlern und es müssen andere technische Methoden verwendet werden, um diese zu beheben. Beispiel:

<template lang='jade'>
    p
        p 我是测试文本哇,可是文本太长需要换行啊,我恰巧回车试一
          下啊,啊呀,报错啦!!
</template>
// 可以写进一个变量里、或方法中返回数据、或保持一行不换行
Nach dem Login kopieren
Stylus Vorher-Nachher-Vergleich
<style lang='css'> // css less sass scss 样式demo此处省略 

// stylus demo
<style lang='stylus'>
    .main-body
        width 300px
        heihgt 200px
        background-color rgba(0,0,0,1)
        .main-model
            width 50px
            height 50px
            margin 20px auto
</style>
Nach dem Login kopieren
  • Stylus Sie können CSS auf minimalistische Weise schreiben, oder Sie können Mischen Sie Formate (Um ein einheitliches Format beizubehalten, wird dies nicht empfohlen) und überlassen Sie die Analyseaufgabe dem Webpack. Wir müssen nur einfachen und leicht lesbaren Code schreiben. Das ist der Stil und die Methode, die ich mag. Natürlich kann Sass es auch. Es ist nur ein persönlicher Zufall, dass ich jetzt einen Stift verwende.

Das obige ist der detaillierte Inhalt vonvue verwendet die Jade-Vorlage zum Schreiben von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Wie analysiert und verarbeitet man HTML/XML in PHP?

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

See all articles