[笔记][转] 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.注册组件

2.1 全局注册
一次注册,可在多个vue实例中使用,需调用Vue.component()方法,这个方法需传2个参数,第一个参数为组件名称,第二个参数为组件构造时定义的变量(id值),也可以是构建代码自身——注册语法糖。

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

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

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

Vue.component('my-com',{
    'template':'<div>这是我的组件</div>'
})

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

注意命名规范,一般组件名字以短横线分隔或一个小写单词。例:footer-nav,footernav
若使用驼峰命名组件的话,在使用时需要把大写字母改成“-小写”的形态,例:myCom -使用→ <my-com>…</my-com>

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

Vue.component('my-com',{
    template: '#myCom'
})

2.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>

原文:简书

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值