前言

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原生组件化开发（一）——组件开发基础的更多相关文章

  1. vue.js原生组件化开发（二）——父子组件

    前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...

  2. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  3. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  4. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. Cocoapods组件化之搭建组件化项目框架

    一,概述 随着公司业务需求的不断迭代发展,工程的代码量和业务逻辑也越来越多,原始的开发模式和架构已经无法满足我们的业务发展速度了,这时我们就需要将原始项目进行一次重构大手术了.这时我们应该很清晰这次手 ...

  6. Vue.js 学习笔记之二：数据驱动开发

    在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...

  7. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  8. Vue.js（24）之 弹窗组件封装

    同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade&qu ...

  9. 《vue.js实战》练习---数字输入框组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. OpenJDK源码研究笔记(一)-参数检查&抛出带关键错误提示信息的异常

    OpenJDK源码研究笔记系列文章,是我在阅读OpenJDK7源码的过程中的一些体会.收获.看法. 把研究过程中的成长和收获一点点地整理出来,是对自己研究学习的一个小结,也有可能给学习Java的一些同 ...

  2. 洛谷 P2970 [USACO09DEC]自私的放牧Selfish Grazing

    P2970 [USACO09DEC]自私的放牧Selfish Grazing 题目描述 Each of Farmer John's N (1 <= N <= 50,000) cows li ...

  3. RPC架构

    RPC架构 学习了: https://www.cnblogs.com/ChrisMurphy/p/6550184.html RPC架构简介,有一个Java例子: http://blog.csdn.ne ...

  4. PIC18F4520 + NRF24L01

    SI SO应该对调过来用.. TX /* ** Tx.c ** Transmit test program for PIC18F4520 and nRF24L01 or nRF24L01+ ** Us ...

  5. 实习第四天（bboss框架学习）

    现在好像比较使用的管理工具是gradle管理工具,学长说这个管理工具比maven管理工具要好用! 我今天主要就是想要安装好的gradle这个管理工具,但是可能是我的eclispe版本的问题,我没能安装 ...

  6. Scala学习笔记及与Java不同之处总结-从Java开发者角度

    Scala与Java具有很多相似之处,但又有很多不同.这里主要从一个Java开发者的角度,总结在使用Scala的过程中所面临的一些思维转变. 这里仅仅是总结了部分两种语言在开发过程中的不同,以后会陆续 ...

  7. FZOJ--2214--Knapsack problem(背包)

    Problem 2214 Knapsack problem Accept: 5    Submit: 8 Time Limit: 3000 mSec    Memory Limit : 32768 K ...

  8. 21.hash_map(已被废弃不再使用 被unordered_map代替)

    #include <string> //老版本的unordered_map(已经废弃不再使用) #include <hash_map> #include <iostrea ...

  9. BZOJ 3503 高斯消元

    思路: 高斯消元就好啦 注意每个格子最多只能和4个相邻 所以是 n*m*n*m*5 的 并不会TLE //By SiriusRen #include <cstdio> #include & ...

  10. js base64加密与C#后台base64解密

    js代码 function encode64(input) { var output = ""; var base = new Base64(); var output = bas ...