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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
js活用事件触发对象动作
Aug 10 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
js仿淘宝放大镜效果
Dec 28 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Python 登录网站详解及实例
2017/04/11 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
python购物车程序简单代码
2018/04/18 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
教师对照四风自我剖析材料
2014/09/30 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
生日答谢词
2015/01/05 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python