代码如下:
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请求, 直接引入使用 !
