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