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

最新推荐文章于 2021-06-17 09:40:57 发布

weixin_34321977

最新推荐文章于 2021-06-17 09:40:57 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/akriver/p/6794457.html

本文介绍了一种在不使用Webpack的情况下实现Vue单文件组件的方法。通过编写简单的JS文件，可以创建带有样式的Vue组件，类似于.vue文件的形式。这种方式易于使用且不需要复杂的配置。

代码如下:

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