Heim >Web-Frontend >js-Tutorial >Welche Möglichkeiten gibt es, Vue-Komponenten zu schreiben?

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

亚连Original: 2018-06-23 15:43:001035Durchsuche

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>

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>

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>

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>

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!

JavaScript html Token 事件 https

Stellungnahme：

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

Vorheriger Artikel：Über JavaScript Async (Detailliertes Tutorial)Nächster Artikel：Über JavaScript Async (Detailliertes Tutorial)

In Verbindung stehende Artikel

Mehr sehen