• 【Vue】——前端框架的基本使用

    💻博主现有专栏：

                    C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，设计模式、Python机器学习等
    🥏主页链接：

                    Y小夜-CSDN博客

    目录

    🎯本文目的

    🎯利用Vite构建Vue项目code1—手动创建项目

    🎯跑马灯效果

    🎃要求

    🎃代码

    🎃实现效果

    🎯实现景点展示

    🎃要求

    🎃代码解析

    🎃实现效果

    🎯实现迷你记事本

    🎃要求

    🎃代码解析

    🎃实现效果

    🎯本文目的

    (一)掌握Vue.js中的属性绑定指令v-bind的使用；

    (二)掌握Vue.js中和双向数据绑定指令v-model和修饰符的使用；

    (三)掌握Vue.js中v-if指令和v-show指令控制元素隐藏和显示时的区别；

    (四)掌握Vue.js中v-for指令的使用和key属性的作用 

    (五)掌握Vue.js中事件修饰符的使用。

    🎯利用Vite构建Vue项目code1—手动创建项目

    步骤1：在实验四作业代码文件夹下打开DOS命令窗口，输入如下命令：

    npm create vite@latest，然后回车，进到下面图，输入y回车，如图。

    步骤2：在图中输入项目名称:code1，进入下图选择Vue回车。

    步骤3: 在图中选择JavaSript后

    步骤4:执行cd code1命令，切换到项目目录code1下，如图所示

    步骤5:执行npm install命令，安装项目的全部依赖，成功后如下图

    步骤6:执行npm run dev命令，运行项目，成功后如下图

    步骤7:按下Ctrl健，单击http://127.0.0.1:5173/，在浏览器中可以看到项目的运行结果

    到此项目code1创建并运行完成。

    🎯跑马灯效果

    🎃要求

    要求：1、熟悉组件模版结构。

    2、在上面程序“输入代码”中添加代码并修改组件模版结构相应的代码实现如下功能。

    (1)单击图片上的向左和向右箭头可以浏览图片。

            (2)当显示到最后一张图片时，向右箭头隐藏；当显示到第一张图片时，向左箭头隐藏。

    🎃代码

    2. <template>
    3.     <h1 align="center">软工h1>
    4.     <h1>洛阳牡丹甲天下,花开时节动京城h1>
    5.     <div id="box">
    6.         <img :src="imgArr[index]" alt="">
    7.         <a href="javascript:;" @click="left" v-show="index != 0">
    8.             <img class="imgl" src="../assets/images/left.png">
    9.         a>
    10.         <a href="javascript:;" @click="right" v-show="index != 9">
    11.             <img class="imgr" src="../assets/images/right.png">
    12.         a>
    13.     div>
    14. template>
    15. <script setup>
    16. //输入代码
    17. import { ref } from 'vue';
    18.  
    19. const index = ref(0)
    20. const left = () => {
    21.     index.value--
    22. }
    23. const right = () => {
    24.     index.value++
    25. }
    26. const imgArr = ["/src/assets/images/mudan1.jpg",
    27.     "/src/assets/images/mudan2.jpg",
    28.     "/src/assets/images/mudan3.jpg",
    29.     "/src/assets/images/mudan4.jpg",
    30.     "/src/assets/images/mudan5.jpg",
    31.     "/src/assets/images/mudan6.jpg",
    32.     "/src/assets/images/mudan7.jpg",
    33.     "/src/assets/images/mudan8.jpg",
    34.     "/src/assets/images/mudan9.jpg",
    35.     "/src/assets/images/mudan10.jpg"
    36. ]
    37.  
    38.  
    39. script>
    40. <style scoped>
    41. #box {
    42.     width: 400px;
    43.     margin: 0 auto;
    44.     position: relative;
    45. }
    46.  
    47. h1 {
    48.     text-align: center;
    49. }
    50.  
    51. #box>img {
    52.     width: 100%;
    53.     height: 300px;
    54.     /*overflow: hidden;   消除误差*/
    55.     display: block;
    56.     /*消除误差*/
    57. }
    58.  
    59. a>img {
    60.     width: 30px;
    61.     height: 50px;
    62.     position: absolute;
    63. }
    64.  
    65. a>.imgl {
    66.     left: 0;
    67.     top: 125px;
    68. }
    69.  
    70. a>.imgr {
    71.     right: 0;
    72.     top: 125px;
    73. }style>

    这段代码是一个Vue.js的图片切换案例。它包含一个HTML模板、JavaScript代码和CSS样式。

    HTML模板部分：
    - 页面顶部有一个居中的标题"软工"，下方有一个标题"洛阳牡丹甲天下，花开时节动京城"。
    - 在`

    🎃实现效果

    🎯实现景点展示

    🎃要求

    要求：1、熟悉组件模版结构。

    2、在上面代码中的“添加代码”处添加适当的代码实现如下功能：

    (1)单击“添加景点”按钮在表格末尾添加一行，如图所示。

            (2)单击，每一行后面的“删除”按钮，可以删除对应的行。

    🎃代码解析

    1. <template>
    2.     <h1 align="center">软工h1>
    3.       
    4.     <button class="btn" @click="add">添加景点button>
    5.     <table>
    6.         <tr>
    7.             <th>序号th>
    8.             <th>省份th>
    9.             <th>省会th>
    10.             <th>旅游景点th>
    11.             <th>操作th>
    12.         tr>
    13.         <tr v-for="(item,index) in list">
    14.             <td>{{ index+1 }}td>
    15.             <td>{{ item.province }}td>
    16.             <td>{{ item.city }}td>
    17.             <td>{{ item.spot }}td>
    18.             <td><button @click="del(index)">删除button>td>
    19.         tr>
    20.     table>
    21.     template>
    22.     
    23.     <script setup>
    24.     import { reactive } from 'vue'
    25.     const list = reactive([
    26.         { province: "河南省", city: "郑州市", spot: "少林寺" },
    27.         { province: "河南省", city: "洛阳市", spot: "龙门石窟" },
    28.         { province: "湖北省", city: "长沙市", spot: "橘子洲头" },
    29.         { province: "湖南省", city: "武汉市", spot: "黄鹤楼" },
    30.     ])
    31.     //添加代码
    32.     const add=()=>{
    33.         var str={province:"山东省",city:"青岛市",spot:"日照"};
    34.         list.push(str);
    35.     }
    36.     const del=(x)=>{
    37.         list.splice(x,1);
    38.     }
    39.     script>
    40.     
    41.     <style scoped>
    42.     button.btn {
    43.         margin-bottom: 20px;
    44.     }
    45.     
    46.     table {
    47.         border: 3px solid red;
    48.         border-collapse: collapse;
    49.     }
    50.     
    51.     td,
    52.     th {
    53.         border: 1px solid red;
    54.     }
    55.     style>

    这段代码是一个使用Vue.js框架编写的简单网页应用。它包含一个表格，用于展示旅游景点的信息，以及添加和删除景点的功能。

    首先，让我们来看一下HTML部分：

    1. `

    软工

    `：这是一个居中的标题，显示文本"软工"。
    2. ``：这是一个按钮，点击时会触发`add`方法，用于添加新的景点。
    3. ``：这是一个表格，用于展示旅游景点的信息。
    4. ``：这是一个循环，遍历`list`数组中的每个元素（即每个景点），并将其渲染为表格的一行。
    5. ``、``、``、``：这些是表格的单元格，分别显示景点的序号、省份、城市和景点名称。
    6. ``：这是一个删除按钮，点击时会触发`del`方法，并传入当前景点的索引，用于删除该景点。

    接下来，让我们看一下JavaScript部分：

    1. `import { reactive } from 'vue'`：从Vue.js中导入`reactive`函数，用于创建响应式数据。
    2. `const list = reactive([...])`：创建一个响应式数组`list`，包含一些初始的旅游景点信息。
    3. `const add=()=>{...}`：定义一个`add`方法，用于添加新的景点。在这个方法中，我们创建一个新的景点对象，并将其添加到`list`数组中。
    4. `const del=(x)=>{...}`：定义一个`del`方法，用于删除指定的景点。在这个方法中，我们使用`splice`方法从`list`数组中删除指定索引的元素。

    最后，让我们看一下CSS部分：

    1. `button.btn {...}`：设置按钮的样式，包括外边距。
    2. `table {...}`：设置表格的样式，包括边框和边框合并属性。
    3. `td, th {...}`：设置表格单元格的样式，包括边框。

    总的来说，这段代码实现了一个简单的旅游景点信息展示和编辑功能。用户可以通过点击按钮来添加新的景点，或者点击删除按钮来删除指定的景点。所有的操作都会实时反映在表格中。

    🎃实现效果

    🎯实现迷你记事本

    🎃要求

    要求：熟悉组件模版结构。

    1. 补充完整程序，运行结果如图5-5所示，并实现如下功能:

    (1)在文本框中输入内容后单击回车键会添加到列表中。

    (2)鼠标移动到每列后面的图标上单击可以删除相应内容。

    (3)鼠标单击“clear”可以将所有列表内容删除。

    (4)统计区域左侧始终统计记录的条数。

    (5)当列表都被删除了，统计区的内容不显示。

    🎃代码解析

    2. <template>
    3.     <h1 align="center">软工h1>
    4.         <h2>迷你记事本h2>
    5.         <div id="box">
    6.           
    7.           <div class="write">
    8.             <input type="text"  placeholder="请输入任务......" v-model="inputValue"  @keyup.enter="add">
    9.           div>
    10.           
    11.           <ul>
    12.              <li  v-for="(item,index) in list">{{ index+1+": " }}{{ item }}         
    13.     <img src="../assets/images/delect.png"   @click="remove(index)">
    14.             li>
    15.           ul>
    16.           
    17.           <div class="count">
    18.              <span class="left"   v-text= "'共'+list.length+'项'"   v-if="list.length">span>
    19.              <span class="right"  @click=" clear"   v-if="list.length" >Clearspan>
    20.           div>     
    21.      div>
    22.     template>
    23.     
    24.     <script setup>
    25.     import { reactive, ref } from 'vue';
    26.     const list = reactive(["学习", "吃饭", "购物"])
    27.     const inputValue = ref("")
    28.     //添加add方法定义
    29.     const add=()=>{
    30.         list.push(inputValue.value);
    31.         inputValue.value="";
    32.     }
    33.     //删除remove方法定义
    34.     const remove=(x)=>{
    35.         list.splice(x,1)
    36.     }
    37.     //清除clear方法定义
    38.     const clear=()=>{
    39.         list.length=0
    40.     }
    41.     script>
    42.     
    43.     <style scoped>
    44.     ul,
    45.     li {
    46.         padding: 0;
    47.         margin: 0;
    48.     }
    49.     
    50.     #box {
    51.         width: 300px;
    52.         margin: 20px auto 0 auto;
    53.         border:3px solid #ccc;
    54.         background-color: #eee;
    55.         border-radius: 5px;
    56.     }
    57.     
    58.     h2 {
    59.         text-align: center;
    60.         margin-bottom: 10px;
    61.         color: red;
    62.     }
    63.     
    64.     div.write>input {
    65.         height: 35px;
    66.         width: 288px;
    67.         border: none;
    68.         border-bottom: 1px solid #ccc;
    69.         padding-left: 10px;
    70.         font-size: 20px;
    71.         font-style: italic;
    72.         outline: none;
    73.     }
    74.     
    75.     ul {
    76.         list-style: none;
    77.         background-color: #fff;
    78.         padding-left: 10px;
    79.         padding-right: 10px;
    80.     }
    81.     
    82.     ul>li {
    83.         line-height: 38px;
    84.         color: #000;
    85.         font-size: 20px;
    86.         border-bottom: 1px solid #ccc;
    87.         position: relative;
    88.     }
    89.     ul>li:last-child{
    90.         border-bottom: none;
    91.     }
    92.     ul>li>img {
    93.         width: 24px;
    94.         position: absolute;
    95.         right: 0;
    96.         top: 9px;
    97.         display: none;
    98.         cursor: pointer;
    99.     }
    100.     
    101.     ul>li:hover>img {
    102.         display: block;
    103.     }
    104.     
    105.     div.count {
    106.         height: 20px;
    107.         color: #000;
    108.         font-size: 12px;
    109.         padding: 8px 10px 0 10px;
    110.         position: relative;
    111.     }
    112.     
    113.     div.count>span.right {
    114.         float: right;
    115.         cursor: pointer;
    116.     }
    117.     style>

    这段代码是一个使用Vue.js框架实现的迷你记事本应用。它包括一个输入框用于添加任务，一个列表显示所有任务，以及一个统计区域显示任务总数和清除按钮。

    首先，我们来看一下HTML部分：

    1. `

    {{ index+1 }}{{ item.province }}{{ item.city }}{{ item.spot }}