Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der drei Schreibformen von Vue-Komponenten

Detaillierte Erläuterung der drei Schreibformen von Vue-Komponenten

小云云
Freigeben: 2017-12-12 14:59:24
Original
2022 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Schreibformen der drei Vue-Komponenten im Detail vor, die einen gewissen Referenzwert haben, ich hoffe, dass er Ihnen helfen kann.

Der ersteSkript-Tag verwenden


<!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 eins Der dritte 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 Typeinzelne Dateikomponente

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, Komponente Hallo .vue und platzieren Sie es in der Komponentendatei Clip


<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


Verwandte Empfehlungen:

Vue-Komponentenoptionen-Requisiten

Wie Vue-Komponenten in npm veröffentlichen

Vue2.0-Daten bidirektional binden und Bootstrap+Vue-Komponente bilden

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der drei Schreibformen von Vue-Komponenten. 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