JSvue组件创建过程
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JSvue组件创建过程
vue.js原⽣组件化开发（⼀）——组件开发基础
0.3472017.05.09 12:00:54字数 1120阅读 3352
前⾔
vue作为⼀个轻量级前端框架，其核⼼就是组件化开发。
我们⼀般常⽤的是⽤脚⼿架vue-cli来进⾏开发和管理，⼀个个组件即为⼀个个vue页⾯，这种叫单⽂件组件。
我们在引⽤组件之时只需将组件页⾯引⼊，再注册即可使⽤。
那么不⽤脚⼿架，如何进⾏组件开发呢，本⽂先介绍⼀下基础知识吧。
组件使⽤流程分3步-----1、构建（定义），2、注册，3、使⽤1.组件构建
1.1 extend构建法
调⽤Vue.extend()⽅法，构建⼀个名字为myCom的组件
var myCom = Vue.extend({
template: '<div>这是我的组件</div>'
})
其中template定义模板的标签，模板的内容需写在该标签下
1.2 template标签构建法
template标签构建，需在标签上加id属性⽤以后期注册
<template id="myCom">
<div>这是template标签构建的组件</div>
</template>
1.3 script标签构建法
script标签同样需加id属性，同时还得加type="text/x-template"，加这个是为了告诉浏览器不执⾏编译⾥⾯的代码
<script type="text/x-template" id="myCom1">
<div>这是script标签构建的组件</div>
</script>
2.注册组件
（1）全局注册：⼀次注册，可在多个vue实例中使⽤，需调⽤ponent()⽅法，这个⽅法需传2个参数，第⼀个参数为组件名称，第⼆个参数为组件构造时定义的变量。
我们先⽤全局注册注册上⾯例⼦中创建的myCom组件
ponent('my-com',myCom)
还有⼀种不需构建直接注册的写法——注册语法糖
ponent('my-com',{
'template':'<div>这是我的组件</div>'
})
'my-com'为给组件⾃定义的名字，在使⽤时会⽤到，后⾯myCom对应的就是上⾯构建的组件变量。
注意命名规范，⼀般组件名字以短横线分隔或⼀个⼩写单词。
例：footer-nav，footernav
如果是⽤template及script标签构建的组件，第⼆个参数就改为它们标签上的id值
ponent('my-com',{
template: '#myCom'
})
（2）局部注册：只能在注册该组件的实例中使⽤
var app = new Vue({
el: '#app',
components: {
'my-com': myCom
}
})
注册语法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '<div>这是我的组件</div>'
}
}
})
template及script构建的组件
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '#myCom'
}
}
})
3.调⽤组件
我们只需在需要调⽤组件的地⽅写上组件名字的标签即可
<div>
/*调⽤组件*/
<my-com></my-com>
</div>
4.例⼦
4.1 全局注册
新建⼀个html⽂件，引⼊vue.js，并且定义2个vue实例app1和app2 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
/*构建组件*/
var myCom = Vue.extend({
template: '<div>这是我的组件</div>'
});
/*全局注册组件*/
ponent('my-com',myCom);
/*定义vue实例app1*/
var app1 = new Vue({
el: '#app1'
});
/*定义vue实例app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打开浏览器查看效果
可以看到全局注册的组件在实例app1和实例app2中都可以被调⽤
⼀次注册，多处使⽤
4.2 局部注册
修改上⾯例⼦的html代码，将全局注册的组件改为局部注册，注册到实例app1下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
var myCom = Vue.extend({
template: '<div>这是我的组件</div>'
});
// ponent('my-com',myCom);
/*局部注册组件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打开浏览器查看效果
可以看到只渲染了app1实例下的组件，app2实例虽然调⽤了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。
⼀次注册，⼀处使⽤
4.3 template及script标签构建组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id="myCom">
<div>这是template标签构建的组件</div>
</template>
<script type="text/x-template" id="myCom1">
<div>这是script标签构建的组件</div>
</script>
<script>
ponent('my-com1',{
template: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom'
}
}
});
</script>
</body>
</html>
打开浏览器查看效果
异步组件
当项⽬⽐较⼤型，结构⽐较复杂时，我们⼀般选⽤vue-cli脚⼿架去构建项⽬。
因为vue-cli集成了webpack环境，使⽤单⽂件组件，开发更简单，易上⼿，尤其是在对组件的处理上。
对于原⽣vue.js，我们就得将组件构建在同⼀个html的script标签下或者html的外部js中，所有组件集中在⼀块，不容易管理，这也是原⽣vue,js的⼀点不便之处。
当然，在不使⽤脚⼿架的情况下想将⼀个个组件分别独⽴成⼀个个html⽂件，再去引⽤注册它们，也是可以实现的，但⼀般不推荐这样做。
vue.js可以将异步组件定义为⼀个⼯⼚函数。
例⼦
新建⼀个head.html
<div>
这是头部
</div>
在index.html中异步引⼊head.html作为组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue组件</title>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
ponent('head-com', function (resolve, reject) {
$.get("./head.html").then(function (res) {
resolve({
template: res
})
});
});
var app1 = new Vue({
el: '#app1'
});
</script>
</body>
</html>
当然要注意⼀点，使⽤$.get获取本地⽂件是会跨域的，所以我们要把项⽬部署到服务器环境中。
我这⾥⽤的是xampp集成环境，将项⽬⽂件夹component放置在xampp/htdocs下，然后访问localhost/component/index.html，
效果如下
可以看到在index.html中引⼊的head.html⾥的内容已经被添加进去。