So fügen Sie CSS-Stile zu Komponenten in Vue hinzu

So fügen Sie CSS-Stile zu Komponenten in Vue hinzu: Legen Sie zunächst den relevanten Code in der Datei [.vue] fest, erstellen Sie dann eine neue Datei [index.js] und erstellen Sie die entsprechende Datei [record.scss].

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6, Dell G3-Computer.

【Empfohlene verwandte Artikel: vue.js】

So fügen Sie CSS-Stile zu Komponenten in Vue hinzu:

Legen Sie zunächst die folgenden Einstellungen in der .vue-Datei fest:

<template src="./record.html"></template>
<script src="./record.js"></script>
<style src="./record.scss"></style>

Erstellen Sie eine neue index.js Datei wie folgt:

import record from './record.vue';
export default record;

Erstellen Sie die entsprechenden Dateien record.html, record.js, record.scss, fertig. Nehmen Sie .js als Beispiel:

// -- NAME --
const name = 'record';
// -- DATA --
const data = function () {
  return {
    
  };
};
// -- COMPUTED --
const computed = {
 
};
// -- COMPONENTS -- 
const components = {
}
// -- WATCH --
const watch = {
  
};
// -- METHODS --
const methods = { 
  
};
// -- HOOKS --
function mounted() {
}
// == EXPORT ==
export default {
  name: name,
  data: data,
  components: components,
  computed: computed,
  watch: watch,
  methods: methods,
  mounted: mounted
};

Eine andere Methode kann direkt zitiert werden:

<template>
  <div>html</div>
</template>
<script src="./***.js"></script>
<style src="./***.css"></style>

Es gibt verschiedene Formulare, aber die Grundidee Sie sind alle separate und unabhängige Dateien und die Einführung und das Laden

Verwandte kostenlose Lernempfehlungen: Javascript (Video)

Das obige ist der detaillierte Inhalt vonSo fügen Sie CSS-Stile zu Komponenten in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!