原创: Vuejs实现单文件组件新方法,带样式

 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>

 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 */}))