html中加載vue組件的正確姿勢


http-vue-loader

直接從html / js加載.vue文件。沒有node.js環境,沒有構建步驟。

示例

這是一個vue文件:my-component.vue

<template>
    <div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
    data: function() {
        return {
            who: 'world'
        }
    }
}
</script>
<style>
.hello {
    background-color: #ffe;
}
</style>

利用http-vue-loader插件,在index.html文件中使用my-component.vue文件

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

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

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')//加載需要使用的vue文件
        }
      });
    </script>
  </body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM