Vuejs实现带样式的单文件组件新方法

2019-11-19 16:41:02

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Vuejs实现单文件组件的方法，供大家参考，具体内容如下

代码如下:

example.html

<script src="vue.js"></script><div id="example"> <h3>Vue component<h3> <counter></counter> <counter></counter></div>//引入组件mycomp.js<script src="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" id="c"><p class="my" v-on:click="todo+=1"> {{todo}}</p></script><script>Vue.component('counter',{ template: "#c", data: function () {  return {    todo: 1  } }})</script>*/}))

运行结果: