练习1 - Vue.js 技术⼊⻔.pdf

资源内容介绍

在本练习中，我们将探讨前后端分离的概念，掌握前端与后端之间的交互方式，并通过添加搜索功能实现API数据请求和DOM操作，以达到页面目标效果。我们将在一个已有的代码模板基础上添加搜索功能，通过发起API请求并在页面下方以卡片形式展示剧集信息。具体实现包括通过CDN或下载jQuery库的方式引入jQuery，以便使用jQuery的选择器、事件绑定、Ajax方法和DOM操作方法。在`[removed]`标签内，我们将绑定搜索按钮点击响应函数，发起Ajax请求，并创建DOM元素（使用Bootstrap的Card样式），挂载到页面上，其中元素内容为请求的数据展示。接下来，我们将进入Vue.js入门部分，学习如何下载本地Vue.js和通过CDN引入Vue，并实例化一个Vue对象在网页上输出Hello World。我们也将验证Vue的响应式特性，通过在Chrome的开发调试工具中修改data来查看页面上的文字变化。此外，我们将进一步尝试使用数组类型的data，并使用`v-for`指令遍历数组项生成`

`节点，同时在F12控制台中操作数组元素增减，并通过`v-on`指令绑定点击事件。我们还将通过在Vue实例化传入参数`options`中添加`methods`方法参数，定义事件响应函数，并理解`methods`内函数访问data内的数据时需要使用`this`指针。我们将熟悉Vue的四个主要生命周期函数，包括`created()`, `mounted()`, `updated()`, 和`destroyed()`，掌握这些生命周期阶段的数据方法可访问性和DOM元素的渲染和更新时间点。在实验步骤中，我们将编写测试文件并添加生命周期函数，在这些函数内尝试访问`data`和`methods`内的方法，理解它们在初始化过程中的作用，并结合浏览器中的F12控制台输出调试信息，重点掌握`created()`和`mounted()`生命周期函数。整个练习过程强调动手实践，通过实际操作来理解前后端分离的概念，学习前端框架Vue.js的基本使用，以及如何利用Vue的响应式特性和生命周期来构建交互式的Web应用。整个实验强调了前后端分离的重要性，以及如何通过前端框架来实现快速且高效的Web应用开发。

预览图1

预览图2

预览图3