Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】

Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】 

目   录

4、组件化开发

4.1、组件的注册

全局注册

局部注册（只能在当前整个Vue实例的范围内才可以使用）

使用组件

组件介绍-案例代码

4.2、组件的配置选项

案例代码

轮播图实例

功能分析

运行效果1（点击两边按钮-切换图片）

运行效果图

代码

运行效果2（定时器、鼠标移入-图片静止）

运行效果图

代码

---

4、组件化开发

什么是组件？？？ 组件就是零件，组成⼀个功能局部零件！

4.1、组件的注册

全局注册

// 中
Vue.component('组件名',{
    template:"#id值" // 指定组件的模板
})


// HTML 中

局部注册（只能在当前整个Vue实例的范围内才可以使用）

new Vue({
    el:"",
    data:{},
    ...,
    components:{ // 带s
        组件名:{
            template:"#id值"
        }
    }
})

使用组件

<组件名>

注意点

组件命名，如果使用驼峰命名法，那么，使⽤组件的时候 需要 变成中划线的模式。

组件介绍-案例代码

4.2、组件的配置选项

• 组件的data是⼀个函数，且这个函数返回⼀个对象! 这个对象就是组件的数据源！
• template是组件的模板。
• 其它配置选项和Vue实例⼀致。（computed、watch、components）
• 注意点：组件里面不能直接⽤外⾯的数据或事件函数，外部也不可以直接⽤⾥⾯的数据和事件函数。

案例代码

轮播图实例

功能分析

• ⾃动播放；
• 左右按钮切换图⽚； [1]
• 分⻚下标点击切换到对应图⽚； [2]
• 图⽚切换和下标⼀致关联； [3]
• 输⼊移⼊轮播区域⾃动播放暂停；离开区域，⾃动播放开始。

运行效果1（点击两边按钮-切换图片）

运行效果图

代码

运行效果2（定时器、鼠标移入-图片静止）

运行效果图

代码

多谢观看~