实验5：组件应用（4学时）
（1）掌握组件的创建方法（全局组件、局部组件）； （2）重点学会组件之间的数据传递（prop传值、自定义事件）； （3）学会动态组件的创建。 | ||||||||||
运用组件的相关知识实现选项卡的切换，点击删除，删除相应电影，效果如图1~3所示。
参考基础代码如下：          请在此基础上，利用Vue组件相关知识完成代码的编写和调试。 (可以参考教材p140-142； CSS代码见课程QQ群共享文件) | ||||||||||
1. HTML结构与语义化 使用<div>标签作为容器，通过类名区分不同的功能区域，如<div class="box">、<div class="top">等。 使用<ul>和<li>标签创建选项卡（Tabs），并通过class动态绑定样式，实现选项卡的切换效果。 使用<span>标签来显示电影的排名、名称和主演信息。 2. CSS样式 使用flex布局实现选项卡和电影列表的水平排列，如ul.tabs和.main div。 通过:class动态绑定类名，实现选项卡的激活状态样式切换（active类）。 使用padding、margin、border等属性来调整元素的间距和边框样式。 3. Vue.js基础 组件化开发：通过Vue.component定义了hit-component和classic-component两个子组件，分别用于显示“热播”和“经典”电影列表。 数据绑定：使用v-for指令实现电影列表的循环渲染，v-if指令根据activeTab的值动态切换显示的组件。 事件绑定：通过@click绑定点击事件，实现选项卡的切换和电影的删除操作。 父子组件通信：父组件通过props向子组件传递数据（电影列表），子组件通过$emit向父组件发送事件（删除电影）。 4. JavaScript操作 使用splice方法动态删除数组中的电影项，实现电影的删除功能。 通过data定义Vue实例的数据，包括激活的选项卡activeTab、热播电影列表hitmovie和经典电影列表classicmovie。 5. 网络资源加载 使用<script>标签引入Vue.js框架，通过CDN地址加载资源。如果加载失败，可能是由于网络问题或链接地址不正确。 | ||||||||||
    TabSwitchEffect.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电影排行</title> <style> ul.tabs { list-style-type: none; padding: 0; display: flex; } ul.tabs li { display: inline-block; padding: 10px 20px; cursor: pointer; } ul.tabs li.active { background-color: #66CCFF; color: white; } .main { margin-top: 10px; } .main div { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px dashed #333; } .main div span { margin-left: 10px; } button { margin-left: 20px; padding: 5px 10px; } </style> </head> <body> <div id="box"> <div class="box"> <div class="top"> <span class="title">电影排行</span> <ul class="tabs"> <li :class="{active: activeTab === 'hit'}" @click="activeTab = 'hit'">热播</li> <li :class="{active: activeTab === 'classic'}" @click="activeTab = 'classic'">经典</li> </ul> </div> <div v-if="activeTab === 'hit'"> <hit-component :movies="hitmovie" @remove-movie="removeMovie"></hit-component> </div> <div v-if="activeTab === 'classic'"> <classic-component :movies="classicmovie" @remove-movie="removeMovie"></classic-component> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> Vue.component('hit-component', { template: ` <div class="main"> <div v-for="(movie, index) in movies" :key="index"> <span>{{ index + 1 }}</span> <span>{{ movie.name }}</span> <span>{{ movie.star }}</span> <button @click="$emit('remove-movie', index)">删除</button> </div> </div> `, props: ['movies'] }); Vue.component('classic-component', { template: ` <div class="main"> <div v-for="(movie, index) in movies" :key="index"> <span>{{ index + 1 }}</span> <span>{{ movie.name }}</span> <span>{{ movie.star }}</span> <button @click="$emit('remove-movie', index)">删除</button> </div> </div> `, props: ['movies'] }); var vm = new Vue({ el: '#box', data: { activeTab: 'hit', hitmovie: [ { name: '终结者5', star: '阿诺德.施瓦辛格' }, { name: '飓风营救', star: '连姆.尼森' }, { name: '我是传奇', star: '威尔.史密斯' }, { name: '一线声机', star: '杰森.斯坦森' }, { name: '罗马假日', star: '格里高利.派克' }, { name: '史密斯夫妇', star: '布拉德.皮特' }, { name: '午夜邂逅', star: '克里斯.埃文斯' } ], classicmovie: [ { name: '机械师2：复活', star: '杰森.斯坦森' }, { name: '变形金刚', star: '希亚.拉博夫' }, { name: '暮光之城', star: '克里斯汀.斯图尔特' }, { name: '怦然心动', star: '玛德琳.卡罗尔' }, { name: '电话情缘', star: '杰西.麦特卡尔菲' }, { name: '超凡蜘蛛侠', star: '安德鲁.加菲尔德' }, { name: '雷神', star: '克里斯.海姆斯沃斯' } ] }, methods: { removeMovie(index) { if (this.activeTab === 'hit') { this.hitmovie.splice(index, 1); } else if (this.activeTab === 'classic') { this.classicmovie.splice(index, 1); } } } }); </script> </body> </html> | ||||||||||
1. Vue.js的便捷性 Vue.js的组件化开发模式使得代码结构清晰，易于维护和复用。通过定义不同的组件（如hit-component和classic-component），可以将功能模块化，方便后续的扩展和修改。 数据绑定和事件绑定机制非常强大，能够实现页面的动态更新而无需手动操作DOM，大大提高了开发效率。 2. CSS布局的重要性 在实现选项卡和电影列表的布局时，flex布局的使用使得页面的响应式设计更加灵活。通过简单的display: flex和相关属性，可以轻松实现水平排列和间距调整，避免了复杂的float布局带来的问题。 3. 组件通信的实践 在父子组件通信中，通过props传递数据和$emit发送事件的方式非常直观。子组件可以专注于展示数据，而父组件负责处理数据的逻辑，这种分工明确的设计思路有助于代码的解耦。 4. 网络资源加载的可靠性 在加载Vue.js框架时，由于网络原因导致CDN地址加载失败。这提醒我们在开发过程中，需要确保网络资源的可靠性，或者可以考虑将常用框架下载到本地进行开发，以避免因网络问题导致项目无法运行。 5. 改进方向 错误处理：在删除电影时，可以添加一些错误处理逻辑，例如当用户试图删除一个不存在的电影时，给出提示信息。 样式优化：可以进一步优化CSS样式，例如为选项卡和电影列表添加过渡动画，提升用户体验。 功能扩展：可以增加电影的添加功能，允许用户动态添加新的电影到列表中。 | ||||||||||
