Vue.js一个文件对应一个组件实践


Posted in Javascript onOctober 27, 2016

这方面官网给的示例是需要工具来编译的,但是nodejs又没有精力去学,只好曲线救国。VueJS的作者在另一个网站有一篇文章讲到可以用jQuery.getScript或RequireJS实现组件,却没有给示例,于是自己摸索出了一种方法。

用到的工具:

vue.js --- 0.12.+ (需要0.12中async component支持)
require.js
text.js --- RequireJS text plugin https://github.com/requirejs/text

文件列表

index.html
index.js
comp.js (组件在这里定义)
comp.html (组件的模板)

实际上组件分成了js和html,html是模板内容,这里似乎与“一个文件对应一个组件”稍有不符,但如果模板内容比较多,这是有必要的,也更便于维护。 直接上代码。

comp.html -- 组件模板

<h2>{{title}}</h2>
<p>{{content}}</p>
comp.js -- 组件定义
define(['text!comp.html'], function (temp) { // 在requirejs中定义一个模块,依赖为模板文本
 return {
 props: ['title', 'content'],
 template: temp
 }
});

至此,一个简单的模板就建好了。然后就是在VueJS中注册这个组件。

index.js

require.config({
 paths: { // 指定text.js和vue.js的路径,不需要.js后缀,详见RequireJS文档
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});

require(['vue'], function (Vue) { // 依赖vue.js
 Vue.component('comp', function (resolve) { // 注册一个异步组件
 require(['comp'], function (comp) { // 因为我们要按需加载组件,因此require(['comp'])必须在function里
 resolve(comp)
 })
 });
 new Vue({
 el: 'body'
 });

 //new Vue({
 // el: 'body',
 // components: {
 // comp: function (resolve) {
 // require(['comp'], function (comp) {
 // resolve(comp)
 // })
 // }
 // }
 //});
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>

<component is="comp" title="我是一个组件" content="fjkldsjfkldjsklgjks"></component>

<script data-main="index" src="../../../assets/require.js"></script>

</body>
</html>

运行代码,把<component>注释掉就能看到区别。

如果组件比较多,注册组件就会很繁琐,因此可以把这部分提炼出来。

改进后的index.js

require.config({
 paths: {
 text: '../../../assets/requirejs/text',
 vue: '../../../assets/vue/vue'
 }
});

function conponent(name) {
 return function (resolve, reject) {
 require([name], function (comp) {
 resolve(comp)
 })
 }
}

require(['vue'], function (Vue) {
 Vue.component('comp', conponent('comp'));
 Vue.component('comp2', conponent('comp2'));

 new Vue({
 el: 'body'
 });
});

至此。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
javaScript Array(数组)相关方法简述
Jul 25 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 #Javascript
node.js文件上传处理示例
Oct 27 #Javascript
Vue.js表单控件实践
Oct 27 #Javascript
vue实现可增删查改的成绩单
Oct 27 #Javascript
vuex实现简易计数器
Oct 27 #Javascript
微信小程序  生命周期详解
Oct 27 #Javascript
require.js+vue开发微信上传图片组件
Oct 27 #Javascript
You might like
JS 网站性能优化笔记
2011/05/24 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python实现教务管理系统
2018/03/12 Python
基于Python List的赋值方法
2018/06/23 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
实习协议书范本
2014/09/25 职场文书
房屋买卖协议样本
2014/11/16 职场文书
开除员工通知
2015/04/22 职场文书