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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
js时间控件只显示年月
Jan 08 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
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
PHP 文件类型判断代码
2009/03/13 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP _construct()函数讲解
2019/02/03 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
pytorch masked_fill报错的解决
2020/02/18 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
年度考核评语
2014/01/19 职场文书
酒店端午节促销方案
2014/02/18 职场文书
销售经理岗位职责
2014/03/16 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
励志演讲稿大全
2014/08/21 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书