两种方法（JS方法和Vue方法）实现页面渲染

最新推荐文章于 2024-04-25 22:14:21 发布
最新推荐文章于 2024-04-25 22:14:21 发布
阅读量567 收藏
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/132159191
版权

一、需求

根据数据渲染如下页面

 

二、JS方法


<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>

        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <a href="#">
                         <img src=${data[i].src} alt="">
                         <h4>
                             ${data[i].title}
                         </h4>
                         <div class="info">
                             <span>高级</span> • <span>${data[i].num}</span>人在学习
                         </div>
                     </a>
                </li> -->
            </ul>
        </div>
    </div>
    <script>
        // 1. 重构  
        let data = [
            {
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]

        document.querySelector('.clearfix').innerHTML=data.map(item=>`
        <li>
            <a href="#">
                <img src=${item.src} alt="">
                <h4>
                    ${item.title}
                </h4>
                <div class="info">
                    <span>高级</span> • <span>${item.num}</span>人在学习
                </div>
            </a>
        </li>
        `).join('')

    </script>
</body>

</html>

三、Vue方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学成在线首页</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>

        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li v-for="(item) in list" :key="item.id">
                    <a href="#">
                         <img :src=item.src alt="">
                         <h4>
                             {{item.title}}
                         </h4>
                         <div class="info">
                             <span>高级</span> • <span>{{item.num}}</span>人在学习
                         </div>
                     </a>
                </li>
            </ul>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 1. 重构
        const app=new Vue({
            el:'.clearfix',
            data:{
            list:[
            {
                id:1,
                src: 'images/course01.png',
                title: 'Think PHP 5.0 博客系统实战项目演练',
                num: 1125
            },
            {
                id:2,
                src: 'images/course02.png',
                title: 'Android 网络动态图片加载实战',
                num: 357
            },
            {
                id:3,
                src: 'images/course03.png',
                title: 'Angular2 大前端商城实战项目演练',
                num: 22250
            },
            {
                id:4,
                src: 'images/course04.png',
                title: 'Android APP 实战项目演练',
                num: 389
            },
            {
                id:5,
                src: 'images/course05.png',
                title: 'UGUI 源码深度分析案例',
                num: 124
            },
            {
                id:6,
                src: 'images/course06.png',
                title: 'Kami2首页界面切换效果实战演练',
                num: 432
            },
            {
                id:7,
                src: 'images/course07.png',
                title: 'UNITY 从入门到精通实战案例',
                num: 888
            },
            {
                id:8,
                src: 'images/course08.png',
                title: 'Cocos 深度学习你不会错过的实战',
                num: 590
            },
        ]}
        }) 
        

    </script>
</body>

</html>

早八睡不醒午觉睡不够的程序猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript渲染页面的方法
杜永康的博客
10-20 6321
比方说，我们现在写一句 “学js真是一件开心的事” 渲染到页面，可以复制代码，自己运行一下。JS 中的输出语句，该语句会将内容输出到页面上，并且能够解析标签元素。JS 中的警告弹框，该语句会将内容以弹窗的形式提示用户。改变元素的内容（包含内部标签）可识别标签。3.元素.innerHTML = 内容。
js如何渲染页面
z13903931414的博客
03-04 588
这只是一个非常基础的例子。在实际开发中，你可能会使用更复杂的库或框架（如React、Vue或Angular）来进行页面渲染，这些库或框架提供了更强大和灵活的工具来处理页面渲染和交互。在JavaScript中，你可以使用各种方法来渲染页面。以下是一个简单的例子，其中我们将使用原生的JavaScript DOM操作来渲染一个简单的HTML页面。元素，并为其设置了一些文本内容。这段JavaScript代码首先获取了id为。在这个HTML页面中，我们有一个。然后，它创建了一个新的。中，从而实现了页面的渲染。
在Vue中如何渲染使用Vue写法的HTML文件？
最新发布
新生代码农的博客
04-25 708
在Vue.js中，我们可以使用Vue的语法来编写HTML文件，并通过Vue实例来渲染这些文件。编写HTML文件：在HTML文件中，我们可以使用Vue提供的指令、插值和事件处理等特性，编写具有动态交互性的内容。引入Vue.js文件：确保在HTML文件中引入Vue.js文件，以便浏览器能够识别和执行Vue的语法。指定el属性：在Vue实例中，我们通过指定el属性来指定Vue实例挂载到哪个HTML元素上。创建Vue实例：首先，我们需要创建一个Vue实例，以便将Vue绑定到HTML文件中。// 创建Vue实例。
【vue】数据加载后渲染页面
@point
09-08 9926
vue 想要先加载完所有数据再渲染页面 使用v-if来控制 先设置showCard为false，内容card为"" 请求成功后设置showCard为true，内容card为请求得到的数据res.data <div v-if="showCard"><div> data() { return { card:"", showCard:false, } } created() { this.$vux.loading.show({ text: "正在加
vue3+vite 项目动态渲染本地图片
beauty_600的博客
08-12 1847
vue3+vite 项目动态渲染本地图片
vue3 动态渲染本地图片（跳坑）有问题
weixin_45932157的博客
07-29 935
vue图片路径渲染问题
使vue实现jQuery调用的两种方法
01-19
 在前端工程化的需求没有普及的时候，许多公司使用的是后端渲染技术，为了能够实现友好的前端交互效果，需要写好大量的jQuery、JavaScript和CSS，所以到目前还是有大量的公司维护和使用jQuery。  前端工程化让...
Vue在页面数据渲染完成之后的调用方法
12-09
在Vue.js框架中，开发者经常遇到需要在页面数据完全渲染后执行某些操作的情况，比如计算元素高度、调整布局等。由于Vue的响应式系统在数据更新时会异步更新DOM，因此不能像jQuery中的`$(document).ready()`那样直接...
Vue多种方法实现表头和首列固定的示例代码
11-27
这里我们将探讨一种基于Vue.js的实现方式，通过创建多个表格进行覆盖，以达到固定效果。 首先，创建一个活动表格，即用户滚动时会显示的完整表格。在HTML中，我们需要设置表格样式，确保单元格的宽度和高度，并为...
详解vue几种主动刷新的方法总结
12-03
本文将总结几种常见的在Vue中实现页面刷新的方法，并分析它们的优缺点。 1. **原生JavaScript的`window.location.reload()`方法** 这是JavaScript提供的基础刷新功能，通过调用`window.location.reload()`，可以...
$nextTick与原生js先渲染dom再执行函数的方式
qq_30351747的博客
05-16 1585
$nextTick与原生js先渲染dom再执行函数的方式
JS之简单的页面渲染。
Can1997的博客
04-07 3966
// 渲染页面流程 : // - 1. 我们需要先去排页面; // - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染; // 渲染的字符串结构 : // 1. 容器结构开头 : <div class="container"> // 2. box结构 (根据我们创建的商品列表，进行box结构拼接) // 3. 容器结构结尾 : </div> CSS样式部分忽略。 <script> //容器 document.write('<div cla
如何使用jquery刷新当前页面
wlian2015的专栏
02-05 699
如何使用jquery刷新当前页面 下面介绍全页面刷新方法：有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用于多开窗口）
vue强制或手动渲染(重绘)页面,
DDAD9527的博客
11-16 2522
vue重绘
delphi 调用浏览器内核_浏览器渲染原理流程
weixin_39602637的博客
11-03 367
前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本文我...
Vue小网页（使用vue将网页进行渲染）
成长过程
07-03 992
本文用到以下三个包，若需要尝试本文的vue网页，请自行下载 其中是设置了表格的边框、宽度等一系列操作，若想自行写那么可以不导该包 该包是对进行了一个，若不需要格式化，也可以不用下载 必导，请到官网自行下载（下面有简单的教程，若还是不会请留言或者私信） 点击此链接或者上面的官网可跳入Vue.js官网...
js重新渲染或重新加载div
热门推荐
ksws0319440的博客
06-25 1万+
话不多说，上代码： <body> <div id="con1"> <div id="d1"> 这是d1 </div> </div> <button id="b1" type="button">重新加载d1</button> </body> <script> $(document).ready(function(e) { var b1 ...
JAVA学习笔记_JS实现刷新_重新加载页面
icecoola_的博客
08-23 5841
问题分析：在修改页面信息后，必须手动刷新浏览器才能再次进行信息修改 问题解决： 在修改成功后加入下面JS代码location.reload(); 参考：有的是错误的JS实现重新加载当前页面或者父页面的几种方法 在开发过程中想要在某个时机去刷新某个固定的页面，去更新该页面某些控件的属性，比如显示隐藏、是否可点击等。是用的主要是通过 刷新该页面， 方法如下： 方法一：
js重新渲染div_服务器渲染知识大全（1）
weixin_39581099的博客
11-21 930
Next.js 是一个轻量级的 React 服务端渲染应用框架：https://nextjs.frontendx.cn/docs​nextjs.frontendx.cn1、什么是服务器渲染后端先调用【数据库】，获得数据之后，将数据和页面元素进行拼装，组合成完整的 html 页面，再直接返回给浏览器，以便用户浏览。整个渲染过程，是在服务器端执行！浏览器只负责去展示！例如：http://www.cnb...
vue-router跳转的两种方法
04-27
在Vue.js中，我们可以使用vue-router进行路由管理，实现不同页面之间的跳转。常见的两种跳转方法如下： 1. 声明式导航：这种方法是在模板中使用`<router-link>`标签来实现跳转。例如： ``` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值