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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
基于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实现网上点歌(二)
2006/10/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python小白学习包管理器pip安装
2020/06/09 Python
python代码中怎么换行
2020/06/17 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
本科生学习总结的自我评价
2013/10/02 职场文书
退休感言
2014/01/28 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
通报表扬范文
2015/01/17 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis