Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Möglichkeiten gibt es, Vue-Komponenten zu schreiben?

亚连
Freigeben: 2018-06-23 15:43:00
Original
1018 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die drei Schreibformen von Vue-Komponenten ausführlich vorgestellt, die einen gewissen Referenzwert haben.

Das Beispiel dieses Artikels teilt die Vue-Komponente mit allen dient als Referenz. Der spezifische Inhalt lautet wie folgt:

Der erste Typverwendet das Skript-Tag

<!DOCTYPE html>
<html>
  <body>
    <p id="app">
      <my-component></my-component>
    </p>

    <-- 注意:使用<script>标签时,type指定为text/x-template,意在告诉浏览器这不是一段js脚本,浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->

    <script type="text/x-template" id="myComponent">//注意 type 和id。
      <p>This is a component!</p>
    </script>
  </body>
  <script src="js/vue.js"></script>
  <script>
    //全局注册组件
    Vue.component(&#39;my-component&#39;,{
      template: &#39;#myComponent&#39;
    })

    new Vue({
      el: &#39;#app&#39;
    })

  </script>
</html>
Nach dem Login kopieren

Der zweite Typverwendet das Template-Tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p id="app">
      <my-component></my-component>
    </p>

    <template id="myComponent">
      <p>This is a component!</p>
    </template>
  </body>
  <script src="js/vue.js"></script>
  <script>

    Vue.component(&#39;my-component&#39;,{
      template: &#39;#myComponent&#39;
    })

    new Vue({
      el: &#39;#app&#39;
    })

  </script>
</html>
Nach dem Login kopieren

Der dritte TypEinzeldateikomponente

Diese Methode wird häufig in Vue-Einzelseitenanwendungen verwendet. Einzelheiten finden Sie auf der offiziellen Website: https://cn.vuejs.org/v2/guide/single-file-components.html

Erstellen Sie eine Datei mit dem Suffix .vue, der Komponente Hello.vue und Platzieren Sie es im Komponentenordner

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
 </p>
</template>

<script>
export default {
 name: &#39;hello&#39;,
 data () {
  return {
   msg: &#39;欢迎!&#39;
  }
 }
}
</script>
Nach dem Login kopieren

app.vue

<!-- 展示模板 -->
<template>
 <p id="app">
  <img src="./assets/logo.png">
  <hello></hello>
 </p>
</template>

<script>
// 导入组件
import Hello from &#39;./components/Hello&#39;

export default {
 name: &#39;app&#39;,
 components: {
  Hello
 }
}
</script>
<!-- 样式代码 -->
<style>
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>
Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So erzielen Sie den Select-All-Cancel-Effekt in JavaScript

So erzielen Sie den Effekt des linken Menüs mit JavaScript

So implementieren Sie die Token-Verifizierung mit Vue

So implementieren Sie einen benutzerdefinierten Ereignismechanismus mit Javascript

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Vue-Komponenten zu schreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage