• 【后端速成 Vue】初识指令(下)

    前言：

    上一篇初识指令(上)文章中，一共讲解了 v-html，v-show，v-if，v-else，v-else-if，v-on，v-bind 这些指令，当然，还剩不少的指令没有讲解，本问将会介绍剩余的常用指令，每个对应指令的讲解，都会有一个小 demo 练习，如果独立写不出来，可以直接复制我的代码，运行分析即可。

    接下来就把上篇文章的内容综合一下，写一个小的图片切换功能，需求：有两个按钮，分别显示上一张和下一张，单击按钮切换对应的图片。

    代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.     style>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         <div><button v-show="index > 0" @click="index--">上一张button>div>
    13.         <img :src="imgList[index]">
    14.         <div><button v-show="index < (imgList.length - 1)" @click="index++">下一张button>div>
    15.     div>
    16. body>
    17. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14">script>
    18. <script>
    19.     const app = new Vue({
    20.         el: '#app',
    21.         data: {
    22.             index: 0,
    23.             imgList: [
    24.                 "./image/1.jpeg", 
    25.                 "./image/2.jpeg", 
    26.                 "./image/3.jpeg", 
    27.                 "./image/4.jpeg", 
    28.                 "./image/5.jpeg"
    29.             ]
    30.         }
    31.     })
    32. script>
    33. html>

    运行结果：

    看程序代码，可以发现这里实现是使用数组存放图片的路径，使用 v-bind 配合 index 下标切换图片位置，当图片到了第一张，就没有上一张了，也就不显示 '上一张' 按钮，当图片显示到最后一张，也就不显示 '下一张' 按钮，这样的功能是采用 v-show 进行实现的，尝试阅读代码，独立完成这个小demo。

    1、v-for

    作用：基于数据循环，多次渲染整个元素

    既然是基于数据循环，那么可以基于哪些数据呢？像 数组，对象，数字... 都是支持的。

    语法：v-for="(item, index) in 数组"

    item 表示每一项，index 表示对应项的下标，这里就有点像 forEach 循环了，如果不了解 forEach可以自行下去了解哦。

    案例需求：要求基于数据循环展示篮球哥会的技能，比如篮球哥会唱歌，跳舞，说rap，打篮球。

    代码实现：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.     style>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         <h1>篮球哥会的技能h1>
    13.         <ul>
    14.             <li v-for="(item, index) in list">
    15.                 {{ item }}
    16.             li>
    17.         ul>        
    18.     div>
    19. body>
    20. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14">script>
    21. <script>
    22.     const app = new Vue({
    23.         el: '#app',
    24.         data: {
    25.             list: ['唱歌', '跳舞', '说rap', '打篮球']
    26.         }
    27.     })
    28. script>
    29. html>

    运行结果：

    这里需要对哪个元素循环渲染，就把 v-fro 加到哪个元素上面，前面讲过，item 表示遍历过程中的每个元素，index 表示下标，一定要取名 item 和 index 吗？不用，按照你自己的命名喜好来就行。

    显然上面的 index 是没有使用到的，那么可以省略这个 index 吗？当然可以，直接删掉 index 即可：

    1. <li v-for="(item) in list">
    2.     {{ item }}
    3. li>

    当只剩下最后一个 item 的时候，也可以把旁边的括号给去掉，不影响最终的结果：

    1. <li v-for="item in list">
    2.     {{ item }}
    3. li>

    为了更好的学习 v-for，接下来再来实现一个小 demo。

    案例需求：设计一个歌单，要求可以删除歌单的内容。

    代码实现：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.     style>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         <h1>音乐清单h1>
    13.         <ul>
    14.             <li v-for="item in list">
    15.                 <span>{{ item.name }}span>
    16.                 <span>{{ item.singer }}span>
    17.                 <button @click="del(item.id)">删除button>
    18.             li>
    19.         ul>        
    20.     div>
    21. body>
    22. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14">script>
    23. <script>
    24.     const app = new Vue({
    25.         el: '#app',
    26.         data: {
    27.             list: [
    28.                 { id: 1, name: "呓语", singer: "毛不易" },
    29.                 { id: 2, anme: "等我回家", singer: "薛之谦" },
    30.                 { id: 3, name: "鼓楼", singer: "赵雷" },
    31.                 { id: 4, name: "暗号", singer: "周杰伦" },
    32.                 { id: 5, name: "忘记时间", singer: "胡歌" }
    33.             ]
    34.         },
    35.         methods:{
    36.             del (id) {
    37.                 this.list = this.list.filter(item => item.id !== id)
    38.             }
    39.         }
    40.     })
    41. script>
    42. html>

    运行结果：

    这个程序实现的思路是，针对 li 做循环渲染，每次遍历到的是一个对象，通过获取对象中的属性来实现生成想要的数据，当单击删除按钮的时候，通过对象里的 id 进行作为删除条件，同时使用 filter 函数保留满足条件的项，最后返回新的数组。

    为什么 Vue 可以这样写？因为当依赖的数据发生改变，Vue 监听到会进行重新渲染数据视图！

    这一点很重要，基本贯穿了 Vue 的学习，当你好奇为什么数据变了，页面也变了，一定要想起来 Vue 的这一点特性！

    上面实现的音乐清单代码其实并不完整，正确的是应该加一个 :key ：

    1. <ul>
    2.     <li v-for="item in list" :key="item.id">
    3.         <span>{{ item.name }}span>
    4.         <span>{{ item.singer }}span>
    5.         <button @click="del(item.id)">删除button>
    6.     li>
    7. ul>

    为什么要这样写呢？马上就会介绍到这个 :key 的作用。

    v-for 中的 key

    语法：key属性="唯一标识"

    作用：给列表项添加的唯一标识。便于 Vue 进行列表项的正确排序复用。

    如何区分加 key 和 不加 key 的区别呢？可以下去给上述代码第一个 li 加上背景颜色试试，这里就不多介绍，只用文字讲解了。

    v-for 的默认行为会尝试原地修改元素(就地复用)，简单来说，就只删除了最后一个元素，只进行数据上的更新罢了，而加上 key，就能准确的识别到删除的是哪个元素，也就不存在只进行数据上的更新了。

    使用 key 的注意点：

    ● key 的值只能是 字符串 或 数字类型

    ● key 的值必须具有唯一性

    ● 推荐使用 id 作为 key(唯一)，不推荐使用 index 作为 key(会变化，不对应)

    2、v-model

    作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容

    这里再次强调双向数据绑定：

    ● 数据变化 -> 视图自动更新

    ● 视图变化 -> 数据自动更新

    案例需求：设计一个登录系统，可以登录可以重置用户名和密码：

    代码实现：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.     style>
    9. head>
    10. <body>
    11.     <div id="app">
    12.         账号: <input type="text" v-model="username"> <br><br>
    13.         密码: <input type="password" v-model="password"> <br><br>
    14.         <button @click="login">登录button>
    15.         <button @click="reset()">重置button>
    16.     div>
    17. body>
    18. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14">script>
    19. <script>
    20.     const app = new Vue({
    21.         el: '#app',
    22.         data: {
    23.             username: '',
    24.             password: ''
    25.         },
    26.         methods:{
    27.             login () {
    28.                 console.log('提交请求: ' + this.username, this.password);
    29.             },
    30.             reset () {
    31.                 this.username = ''
    32.                 this.password = ''
    33.             }
    34.         }
    35.     })
    36. script>
    37. html>

    运行结果：

    这里使用了 v-model 将 username 和 password 变量分别绑定到用户名和密码两个 input 中，既然是双向绑定，也就意味着当这两个输入框里面的内容改变了，对应的 username 和 password 变量的内容也会改变，如果 username 和 password 变量改变了，输入框里面的值也就会发生改变。

    所以登录逻辑很简单，单击登录按钮的时候，直接将 username 和 password 的值传给后端即可。

    重置逻辑也很简单，直接修改 username 和 password 的值为 '' 即可，因为实现了双向绑定！

    到这里，回顾一下这样的操作如果使用 js 实现登录，第一步，拿到DOM 树里的 input，接着获取 input 输入框的value 值，接着传递给后端。

    如果使用 js 实现重置效果，先使用 js 获取 input，再把 input 中的 value 改成 ''。

    现在就慢慢发现了，Vue 中，程序员不需要操作 DOM 树(底层仍然是在操作)，只需要维护好数据即可。

    下期预告：【后端速成Vue】实现动态表白墙

  • 相关阅读:
    C++ 中集合以及集合的相关操作
    【电力系统】基于YALMIP 的微网（光伏+风电+蓄电池+微电网+柴油机）优化调度模型附matlab代码
    锐龙r5 6600u和r5 5600u区别 r56600u和r55600u对比
    VMware清理拖拽缓存
    基于Java的中缀表达式转后缀表达式设计
    Python爬虫技术系列-03/4flask结合requests测试静态页面和动态页面抓取
    mysql报错：You can‘t specify target table ‘Person‘ for update in FROM clause
    Mac下根目录和家目录的区别
    springboo集成activiti5.22在线设计器
    (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • 原文地址：https://blog.csdn.net/m0_61784621/article/details/131656583