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


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>
*/}))

运行结果:

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

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

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

Javascript 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
js实现浏览器打印功能的示例代码
Jul 15 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 #Javascript
老生常谈js-react组件生命周期
May 02 #Javascript
js 用于检测类数组对象的函数方法
May 02 #Javascript
使用Bootstrap打造特色进度条效果
May 02 #Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 #Javascript
js实现字符全排列算法的简单方法
May 01 #Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 #Javascript
You might like
献给php初学者(入门学习经验谈)
2010/10/12 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php通过session防url攻击方法
2014/12/10 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP静态成员变量
2017/02/14 PHP
IE 当eval遇上function的处理
2011/08/09 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
Python3 能振兴 Python的原因分析
2014/11/28 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
servlet面试题
2012/08/20 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
应届大学生求职信
2013/12/01 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
艺术节开幕词
2015/01/28 职场文书
2015年度保密工作总结
2015/04/24 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python