Explication détaillée des trois formes d'écriture des composants vue-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-12 14:59:24

original

1920 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

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

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!