vue.js原生组件化开发(一)——组件开发基础

vue

前言

vue作为一个轻量级前端框架,其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下基础知识吧。

组件使用流程
1.组件构建
1.1 extend构建法
调用Vue.extend()方法,构建一个名字为myCom的组件

1 var myCom = Vue.extend({

2 template: \'<div>这是我的组件</div>\'

3 })

其中template定义模板的标签,模板的内容需写在该标签下

1.2 template标签构建法
template标签构建,需在标签上加id属性用以后期注册

1 <template id="myCom">

2 <div>这是template标签构建的组件</div>

3 </template>

1.3 script标签构建法
script标签同样需加id属性,同时还得加type="text/x-template",加这个是为了告诉浏览器不执行编译里面的代码

1 <script type="text/x-template" id="myCom1">

2 <div>这是script标签构建的组件</div>

3 </script>

2.注册组件
(1)全局注册:一次注册,可在多个vue实例中使用,需调用Vue.component()方法,这个方法需传2个参数,第一个参数为组件名称,第二个参数为组件构造时定义的变量。

我们先用全局注册注册上面例子中创建的myCom组件

1 Vue.component(\'my-com\',myCom)

2 还有一种不需构建直接注册的写法——注册语法糖

3

4 Vue.component(\'my-com\',{

5 \'template\':\'<div>这是我的组件</div>\'

6 })

\'my-com\'为给组件自定义的名字,在使用时会用到,后面myCom对应的就是上面构建的组件变量。

注意命名规范,一般组件名字以短横线分隔或一个小写单词。
例:footer-nav,footernav

如果是用template及script标签构建的组件,第二个参数就改为它们标签上的id值

1 Vue.component(\'my-com\',{

2 template: \'#myCom\'

3 })

(2)局部注册:只能在注册该组件的实例中使用

1 var app = new Vue({

2 el: \'#app\',

3 components: {

4 \'my-com\': myCom

5 }

6 })

注册语法糖

1 var app = new Vue({

2 el: \'#app\',

3 components: {

4 \'my-com\': {

5 template: \'<div>这是我的组件</div>\'

6 }

7 }

8 })

template及script构建的组件

1 var app = new Vue({

2 el: \'#app\',

3 components: {

4 \'my-com\': {

5 template: \'#myCom\'

6 }

7 }

8 })

3.调用组件

我们只需在需要调用组件的地方写上组件名字的标签即可

1 <div>

2 /*调用组件*/

3 <my-com></my-com>

4 </div>

4.例子

4.1 全局注册
新建一个html文件,引入vue.js,并且定义2个vue实例app1和app2

 1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF-8">

5 <title>vue组件</title>

6 <script src="js/vue.js"></script>

7 </head>

8 <body>

9 <div id="app1">

10 <my-com></my-com>

11 </div>

12 <div id="app2">

13 <my-com></my-com>

14 </div>

15

16 <script>

17 /*构建组件*/

18 var myCom = Vue.extend({

19 template: \'<div>这是我的组件</div>\'

20 });

21 /*全局注册组件*/

22 Vue.component(\'my-com\',myCom);

23

24 /*定义vue实例app1*/

25 var app1 = new Vue({

26 el: \'#app1\'

27 });

28

29 /*定义vue实例app2*/

30 var app2 = new Vue({

31 el: \'#app2\'

32 });

33 </script>

34 </body>

35 </html>

打开浏览器查看效果

可以看到全局注册的组件在实例app1和实例app2中都可以被调用

一次注册,多处使用

4.2 局部注册
修改上面例子的html代码,将全局注册的组件改为局部注册,注册到实例app1下

 1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF-8">

5 <title>vue组件</title>

6 <script src="js/vue.js"></script>

7 </head>

8 <body>

9 <div id="app1">

10 <my-com></my-com>

11 </div>

12 <div id="app2">

13 <my-com></my-com>

14 </div>

15

16 <script>

17 var myCom = Vue.extend({

18 template: \'<div>这是我的组件</div>\'

19 });

20

21 // Vue.component(\'my-com\',myCom);

22 /*局部注册组件*/

23 var app1 = new Vue({

24 el: \'#app1\',

25 components:{

26 \'my-com\':myCom

27 }

28 });

29

30 var app2 = new Vue({

31 el: \'#app2\'

32 });

33 </script>

34 </body>

35 </html>

打开浏览器查看效果

可以看到只渲染了app1实例下的组件,app2实例虽然调用了该组件,但是因为这个组件没有在其内部注册,也没有全局注册,所以报错说找不到该组件。

一次注册,一处使用

4.3 template及script标签构建组件

 1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF-8">

5 <title>vue组件</title>

6 <script src="js/vue.js"></script>

7 </head>

8 <body>

9 <div id="app1">

10 <my-com></my-com>

11 <my-com1></my-com1>

12 </div>

13

14 <template id="myCom">

15 <div>这是template标签构建的组件</div>

16 </template>

17

18 <script type="text/x-template" id="myCom1">

19 <div>这是script标签构建的组件</div>

20 </script>

21

22 <script>

23 Vue.component(\'my-com1\',{

24 template: \'#myCom1\'

25 });

26

27 var app1 = new Vue({

28 el: \'#app1\',

29 components:{

30 \'my-com\':{

31 template: \'#myCom\'

32 }

33 }

34 });

35 </script>

36 </body>

37 </html>

打开浏览器查看效果

异步组件
当项目比较大型,结构比较复杂时,我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境,使用单文件组件,开发更简单,易上手,尤其是在对组件的处理上。对于原生vue.js,我们就得将组件构建在同一个html的script标签下或者html的外部js中,所有组件集中在一块,不容易管理,这也是原生vue,js的一点不便之处。
当然,在不使用脚手架的情况下想将一个个组件分别独立成一个个html文件,再去引用注册它们,也是可以实现的,但一般不推荐这样做。
vue.js可以将异步组件定义为一个工厂函数。
例子
新建一个head.html

 1 <div>

2 这是头部

3 </div>

4 在index.html中异步引入head.html作为组件

5

6 <!DOCTYPE html>

7 <html lang="en">

8 <head>

9 <meta charset="UTF-8">

10 <title>vue组件</title>

11 <script src="js/vue.js"></script>

12 <script src="js/jquery.min.js"></script>

13 </head>

14 <body>

15 <div id="app1">

16 <head-com></head-com>

17 </div>

18 <script>

19 Vue.component(\'head-com\', function (resolve, reject) {

20 $.get("./head.html").then(function (res) {

21 resolve({

22 template: res

23 })

24 });

25 });

26

27 var app1 = new Vue({

28 el: \'#app1\'

29 });

30

31 </script>

32 </body>

33 </html>

当然要注意一点,使用$.get获取本地文件是会跨域的,所以我们要把项目部署到服务器环境中。

我这里用的是xampp集成环境,将项目文件夹component放置在xampp/htdocs下,然后访问localhost/component/index.html,
效果如下

可以看到在index.html中引入的head.html里的内容已经被添加进去

以上是 vue.js原生组件化开发(一)——组件开发基础 的全部内容, 来源链接: utcz.com/z/376345.html

回到顶部