Quelles sont les manières d'écrire des composants Vue ?-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-23 15:43:00

original

1057 Les gens l'ont consulté

Cet article présente principalement en détail les trois formes d'écriture des composants vue, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage le composant vue avec tout le monde. est pour votre référence. Le contenu spécifique est le suivant

Le premier typeutilise 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(&#39;my-component&#39;,{
      template: &#39;#myComponent&#39;
    })

    new Vue({
      el: &#39;#app&#39;
    })

  </script>
</html>

Copier après la connexion

Le deuxième typeutilise la balise de script. 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>

Copier après la connexion

Le troisième type Composant de fichier unique

Cette méthode est couramment utilisée dans les applications Vue à page unique. Pour plus de détails, consultez le site officiel : https://cn.vuejs.org/v2/guide/single-file-components.html

Créez un fichier avec le suffixe .vue, le composant Hello.vue et placez-le dans le dossier des composants

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
 </p>
</template>

<script>
export default {
 name: &#39;hello&#39;,
 data () {
  return {
   msg: &#39;欢迎！&#39;
  }
 }
}
</script>

Copier après la connexion

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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.