3種vue組件的書寫形式，vue組件書寫

3種vue組件的書寫形式，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>

app.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>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。