绝对100,金振彪结婚12天离婚,哈尔滨房价
本文实例为大家分享了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+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论