suchen

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

Detaillierte Erläuterung der drei Schreibformen von Vue-Komponenten

小云云
小云云Original
2017-12-12 14:59:241986Durchsuche

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>


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>


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>


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>


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!

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：Wie VueJs die Amaze-Benutzeroberfläche verwendet, um Listen- und Inhaltsseiten anzupassenNächster Artikel：Wie VueJs die Amaze-Benutzeroberfläche verwendet, um Listen- und Inhaltsseiten anzupassen

In Verbindung stehende Artikel

Mehr sehen