vue.js原生组件化开发（一）——组件开发基础
前言
vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下基础知识吧。
组件使用流程
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实例中使用，需调用Vue.component()方法，这个方法需传2个参数，第一个参数为组件名称，第二个参数为组件构造时定义的变量。
我们先用全局注册注册上面例子中创建的myCom组件
Vue.component('my-com',myCom)
还有一种不需构建直接注册的写法——注册语法糖
Vue.component('my-com',{
'template':'<div>这是我的组件</div>'
})
'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。
注意命名规范，一般组件名字以短横线分隔或一个小写单词。
例：footer-nav，footernav
如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值
Vue.component('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>'
});
/*全局注册组件*/
Vue.component('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>'
}); // Vue.component('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>
Vue.component('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>
Vue.component('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里的内容已经被添加进去
vue.js原生组件化开发（一）——组件开发基础的更多相关文章
- vue.js原生组件化开发（二）——父子组件
前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...
- Vue.js 学习笔记 第7章 组件详解
本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Cocoapods组件化之搭建组件化项目框架
一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...
- Vue.js 学习笔记之二：数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- vue.js路由vue-router（一）——简单路由基础
前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...
- Vue.js（24）之 弹窗组件封装
同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade&qu ...
- 《vue.js实战》练习---数字输入框组件
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- 【Henu ACM Round#24 E】Connected Components
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 要求把连续的一段li..ri的边全都删掉. 然后求剩下的图的联通数 如果暴力的话 复杂度显然是O(k*m)级别的. 考虑我们把li. ...
- 在android中，编译的项目使用到第三方jar的导入方法 终极版！
1,在android系统环境中编译自己的项目时,往往会用到第三方jar包.这些jar包在eclipse中加入编译,一路畅通,由于eclipse已经帮助你配置好了.可是当把这个项目复制到系统环境中编译时 ...
- 1、初始JAVA
一. 语言的翻译分两种: 编译型语言:例如c语言.c++语言 优点:速度快 缺点:不能跨平台 编译器编译——>特定平台的目标文件obj——>特定平台 ...
- java基本数据类型复习
1.基本取值范围及对应封装器(参考:http://www.cnblogs.com/Free-Thinker/p/4573068.html): 简单类型 boolean byte char short ...
- js数组的操作 Full
js数组的操作 用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一 ...
- <Three.js>（第二节）添加长方体
一.实验内容 上一节已经搭好了实验的框架.这一节我们将在屏幕上显示一些几何图形.如下图所示,我们将在屏幕上显示一个正方体. 二.实验步骤 1.创建场景 正像上一节所说,首先我们需要建一个场景,场景就是 ...
- Redis缓存Mysql模拟用户登录Java实现实例
https://blog.csdn.net/suneclipse/article/details/50920396
- DELL T430进RAID的方式：， 硬盘损坏后的处理方式
**DELL T430 新机安装2块硬盘后进RAID的方式: ** 一. BIOS更改 1.改启动方式为RAID mode : 开机按F2进入BIOS 界面 --->System BIOS - ...
- [BJOI2014]大融合 LCT维护子树信息
Code: #include <cstdio> #include <algorithm> #include <cstring> #include <strin ...
- vue 父子组件传值：props和$emit
<!--子组件页面--> <template> <div class="hello"> <!-- 添加一个input输入框 添加keypr ...