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

前端之家收集整理的这篇文章主要介绍了Vuejs实现带样式的单文件组件新方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

代码如下:

example.html

Vue component

//引入组件mycomp.js

mycomp.js

方法输出注释中的组件代码 function heredoc(fn){ return fn.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]; } //输出组件代码 document.write(heredoc(function(){ /*

<script type="text/x-template" id="c">
<p class="my" v-on:click="todo+=1">
{{todo}}

*/}))

运行结果:

以简单的js文件形式实现了Vue单文件组件,优点是带样式,用法简单,接近于.vue文件,

不用webpack,不用发ajax请求,直接引入使用 !

原文链接:https://www.f2er.com/vue/39574.html

猜你在找的Vue相关文章