• springboot和vue:九、v-for中的key+vue组件化开发


    v-for中的key

    目的

    现在想要实现这样的一种效果,页面上存在初始姓名表单,同时存在输入框,输入姓名后点击添加按钮可以将新输入的姓名加入显示的姓名表单中。

    代码

    
    
    
    
        
        
        Document
        
    
    
    
        
    • 姓名:{{user.name}}
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    测试

    初始页面:
    在这里插入图片描述

    输入shanshan
    在这里插入图片描述

    点击添加后
    在这里插入图片描述

    存在问题

    看似实现了我们想要的功能,但是实际上该页面存在bug。譬如我们现在刷新页面并勾选zhangsan。同时输入shanshan。
    在这里插入图片描述
    点击添加后,可以看到shanshan成为了被勾选的标签,zhangsan不再被勾选。
    在这里插入图片描述
    这是因为我们没有给li标签添加上唯一的标记,而vue又倾向于重用标签,所以vue分不清楚哪些标签的状态进行了改变。

    修改代码

    只需要在li标签那加上唯一的key标签即可,一般值都是1数据库中我们主动维护的能确保唯一的id。

  • 姓名:{{user.name}}
    • 1
    • 2
    • 3
    • 4

    测试:
    在这里插入图片描述
    在这里插入图片描述

    发现测试成功。

    组件化开发

    vue-cli脚手架的安装

    npm install -g @vue/cli
    按上下键切换选项,按空格切换是否选中的状态,按回车表示继续到下一页选项。

    eslint是很严格的语法规范,初学者不必选择,选最后一项即可。
    在这里插入图片描述

    将Linter选中状态切换成不选中。然后回车。
    在这里插入图片描述

    表示依赖你选择放到哪里,是否是package.json
    在这里插入图片描述

    选择vue3
    在这里插入图片描述

    询问你是否想把刚才的选项存为快照,以便后续使用。这里我们选择否
    在这里插入图片描述

    询问使用Yarn还是NPM,我们使用NPM管理。
    在这里插入图片描述
    即安装完成。

    npm create 项目名创建项目

    譬如这里,我们新建一个文件夹,用来存前端代码。然后在vscode中打开该文件夹,再在vscode的控制台中输入:

    npm create hello
    
    • 1

    即可创建一个名为hello的工程,结构如下:
    在这里插入图片描述

    组件

    • Vue 中规定组件的后缀名是 .vue
    • 每个 .vue 组件都由 3 部分构成,分别是
      1. template,组件的模板,可以包含HTML标签及其他的组件
      2. script,组件的 JavaScript 代码
      3. style,组件的样式

    组件的使用

    一个组件如果想要使用,需要在App.vue的script标签下进行导入和注册。具体页面上使不使用,要看App.vue的template里面有没有用到。
    在这里插入图片描述

  • 相关阅读:
    支付宝小程序 头部导航背景颜色渐变
    docker打包发版
    Beanshell的未授权利用
    封装一个高级查询组件
    互联网摸鱼日报(2023-05-27)
    从力扣[203]理解递归思想
    怎么优化亚马逊Listing?看这一篇就够了!
    桶装水水厂送水小程序开发
    QTextStream(文本流)
    10.1 Shiro(简介)
  • 原文地址:https://blog.csdn.net/zhiaidaidai/article/details/133445148