Maison > Article > interface Web > Explication détaillée des trois formes d'écriture des composants vue

Explication détaillée des trois formes d'écriture des composants vue

小云云original: 2017-12-12 14:59:241963parcourir

Cet article présente principalement en détail les formes d'écriture de trois composants Vue, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer, j'espère qu'il pourra vous aider.

Le premierutilise une balise de script

<!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>

Le second un Le troisième typeutilise la balise de modèle

<!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>

Le troisième typecomposant de fichier unique

Cette méthode est couramment utilisée dans les applications vue monopage. Pour plus de détails, veuillez consulter le site officiel : https://cn.vuejs.org/v2/guide/single-file-components.html

Créez un fichier avec le suffixe .vue, composant Bonjour .vue, et placez-le dans le fichier des composants 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>

Recommandations associées :

Accessoires d'options de composants Vue

Comment pour publier des composants vue sur npm

liaison bidirectionnelle de données vue2.0 et formulaire bootstrap + composant vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment VueJs utilise l'interface utilisateur Amaze pour ajuster les pages de liste et de contenuArticle suivant：Comment VueJs utilise l'interface utilisateur Amaze pour ajuster les pages de liste et de contenu

Articles Liés

Voir plus