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

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

php中世界最好的语言Original: 2018-04-14 11:49:201778Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Vue-Komponenten schreiben und welche Vorsichtsmaßnahmen bei der Verwendung von Vue-Komponenten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die erste MethodeSkript-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('my-component',{
      template: '#myComponent'
    })
    new Vue({
      el: '#app'
    })
  </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('my-component',{
      template: '#myComponent'
    })
    new Vue({
      el: '#app'
    })
  </script>
</html>

Dritter Typ Einzelne 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 Hello.vue, und legen Sie sie im Komponentenordner

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
 </p>
</template>
<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: '欢迎！'
  }
 }
}
</script>

ab app.vue

<!-- 展示模板 -->
<template>
 <p id="app">
  <img src="./assets/logo.png">
  <hello></hello>
 </p>
</template>
<script>
// 导入组件
import Hello from './components/Hello'
export default {
 name: 'app',
 components: {
  Hello
 }
}
</script>
<!-- 样式代码 -->
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Implementierung einer asynchronen Methode, die Anfänger lesen müssen

Schritte zum Abrufen und Laden von JSON-Daten über JS Ausführliche Erklärung

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!

php json html JS 异步 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：Ein Muss für Anfänger, um asynchrone Methoden in js zu implementierenNächster Artikel：Ein Muss für Anfänger, um asynchrone Methoden in js zu implementieren

In Verbindung stehende Artikel

Mehr sehen