代码如下:
example.html
1 <script src="vue.js"></script> 2 <div id="example"> 3 <h3>Vue component<h3> 4 <counter></counter> 5 <counter></counter> 6 </div> 7 <!--引入组件mycomp.js--> 8 <script src="mycomp.js"></script> 9 <script> 10 new Vue({ 11 el: '#example' 12 }) 13 </script> mycomp.js
1 //heredoc方法输出注释中的组件代码
2 function heredoc(fn){ 3 return fn.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; 4 } 5 //输出组件代码 6 document.write(heredoc(function(){ 7 /* 8 <style> 9 .my {color:red;padding:10px;} 10 </style> 11 12 <script type="text/x-template" id="c"> 13 <p class="my" v-on:click="todo+=1"> 14 {{todo}} 15 </p> 16 </script> 17 18 <script> 19 Vue.component('counter',{ 20 template: "#c", 21 data: function () { 22 return { 23 todo: 1 24 } 25 } 26 }) 27 </script> 28 */})) 运行结果:
以简单的js文件形式实现了Vue单文件组件, 优点是带样式, 用法简单, 接近于.vue文件,
不用webpack, 不用发ajax请求, 直接引入使用 !