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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
javascript之bind使用介绍
Oct 09 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
Javascript学习指南
Dec 01 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 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中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
基于jquery的模态div层弹出效果
2010/08/21 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
vue-父子组件和ref实例详解
2019/11/10 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python将时分秒转换成秒的实例
2019/12/07 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python的logging模块基本用法
2020/12/24 Python
python之随机数函数的实现示例
2020/12/30 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
2015年女职工工作总结
2015/05/15 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
创业计划书之酒店
2019/08/30 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS