<script src="https://www.jb51.net/article/vue.js"></script> <div> <h3>Vue component<h3> <counter></counter> <counter></counter> </div> //引入组件mycomp.js <script src="https://www.jb51.net/mycomp.js"></script> <script> new Vue({ el: '#example' }) </script>
mycomp.js
//heredoc方法输出注释中的组件代码 function heredoc(fn){ return fn.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; } //输出组件代码 document.write(heredoc(function(){ /* <style> .my {color:red;padding:10px;} </style> <script type="text/x-template"> <p v-on:click="todo+=1"> {{todo}} </p> </script> <script> Vue.component('counter',{ template: "#c", data: function () { return { todo: 1 } } }) </script> */}))
运行结果:
以简单的js文件形式实现了Vue单文件组件, 优点是带样式, 用法简单, 接近于.vue文件,
不用webpack, 不用发ajax请求, 直接引入使用 !
您可能感兴趣的文章: