Vue框架应用实战项目式教程 实训指导书 实训指导书2：留言板-留言数据渲染（2）.pdf

留言数据渲染

【任务实施】

本任务需要将“热门留言”模块中招聘简介数据通过数据绑定的方式显示在界面上。

步骤一.在script中准备页面数据。

scriptsetup

import{ref}fromvue发

import./assets/css/bootstrap.css

constarticleref(Vue是一套用于构建用户界面的渐进式框架。与其它

开

大型框架不同的是被设计为可以自底向上逐层应用。的核心库只关注视图层不

,VueVue,

仅易于上手还便于与第三方库或既有项目整合。欢迎广大开发者对留下宝贵的建议。

,Vue

)战

/script实

步骤二.通过插值{{}}语法将文章数据渲染至页面中。

template用

!--页面容器--

divclasscontainer应

main

!--文章内容--

divclasspy-5text-center

架

imgclassd-blockmx-auto

src../assets/img/logo.png

框

pclasslead

{{article}}

/p

e

/div

/main

u

/div

/template

V

步骤三.在控制台通过vuerunserve指令进行编译。渲染结果如下图2-7

所示。