Web实验十四 Vue基础

已于 2023-12-14 15:34:02 修改
阅读量267 收藏 1
点赞数 1
文章标签： java vue.js javascript 前端 前端框架
于 2023-12-04 20:51:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70494538/article/details/134793619
版权

一、实验目的：

1、掌握Vue的创建

2、掌握Vue的事件处理

3、掌握Vue的数据绑定

二、实验内容：

根据提供的实验样例，使用Vue.js替换原有代码，以列表渲染、事件处理、模板语法等方式完成以下效果的网页设计：

初始页面如下：

红框处的样式如下：

  1. 字体大小为13px，字体颜色为#18191C。
  2. 上下填充为8px，左右填充为16px。
  3. 边框线宽度为1px，边框样式为实线，边框线颜色为#E3E5E7，边框半径为8px。
  4. 行间距为16px，背景颜色为#FFFFFF。
  5. 鼠标放在按钮上时，鼠标变成手型，且0.2秒后按钮的背景颜色变成#E3E5E7。
  6. 点击按钮后，视频随机更换，如下：

解决方案：

<html>
  <head>
    <style>
      body{
        padding:0;
        margin: 0;
      }
      a{
        text-decoration: none;
      }
      ul{
        list-style-type: none;
        padding: 0;
      }
      .channel-layout{
        padding:0 64px;
      }
      .channel-nav-sub-item a{
        color: #61666D;
        font-size: 15px;
      }
      .channel-nav-name a{
        color:#18191C;
        font-size: 22px;
      }
      .channel-nav{
        display: flex;
        align-items: center;
      }
      .fix-wrapper{
        height: 64px;
        padding: 0 64px;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
      }
      .channel-nav-name{
        margin-right: 20px;
        min-width: max-content;
      }
      ul.channel-nav-sub-ul{
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        padding:0;
        width: 620px;
      }

      .grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-image img{
        width: 100%;
        border-radius:6px;
      }

      .video-card-body{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-list{
        grid-column: span 4;
      }

      .video-card-info-tit a {
        color: #18191C;
      }
      .video-card-info-bottom span{
        color: rgb(148, 153, 160);
        font-size: 13px;
      }
      .area-header span , .aside-head span {
        font-size: 20px;
        color:rgb(24, 25, 28);
      }
      .area-header,.aside-head{
        margin: 16px 0;
      }
    
      .rank-list-video{
        display: grid;
        border: 1px solid #F1F2F3;
        border-radius: 6px;
        background-color: white;
      }
      .rank-list-video-item-wrap{
        display: flex;
        align-items: center;
      }

      .rank-video-card-info-tit{
        color: #18191C;
        font-size: 14px;
        line-height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .rank-list-video-item{
        white-space: nowrap;
        overflow: hidden;
      }

      .rank-video-card-info,.rank-video-card {
        min-width: 0;
      }

      /* 在下面增添样式使得达到实验效果 */
      h4>a{
        font-size: 14px;
      }
      #transform{
        font-size: 13px;
        color: #18191C;
        line-height: 16px;
      }
      .primary-button{
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
        padding-right: 16px;
        border: 1px solid #E3E5E7;
        border-radius: 8px;
        background-color: #FFFFFF;
        cursor: pointer;
        transition: background-color 0.2s; /* 背景颜色将在0.2秒内改变 */
        margin-left: 91%;
        margin-top: -27px;
      }
      .primary-button:hover{
        background-color: #E3E5E7; /* 鼠标悬停时的背景颜色 */
      }
      [v-cloak]{
            display: none;
        }
        .one{
        color: #ff473d;
      }
      .two{
        color:#ff6a29;
      }
      .three{
        color: #ff9214;
      }

      div>span{
        font-family: Avenir;
        font-style: italic;
        font-size: 14px;
        font-weight: 600;
        color: #C9CCD0;
        margin-right:6px;
        width: 20px;
        text-align: center;
        background-color: #FFFFFF;
      }
      
    </style>
  </head>
  <body>
    <div class="container" id="app">
      <div class="fix-wrapper">
        <div class="channel-nav">
          <div class="channel-nav-name"><a href="#">生活</a></div>
          <div class="channel-nav-sub">
            <ul class="channel-nav-sub-ul">
              <li class="channel-nav-sub-item"><a href="#">首页</a></li>
              <li class="channel-nav-sub-item"><a href="#">搞笑</a></li>
              <li class="channel-nav-sub-item"><a href="#">亲子</a></li>
              <li class="channel-nav-sub-item"><a href="#">出行</a></li>
              <li class="channel-nav-sub-item"><a href="#">三农</a></li>
              <li class="channel-nav-sub-item"><a href="#">家居房产</a></li>
              <li class="channel-nav-sub-item"><a href="#">手工</a></li>
              <li class="channel-nav-sub-item"><a href="#">绘画</a></li>
              <li class="channel-nav-sub-item"><a href="#">日常</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="channel-layout">
        <div class="grid">
          <div class="video-card-list" >
            <div class="area-header">
              <div class="left">
                <a href="#"><span>搞笑</span></a>
              </div>
              <div class="right">
                <button class="primary-button" type="button"  @click="refreshPage">
                  <span id="transform">换一换</span>
                </button>
              </div>
              
              
            </div>
            <div  class="video-card-body">

        
              <div class="video-card" v-for="(item,index) in randomData" v-cloak>

                <div class="video-card-image">
                  <img :src="item.img" :alt="item.alt">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a :href="item.href">{{item.title}}</a></h4>
                  <div class="video-card-info-bottom">
                    <a :href="item.authorSpace">
                      <span class="video-card-info-author">{{item.author}}</span>
                      <span class="video-card-info-date">{{item.date}}</span>
                    </a>
                  </div>
                </div>

              </div>
            </div>
          </div>
          

          <div class="aside-wrap">
            <div class="aside-head">
              <a href="#"><span>热门</span></a>
            </div>
            <div class="aside-body" >
              <ul class="rank-list-video">

                <li class="rank-list-video-item">
                  <div class="rank-list-video-item-wrap" v-for="(item,index) in rankListVideo" v-cloak>
                    <span :class= "sstt[index]">{{index+1}}</span>
                    <a class="rank-video-card" :href="item.href">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">{{item.title}}</h3>
                      </div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script>
      var v = new Vue({
        el: '#app',
        data: {
          videoCardList :[
        {
          img:"https://i2.hdslb.com/bfs/archive/cf1400c8a93d270e2dcc398603f95693bc38e023.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"领导说干不了就滚",
          href:"https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click",title:"领导说干不了就滚",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 10-14"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/416e0d76ae544e4dbd1e313f17ceadeb1eb7181c.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"公司要爆炸了 好难过",
          href:"https://www.bilibili.com/video/BV1hw41117wh/?spm_id_from=333.999.0.0",title:"公司要爆炸了 好难过",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 10-1"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/c98651d66ca02ffc5f4aab37e07a1fe61f66537e.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"这可比手术刀好用多了",
          href:"https://www.bilibili.com/video/BV1XN411873W/?spm_id_from=333.999.0.0",title:"这可比手术刀好用多了",
          authorSpace:"",author:"逗比的雀巢",date:"· 8-14"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/b3d043827eb0fd54cf261bf282d1840756e73034.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"用浏览记录绑架你",
          href:"https://www.bilibili.com/video/BV14V411L7GV/",title:"用浏览记录绑架你",
          authorSpace:"https://space.bilibili.com/5294454",author:"逗比的雀巢",date:"· 7-23"
        },
        {
          img:"https://i1.hdslb.com/bfs/archive/3e6d0217919e4148a7dae1d9e491b88ba0be8ef9.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"答非所问（奥义超级版）",
          href:"https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.sub_channel.dynamic_rank_video.click",title:"答非所问（奥义超级版）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 10-16"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/c608616167a75cf9d7883d5824e5774835f6b67a.jpg@440w_276h_1c_!web-space-index-topvideo.avif",alt:"谋 权 篡 位（番外篇①）",
          href:"https://www.bilibili.com/video/BV1aG411W7zm/?spm_id_from=333.999.0.0",title:"谋 权 篡 位（番外篇①）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 7-9"
        },
        {
          img:"https://i2.hdslb.com/bfs/archive/3bcf9c1e0eab672fc3b73a344ea587ca6e2b691d.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"谋 权 篡 位（番外篇②）",
          href:"https://www.bilibili.com/video/BV1YF41197Lj/?spm_id_from=333.999.0.0",title:"谋 权 篡 位（番外篇②）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:"· 7-15"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/208a8f27881bf996680490f9a47d7f8a1eaa2e1a.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"不要“做”挑战？（第十七期）",
          href:"https://www.bilibili.com/video/BV1H94y1k7JU/?spm_id_from=333.999.0.0",title:"不要“做”挑战？（第十七期）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:". 8-13"
        },
        {
          img:"https://i1.hdslb.com/bfs/archive/4fa524a342e2acc2115c1b5e81ca154e58bf48eb.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"眼“色”游戏 （9）",
          href:"https://www.bilibili.com/video/BV1b14y1p7ju/",title:"眼“色”游戏 （9）",
          authorSpace:"https://space.bilibili.com/5970160",author:"小潮院长",date:". 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/04b226cbdb6190d7a7542385b6943ae173ded627.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"公司里充斥着弟弟满意的微笑～",
          href:"https://www.bilibili.com/video/BV1dg4y1X7s2/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"公司里充斥着弟弟满意的微笑～",
          authorSpace:"https://space.bilibili.com/3494358571550728",author:"禁狱系男孩a",date:". 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/14f6fc39ce722b4e3a082ac4cf2d474e0c21ba1e.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"知识真的有力量",
          href:"https://www.bilibili.com/video/BV1hj411h78s/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"知识真的有力量",
          authorSpace:"https://space.bilibili.com/485359169",author:"邢三狗子",date:"· 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/df3c999cb73ac0381fef1787e5efdb6e72ca2792.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"诺贝尔亲自颁奖！",
          href:"https://www.bilibili.com/video/BV1Gu4y1N7FD/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"诺贝尔亲自颁奖！",
          authorSpace:"https://space.bilibili.com/70429299",author:"嘞是唐孃孃",date:"· 11-7"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/1033717a8d872ed5a68e4a01fb5be398a752449a.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"家丑又外扬了",
          href:"https://www.bilibili.com/video/BV1kM411S7x3/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"家丑又外扬了",
          authorSpace:"https://space.bilibili.com/1155574439",author:"真子日记",date:"· 11-8"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/3c56b59646cf8f2269c25dad76cfca484d9140ed.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"各地人信念崩塌的瞬间！",
          href:"https://www.bilibili.com/video/BV1ba4y1Q7pV/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"各地人信念崩塌的瞬间！",
          authorSpace:"https://space.bilibili.com/95515699",author:"粤知一二",date:"· 11-10"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/83bcf724c4df2bfc6742b0386b0c4668453d32fa.jpg@320w_200h_1c_!web-space-index-myvideo.avif",alt:"校园里的大恩人(最搞笑的哇)",
          href:"https://www.bilibili.com/festival/tmall1111?bvid=BV1sg4y1d7Lg&spm_id_from=333.1073.sub_channel.latest_video.click",title:"校园里的大恩人(最搞笑的哇)",
          authorSpace:"https://space.bilibili.com/68439967",author:"萧枭同学",date:"· 11-7"
        },
        {
          img:"https://i0.hdslb.com/bfs/archive/a9373801a3c2ace632fcc1b6ae19d2237a6f4261.jpg@320w_200h_1c_!web-space-upload-video.avif",alt:"还有哪个舍友不听话",
          href:"https://www.bilibili.com/video/BV1kg4y197pN/?spm_id_from=333.1073.sub_channel.latest_video.click",title:"还有哪个舍友不听话",
          authorSpace:"https://space.bilibili.com/585238746",author:"三哈兄弟-沙雕日常",date:"· 11-10"
        },
      ],
      rankListVideo :[
        {
          href:"https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.channel.secondary_floor_rank.click", title:"领导说干不了就滚"
        },
        {
          href:"https://www.bilibili.com/video/BV1s841167EX/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"遗憾终究是遗憾"
        },
        {
          href:"https://www.bilibili.com/video/BV1Zw411c7ya/",title:"不多说了，请看vcr"
        },
        {
          href:"https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"答非所问（奥义超级版）"
        },
        {
          href:"https://www.bilibili.com/video/BV16G411m7QY/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"默契兄弟"
        },
        {
          href:"https://www.bilibili.com/video/BV16C4y1G7Nk/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"【误 入 大 电 音 寺】"
        },
        {
          href:"https://www.bilibili.com/video/BV1Wj411t7SQ/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"你的童年遗憾有哪些?"
        },
        {
          href:"https://www.bilibili.com/video/BV1Py4y1N72x/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"各地人的娱乐项目"
        },
      ],
      randomData : [],
      //前三个数字的样式
      sstt: [
          "one",
          "two",
          "three"
        ]
        },
        
        //mounted 生命周期钩子函数
    mounted() {
      //随机读取8个数据插入数组
  const videoCardList = this.videoCardList;
  const randomData = this.randomData;
  for (let i = 0; i < 8; i++) {
    const index = Math.floor(Math.random() * videoCardList.length);
    randomData.push(videoCardList[index]);
    //在原数组中去除已插入的数据，避免重复插入
    videoCardList.splice(index, 1);
  }
  },
  //刷新页面
  methods: {
    refreshPage() {
      location.reload();
    }
  }

      
})
    </script>
  </body>       
</html>

嚣张路过的王小明
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
web前段开发；web实验
02-10
web实验”的主题下，我们探讨的是关于这一领域的核心概念、技术栈以及实际操作的实践环节，尤其是针对软件学院的学生在学习过程中可能遇到的课程或实验内容。 首先，Web前端开发包括HTML（超文本标记语言）、CSS...
计算机专业Web前端开发课程标准（vue版本）
02-20
《计算机专业Web前端开发课程标准（vue版本）》是一门针对高校计算机专业学生的必修课，旨在教授Vue.js这一主流前端框架的基本知识和应用技能。Vue.js是一个轻量级的前端框架，它提供了高效的数据绑定和组件化功能，...
web前端开发之vue基础
Web_chicken的博客
03-03 5021
一、vue基础 1.1 啥是vue 1.1.1 创建vue 引入vue.js 的cdn节点 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 创建一个 id为app的节点 如：<div id="app"></div> 创建vue实例 <script> let app = new Vue({ el: '#app', data: { msg:
实验1：Vue开发基础
XGK8750的博客
11-19 3778
源代码：实验1（1）).rar-DNS文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验1：Vue开发基础 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。 掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传...
Web前端开发技术课程实验报告实验3：Vue路由实验
XGK8750的博客
12-07 5287
实验代码:实验3第2题实验参考.rar-互联网文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验3：Vue路由实验 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握Vue路由相关知识及应用。 二、实验要求： 了解Vue路由相关知识和相关插件、loader的安装与使用 编写程序完成以下实验内容并上交实验报告...
Vue.js心得总结
m0_74812260的博客
12-18 2198
​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
【Vue3 第十一章】组件化基础
前端知识分享喵
01-09 304
组件化基础
Vue基础学习
m0_53256503的博客
03-15 1345
第一章 vue01-初体验 原生js，jquey：编程范式：命令式编程； vue：编程范式：声明式编程 还有一种编程范式：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="
Web前端开发技术:Vue开发基础（2）
Nick的博客
01-16 1803
了解Vue的常用全局API和实例属性及其使用 1、请使用插槽vm.$slot实现一个导航栏结构。 2、请创建一个自定义插件，实现一个登录页面。
Web前端开发技术：Vue开发基础（1）
Nick的博客
01-16 3774
一、实验目的： 掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。 掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传递的方法以及Vue生命周期钩子函数的使用。 二、实验要求： 具备Html、CSS和JavaScript的简单基础 对Vue有一个整体的认识，特别是理解使用Vue的页面结构，能够编写简单的Hello World程序 编写程序完成以下实验内容并上交实验报告（电子文档，以班级、学号后两位、姓名、实验序号命名，如：计算机17-1班06杨喜燕实
基于 Vue 和 TS 的 Web 移动端项目实战心得
小分享
09-23 4144
作者：mcuking（杭州个推） https://juejin.im/post/5d759f706fb9a06afa32adec 笔者在公司用 web 技术开发移动端应用已经有一年多的时间了，开始主要以 vue 技术栈配合 native 为主，目前演进成 vue + react native 技术架构，vue 主要负责开发 OA 业务，比如报销、出差、crm 等等，react native...
web学习-汇率计算器
06-05
【web学习-汇率计算器】项目是一个使用Vue.js框架构建的前端应用示例，它结合了HTML、CSS（Less）和JavaScript技术，展示了如何在实际场景中应用这些技术。以下是这个项目涉及的一些关键知识点： 1. **Vue.js**：...
web实验作业，亲测有效
12-14
【标题】 "Web实验作业，亲测有效" 暗示了这可能是一个与Web技术相关的实践项目，可能包括了Web服务器的配置、网页开发、安全性测试等方面的内容。在这个实验中，作者或提供者已经亲自验证了步骤和方法的可行性，...
web前端框架技术 实验报告
11-25
在为期8周的“Web前端框架技术”实训课程中，学生们深入学习了Vue.js这一流行的前端框架，并在赵阳老师的指导下进行了多个项目的实践。实验报告详细记录了学生的体验和学习成果，同时也展示了他们在网页设计、编程...
Java内存模型
weixin_44267758的博客
07-19 557
此处的变量不是指java编程中的变量，它包括了实例字段，静态字段和构成数值对象的元素，但不包括局部变量和方法参数。JMM规定所有变量都存储在主内存中。每条线程有自己的工作内存，工作内存中保留了该线程使用到变量的主内存的副本。线程对变量的所有操作都必须在工作内存中进行，不能直接读写主内存的变量，不同的线程间也无法直接访问对方工作内存的变量，线程之间的变量值传递需要通过主内存来完成。
Promise 详解（原理篇）
最新发布
山重水复疑无路，柳暗花明又一村。
07-20 477
Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。
JVM-垃圾回收与内存分配
m0_50846237的博客
07-19 979
JVM-垃圾回收与内存分配
java算法day19
TOMOT77的博客
07-20 127
我第一时间想到的方法是遍历二叉树+哈希。哈希用来统计数字出现的次数。之后遍历map收集结果。利用了BST的性质，即BST的中序序列是有序序列。
1.搭建Vue开发环境 基于vue组件开发Web前端应用程序写一个实验总结
06-02
下面是基于 Vue 组件开发 Web 前端应用程序的实验总结： 基于 Vue 组件开发 Web 前端应用程序实验总结： 1. 组件的注册 在 Vue 中，可以通过 `Vue.component` 方法来注册一个组件。在注册组件时，需要指定组件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值