Maison >interface Web >js tutoriel >Quelles sont les manières d'écrire des composants vue ?

Quelles sont les manières d'écrire des composants vue ?

php中世界最好的语言original: 2018-04-14 11:49:201844parcourir

Cette fois, je vais vous montrer comment écrire des composants vue, et quelles sont les précautions lors de l'utilisation des composants vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

La première méthodeutiliser la 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('my-component',{
      template: '#myComponent'
    })
    new Vue({
      el: '#app'
    })
  </script>
</html>

Le deuxième typeutilise la balise 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('my-component',{
      template: '#myComponent'
    })
    new Vue({
      el: '#app'
    })
  </script>
</html>

Troisième type Composant à 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 Hello.vue, et placez-le dans le dossier des composants

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

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Méthode asynchrone d'implémentation JS que les novices doivent lire

Étapes pour obtenir et charger des données JSON via JS Explication détaillée

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!

php json html JS 异步 https

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：Une lecture incontournable pour les débutants pour implémenter des méthodes asynchrones en jsArticle suivant：Une lecture incontournable pour les débutants pour implémenter des méthodes asynchrones en js

Articles Liés

Voir plus