Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
2024-06-11 03:40:38
Vue.js实训【基础理论(5天)+项目实战(5天)】博客汇总表【详细笔记】
目 录
4、组件化开发
4.1、组件的注册
全局注册
局部注册（只能在当前整个Vue实例的范围内才可以使用）
使用组件
组件介绍-案例代码
4.2、组件的配置选项
案例代码
轮播图实例
功能分析
运行效果1（点击两边按钮-切换图片）
运行效果图
代码
运行效果2（定时器、鼠标移入-图片静止）
运行效果图
代码
4、组件化开发
什么是组件？？？ 组件就是零件，组成⼀个功能局部零件！
4.1、组件的注册
全局注册
// <script></script>中
Vue.component('组件名',{template:"#id值" // 指定组件的模板
})// HTML 中
<template id="id值"><!--模板只能有⼀个根标签！--><div>模板内容</div>
</template>局部注册（只能在当前整个Vue实例的范围内才可以使用）
new Vue({el:"",data:{},...,components:{ // 带s组件名:{template:"#id值"}}
})使用组件
<组件名></组件名>注意点
组件命名，如果使用驼峰命名法，那么，使⽤组件的时候 需要 变成中划线的模式。
组件介绍-案例代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>06、组件介绍</title><style>* {margin: 0;padding: 0;}.item {display: inline-block;width: 340px;border: 2px solid blue;margin: 10px}.tit {height: 46px;padding: 0 10px;line-height: 46px;background-color: #eee;}.cot {min-height: 200px;padding: 10px;}.kaixin {width: 100px;height: 100px;background-color: orange;}</style><script src="./vue.js"></script>
</head><body><!-- <div class="item"><h3 class="tit">学员故事</h3><div class="cot">内容</div></div><div class="item"><h3 class="tit">公司新闻</h3><div class="cot">内容</div></div><div class="item"><h3 class="tit">公司荣誉</h3><div class="cot">内容</div></div> --><div id="app"><item-box></item-box><item-box></item-box><item-box></item-box><kaixin></kaixin></div><hr><div id="app2"><item-box></item-box></div><!-- 模板内容 --><template id="mb"><!-- 【注意点：】 组件的模板只能有一个根标签！ --><div class="item"> <!-- 这是根标签！--><h3 class="tit">学员故事</h3><div class="cot">内容</div></div></template></body>
<script>// 全局 注册一个组件！/*Vue.component('组件名',{ 组件的配置对象信息 })*/Vue.component('itemBox', {// template: "<h1>111</h1>"template: "#mb" // template指定这个组件的模板内容！})// 组件化开发： // 每个小功能模块都是独立的！维护起来简单！ 复用性高！// 模块化、组件化、工程化、自动化new Vue({el: "#app",components: { // 局部组件！kaixin: {template: "<div class='kaixin'>开心组件</div>"}}})new Vue({el: "#app2"})
</script></html>4.2、组件的配置选项
- 组件的data是⼀个函数，且这个函数返回⼀个对象! 这个对象就是组件的数据源！
- template是组件的模板。
- 其它配置选项和Vue实例⼀致。（computed、watch、components）
- 注意点：组件里面不能直接⽤外⾯的数据或事件函数，外部也不可以直接⽤⾥⾯的数据和事件函数。
案例代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>07、组件的配置选项</title><style>.box {display: inline-block;background-color: #eee;padding: 4px;}.box input {width: 40px;text-align: center;}</style><script src="./vue.js"></script>
</head><body><div id="app"><num-box></num-box><num-box></num-box><num-box></num-box></div><!-- 放在app外面 --><template id="nums"><div class="box"><button @click="reudce">-</button><input type="text" v-model="num"><button @click="add">+</button></div></template>
</body>
<script>Vue.component('numBox', {template: "#nums",data: function () { // 组件的data是一个函数，且这个函数返回一个对象，返回的这个对象就是组件的数据源return {num: 1}},methods: {add() {this.num++},reudce() {this.num--;}},computed: {},watch: {},components: {}})// 为什么组件的data是一个函数呢！ 因为组件的数据都是独立的！ 相同的组件，数据之间是不会有干扰的！new Vue({el: "#app",data: { // Vue实例的data是一个对象！msg: "11111"}})</script></html>轮播图实例
功能分析
- ⾃动播放；
- 左右按钮切换图⽚； [1]
- 分⻚下标点击切换到对应图⽚； [2]
- 图⽚切换和下标⼀致关联； [3]
- 输⼊移⼊轮播区域⾃动播放暂停；离开区域，⾃动播放开始。
运行效果1（点击两边按钮-切换图片）
运行效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>08、轮播图组件</title><script src="./vue.js"></script><style>* {margin: 0;padding: 0;list-style: none;}.banner {width: 540px;height: 280px;border: 2px solid blue;margin: 20px auto;position: relative;overflow: hidden;}.banner .bd li,.banner .bd li img {width: 540px;height: 280px;}.banner .bd {width: 10000px;position: relative;/* 相当于自己原来的位置定位！*/left: 0;overflow: hidden;background-color: #eee;transition: all .3s linear;}.banner .bd li {float: left;}.banner .btn {width: 35px;height: 70px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 70px;font-size: 30px;position: absolute;top: 50%;color: #fff;margin-top: -35px;cursor: pointer;}.banner .btn:hover {background-color: rgba(0, 0, 0, .8);}.banner .prev {left: 0;}.banner .next {right: 0;}.banner .hd {position: absolute;display: inline-block;left: 50%;transform: translateX(-50%);/*平移自身的百分之50%*/bottom: 0;background-color: orange;padding: 3px 8px;}.banner .hd li {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #fff;font-size: 10px;text-align: center;margin: 0 10px;cursor: pointer;}.banner .hd li.active {background-color: red;color: #fff;}</style>
</head><body><div id="app"><banner></banner></div><template id="lunbo"><!-- 主容器 --><div class="banner"><!-- 滑块部分 --><ul class="bd" :style="'left:-'+curIndex*540+'px'"><li v-for="item in list"><a :href="item.link"><img :src="item.src" :alt="item.title"></a></li></ul><!-- 分页器 --><ul class="hd"><li v-for="(item,index) in list" :class="curIndex==index ? 'active':''">{{index}}</li></ul><!-- 左右按钮 --><span class="btn prev" @click="leftClick"><</span><span class="btn next" @click="rightClick">></span></div></template></body>
<script>Vue.component('banner', {template: "#lunbo",data() { // JS 里面方法的简写 方法名:function{} 简写 方法名(){}return {curIndex: 0, // 当前下标！ 【核心！】list: [{link: "http://www.taobao.com",src: "https://img.alicdn.com/simba/img/TB1wrEbX5cKOu4jSZKbSuw19XXa.jpg",title: "别克"},{link: "http://www.jd.com",src: "https://img.alicdn.com/tfs/TB1G9x1Hbr1gK0jSZFDXXb9yVXa-520-280.png_q90_.webp",title: "胶原蛋白"},{link: "http://www.sina.com",src: "https://img.alicdn.com/tfs/TB1KXpUHG61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp",title: "图书影像"}]}},methods: {// 右点击rightClick() {if (this.curIndex == this.list.length - 1) {this.curIndex = 0;} else {this.curIndex++;}},// 左点击leftClick() {if (this.curIndex == 0) {this.curIndex = this.list.length - 1} else {this.curIndex--;}}}})new Vue({el: "#app"})
</script></html>运行效果2（定时器、鼠标移入-图片静止）
运行效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>08、轮播图组件</title><script src="./vue.js"></script><style>* {margin: 0;padding: 0;list-style: none;}.banner {width: 540px;height: 280px;border: 2px solid blue;margin: 20px auto;position: relative;overflow: hidden;}.banner .bd li,.banner .bd li img {width: 540px;height: 280px;}.banner .bd {width: 10000px;position: relative;/* 相当于自己原来的位置定位！*/left: 0;overflow: hidden;background-color: #eee;transition: all .3s linear;}.banner .bd li {float: left;}.banner .btn {width: 35px;height: 70px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 70px;font-size: 30px;position: absolute;top: 50%;color: #fff;margin-top: -35px;cursor: pointer;}.banner .btn:hover {background-color: rgba(0, 0, 0, .8);}.banner .prev {left: 0;}.banner .next {right: 0;}.banner .hd {position: absolute;display: inline-block;left: 50%;transform: translateX(-50%);/*平移自身的百分之50%*/bottom: 0;background-color: orange;padding: 3px 8px;}.banner .hd li {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #fff;font-size: 10px;text-align: center;margin: 0 10px;cursor: pointer;}.banner .hd li.active {background-color: red;color: #fff;}</style>
</head><body><div id="app"><banner></banner><hr><banner></banner></div><template id="lunbo"><!-- 主容器 --><div class="banner" @mouseenter="stop" @mouseleave="start"><!-- 滑块部分 --><ul class="bd" :style="'left:-'+curIndex*540+'px'"><li v-for="item in list"><a :href="item.link"><img :src="item.src" :alt="item.title"></a></li></ul><!-- 分页器 --><ul class="hd"><li v-for="(item,index) in list" @click="change(index)" :class="curIndex==index ? 'active':''">{{index}}</li></ul><!-- 左右按钮 --><span class="btn prev" @click="leftClick"><</span><span class="btn next" @click="rightClick">></span></div></template></body>
<script>Vue.component('banner', {template: "#lunbo",data() { // JS 里面方法的简写 方法名:function{} 简写 方法名(){}return {curIndex: 0, // 当前下标！ 【核心！】timer: "", // 定时器list: [{link: "http://www.taobao.com",src: "https://img.alicdn.com/simba/img/TB1wrEbX5cKOu4jSZKbSuw19XXa.jpg",title: "别克"},{link: "http://www.jd.com",src: "https://img.alicdn.com/tfs/TB1G9x1Hbr1gK0jSZFDXXb9yVXa-520-280.png_q90_.webp",title: "胶原蛋白"},{link: "http://www.sina.com",src: "https://img.alicdn.com/tfs/TB1KXpUHG61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp",title: "图书影像"}]}},mounted: function () { // 生命周期函数：【挂载完成之后，自动执行！】this.autplay();// 调用自动播放},methods: {// 右点击rightClick() {if (this.curIndex == this.list.length - 1) {this.curIndex = 0;} else {this.curIndex++;}},// 左点击leftClick() {if (this.curIndex == 0) {this.curIndex = this.list.length - 1} else {this.curIndex--;}},// 鼠标移入轮播区域start() {this.autplay();// 调用自动播放方法},// 数量离开轮播区域stop() {clearInterval(this.timer);},// 自动播放autplay() {var _this = this;this.timer = setInterval(function () {// console.log(_this)// 点击一下右按钮！_this.rightClick();}, 3000);},// 分页器被点击了change(idx) {this.curIndex = idx;}}})new Vue({el: "#app"})
</script></html>多谢观看~
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】相关推荐
- 原生js实现轮播图实例教程
原生js实现轮播图实例教程 本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
- JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能 前言 轮播图案例 总结 前言 轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
- 原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
- 微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
- JS实现轮播图（手动切换+自动切换两种方法）
1.轮播图效果图 2.完整代码如下 <!doctype html> <html> <head> <meta charset="utf-8" ...
- HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 （4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
- vue写一个轮播图实例（没有自动轮播）
要点: 1.<li v-for="(item,index) in arr" v-on:click="lick(item)"><!-- 第{{i ...
- html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
最新文章
- (20/24) webpack实战技巧：watch实现热打包和添加代码备注
- lua源代码分析02：内存管理
- 开源 免费 java CMS - FreeCMS1.2-标签 userList
- MySQL字段类型与Java数据类型的对应关系
- boost::geometry模块自定义坐标系示例
- MySQL 备份与主从复制
- linux性能并发 带机量,性能测试笔记（一）：吞吐量与并发数
- lee最短路算法_Lee算法的解释：迷宫运行并找到最短路径
- 网页挂码方式html css,CSS代码 解决网页挂马问题
- vs设计窗口不见了_VS厂欧米茄海马300系列女王密使腕表评测
- html页面获取时间格式,js实现动态获取系统时间，显示到页面上
- micropython入门教程-【ESP8266】MicroPython的快速入门教程
- C# sql参数拼接时，防止sql注入
- linux 显存占用内存,Linux服务器内存、CPU、显卡、硬盘使用情况查看
- Hadoop HA集群部署
- 综合能源管理服务认证是什么？综合能源管理服务认证含哪些专业？综合能源服务认证流程
- 训练集，验证集，测试集分别是什么
- 微信微博防劫持短网址生成
- Python 进行excel查重
- 《质量总监成长记》笔记