Vuejs实现带样式的单文件组件新方法
更新时间:2017年05月02日 09:27:18 作者:卡先森
这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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> */}))
运行结果:
以简单的js文件形式实现了Vue单文件组件, 优点是带样式, 用法简单, 接近于.vue文件,
不用webpack, 不用发ajax请求, 直接引入使用 !
相关文章
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
这篇文章主要介绍了Vue-cli中的静态资源管理(src/assets和static/的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06vue项目中vue-i18n和element-ui国际化开发实现过程
这篇文章主要介绍了vue项目中vue-i18n和element-ui国际化开发实现过程,非常不错,具有参考借鉴价值,需要的朋友可以参考下2018-04-04
最新评论