Vue开发案例教程-模块5 读取、显示数据

Vue开发案例教程模块05·读取、显示数据VUEDEVELOPMENTCOURSE本章学习目标核心语法掌握掌握Vue框架中mounted核心钩子的使用时机与参数配置；熟练运用{{}}、v-html等模板语法实现数据绑定。数据处理进阶掌握Vue过滤器的定义与使用，实现对数据的高效格式化；深入理解axios的特性与作用，熟练掌握其基本调用方式。实战功能落地综合运用axios发起网络请求读取服务端数据，并结合Vue数据绑定能力，完整实现前端页面的数据渲染与动态展示功能。安全素养树立在技术学习过程中，同步树立正确的网络安全观，了解前端开发中的常见安全风险，培养规范、安全的代码编写习惯。本章内容概览核心概念解析深入理解mounted生命周期钩子、Vue模板语法、自定义过滤器以及axios异步请求库等核心概念，夯实理论基础。动手实践步骤跟随详细的操作指引，从零搭建项目结构，实现后端数据的读取、处理与页面渲染，并完成完整的实战演练流程。知识总结与拓展系统梳理本章涉及的核心知识点与易错点，并提供针对性的拓展练习题，帮助大家巩固理解并提升综合应用能力。PART01核心概念解析CORECONCEPTSANALYSIS核心概念：mounted参数▍钩子定义mounted是Vue实例的生命周期钩子，在实例挂载到DOM完成后立即执行。它是发起异步请求、获取服务端数据的最佳时机。执行时机在页面的DOM结构完全渲染完成后被调用，此时可以安全地访问和操作DOM元素。主要用途发起AJAX请求（如axios），从服务器端获取应用初始化所需的数据，是数据加载的标准入口。数据更新将获取到的远程数据赋值给data中的属性，Vue会自动监听数据变化，并触发视图的重新渲染与更新。💡核心总结：mounted是Vue应用中获取初始数据、连接后端接口的标准且最佳的生命周期入口核心概念：模板语法核心定义Vue框架提供的一套完整的语法规范，用于将JavaScript数据与HTML视图进行动态绑定，实现数据的实时响应式更新。模板语法是连接逻辑层与视图层的桥梁，是Vue实现MVVM模式的核心载体。核心特点📝文本插值{{}}

将数据以纯文本形式输出，自动响应数据变化。🌐HTML渲染v-html

将数据作为真实HTML代码解析渲染，注意XSS风险。⚙️过滤器|

通过管道符调用，对文本进行格式化（如大小写转换）。使用方式📖基础绑定

在模板HTML中直接嵌入`{{}}`或使用`v-html`指令，Vue实例会自动解析并渲染对应的数据。🔧进阶处理

结合管道符`|`调用自定义过滤器，对绑定的数据进行预处理（如格式化日期、截取字符串）后再展示。核心概念：axios核心意义基于Promise的HTTP库，专为浏览器和Node.js设计，也是Vue官方推荐的AJAX请求工具，让数据请求更简单。实现方式支持get、post等多种请求方式。通过链式调用.then()处理响应数据，使用.catch()统一捕获请求过程中的错误信息。核心优势PromiseAPI

支持链式调用，代码结构更优雅清晰广泛的浏览器支持

兼容所有现代主流浏览器，适配性强请求/响应拦截器

统一处理请求头、错误码，开发更高效PART02动手实践步骤PRACTICESTEPS步骤一：数据绑定基础文本插值{{}}最基础的数据绑定方式，使用双大括号包裹，直接绑定data中的属性值或调用methods中的方法。<h3>姓名：{{userName}}</h3>

<h3>信息：{{showMsg()}}</h3>HTML渲染v-html用于渲染包含HTML结构的字符串数据，Vue会将其解析为真实的DOM元素插入到页面中。<!--userDesc包含HTML标签-->

<divv-html="userDesc"></div>过滤器Filter通过管道符`|`对数据进行格式化处理，常用于文本大小写转换、日期格式化等场景。<!--toUpper为自定义过滤器-->

<span>{{msg|toUpper}}</span>步骤一：数据读取与实战使用axios读取数据在Vue实例的mounted生命周期钩子中，调用axios.get()方法发起HTTP请求，获取远程JSON数据。mounted(){

axios.get("data.json").then(res=>{

this.userName=res.data.userName;

});

}核心逻辑：利用异步请求获取数据，并赋值给实例的响应式属性。实战：页面头部数据展示解析接口返回的JSON数据，提取商家名称、评分等信息，并将其动态渲染到页面头部区域。mounted(){

axios.get("data.json").then(res=>{

this.storeName=;

this.score=res.data.seller.score;

});

}实战目标：将后端数据与前端视图绑定，实现页面内容的自动更新。步骤二：商店详情页数据展示01.扩展数据读取在根实例的`mounted`钩子函数中，通过网络请求读取更多商家详情数据，如评分、评价总数等，将数据挂载到根实例上供全局使用。mounted(){axios.get("data.json").then(res=>{this.score=res.data.seller.score;this.ratingCount=res.data.seller.ratingCount;});}02.组件中展示数据在`seller`子组件的模板中，使用`$root`访问根实例中存储的共享数据，并结合Vue的指令将数据动态渲染到页面上。<!--显示店铺名称--><divclass="store-name">{{$root.storeName}}</div><!--显示星级评分(自定义方法)--><divclass="star"v-html="showStar($root.score)"></div>步骤三：商家详情页数据展示我们来实现商家详情页的显示与隐藏及数据展示。通过<transition>组件实现过渡动画，利用$root访问全局数据，并结合v-show指令控制DOM的显示状态。动态交互流程触发事件→数据更新→视图响应HTML模板结构定义<transitionname="store-fade"><divclass="store"v-show="isShowStore"><div>{{$root.storeName}}</div><divv-html="showStar()"></div><div>{{$root.bulletin}}</div></div></transition>Vue组件注册与通信逻辑exportconststore={data(){return{isShowStore:false};},methods:{showStar(){/*...*/},storeDetails(opt){this.isShowStore=opt;}}};步骤四：评论页数据展示01/扩展数据读取(DataFetching)在根实例的mounted钩子中，通过axios异步获取商家评分、排名等评论数据。mounted(){

axios.get("data.json").then(res=>{this.rankRate=res.data.rankRate;});

}02/组件中展示数据(DataDisplay)在ratings子组件模板中，通过$root访问全局共享数据，并渲染评分与星级。<div>高于周边商家{{$root.rankRate}}%</div>

<div>服务态度:<spanv-html="showStar($root.score)"></span></div>💡核心提示：利用根实例作为全局数据总线，是小型Vue应用中实现简单跨组件通信的常用方案。数据流转逻辑1.数据源：通过axios读取本地data.json或后端API接口，获取完整的评论数据集。2.数据挂载：将获取的数据赋值给根实例的属性（如score），作为全局共享状态。3.视图渲染：在任意子组件中通过$root访问数据，并结合v-html渲染动态星级。评论页数据交互与渲染逻辑总览PART03知识总结与拓展CHAPTERSUMMARY&EXPANSION知识小结数据获取在Vue生命周期中，mounted钩子函数是发起axios网络请求以获取初始化数据的最佳时机。数据展示•基础文本插值使用{{}}语法。•渲染HTML内容使用v-html指令。•复杂文本格式化推荐使用过滤器处理。完整流程结合axios的异步数据读取能力与Vue强大的数据绑定特性，可构建出从本地JSON或远程接口获取数据，并实时动态展示到页面的完整开发流程。扩展练习拓展01/旅行日记详情页📝核心任务创建`header`、`footer`、`info`组件，实现旅行日记详情页的完整内容展示与布