3種類のvueコンポーネントの書き方

3229 ワード
vue コンポーネント
本論文の実例は、Vueコンポーネントの書き方を共有します。参考にしてください。具体的な内容は以下の通りです。
最初にscriptタグを使う

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <--   ：  <script>   ，type   text/x-template，            js  ，      HTML      <script>        。-->

    <script type="text/x-template" id="myComponent">//   type  id。
      <div>This is a component!</div>
    </script>
  </body>
  <script src="js/vue.js"></script>
  <script>
    //      
    Vue.component('my-component',{
      template: '#myComponent'
    })

    new Vue({
      el: '#app'
    })

  </script>
</html>
二つ目はtemplateラベルを使用します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <my-component></my-component>
    </div>

    <template id="myComponent">
      <div>This is a component!</div>
    </template>
  </body>
  <script src="js/vue.js"></script>
  <script>

    Vue.component('my-component',{
      template: '#myComponent'
    })

    new Vue({
      el: '#app'
    })

  </script>
</html>
第三の単一ファイルコンポーネント
この方法はvueの単一ページの応用によく使われています。詳細は公式サイトをご覧ください。https://cn.vuejs.org/v2/guide/single-file-components.html
vue拡張子のファイルを作成します。コンポーネントHello.vueは、componentsフォルダに入れます。

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

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: '  ！'
  }
 }
}
</script>
ap.vue

<!--      -->
<template>
 <div id="app">
  <img src="./assets/logo.png">
  <hello></hello>
 </div>
</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>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
PHPは、テキストの一部を取得して、ポイント幅と高さを表示する方法です。
Android Httpはファイルのアップロードとダウンロードを実現します。