Posted in Javascript onMay 02, 2017
本文实例为大家分享了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请求, 直接引入使用 !
Vuejs实现带样式的单文件组件新方法
- Author -
卡先森声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@