springboot和vue2：九、v-model双向绑定、v-for中的:key避免标签重用、Node.js和npm的下载、vue-cli脚手架安装、vue create创建项目和组件的使用

本文链接：https://blog.csdn.net/zhiaidaidai/article/details/133445148

v-model双向绑定、v-for中的:key避免标签重用

目的

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

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <div>
            <input type="text" v-model="name">
            <!-- v-model是双向绑定指令，当页面上值发生变化，也会改变name的值，name改变也会影响页面的值 -->
            <button @click="addNewUser">添加</button>
        </div>
        <ul>
            <li v-for="(user, index) in userlist">
                <input type="checkbox" />
                姓名：{{user.name}}
            </li>
        </ul>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    userlist: [
                        { id: 1, name: 'zhangsan' },
                        { id: 2, name: 'lisi' },
                        { id: 3, name: 'wangwu' },
                    ],
                    name: '',
                    nextId: 4
                }
            },
            methods: {
                addNewUser() {
                    this.userlist.unshift({ id: this.nextId, name: this.name })
                    // unshift是在数组的最前面加上元素
                    this.name = ''
                    // name置空，是为了置空输入框中的内容
                    this.nextId++
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

测试

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

输入shanshan

点击添加后

存在问题

看似实现了我们想要的功能，但是实际上该页面存在bug。譬如我们现在刷新页面并勾选zhangsan。同时输入shanshan。
在这里插入图片描述
点击添加后，可以看到shanshan成为了被勾选的标签，zhangsan不再被勾选。

这是因为我们没有给li标签添加上唯一的标记，而vue又倾向于重用标签，所以vue分不清楚哪些标签的状态进行了改变。

修改代码

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

<li v-for="(user, index) in userlist" :key="user.id">
                <input type="checkbox" />
                姓名：{{user.name}}
            </li>

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

发现测试成功。
这一点很重要，如果不给循环的元素加上唯一的key，那么后面组件化开发会报错。

Node.js和npm下载

本人环境是macos，且已经安装了homebrew，所以直接用brew下载安装

brew install node

因为npm是Node.js的一部分，所以会自动下载。

检验安装是否成功：

node -v
npm -v

组件化开发

vue-cli脚手架的安装

首先安装vue-cli本身

npm install -g @vue/cli

然后通过vue create创建项目

vue create hello

按上下键切换选项，按空格切换是否选中的状态，按回车表示继续到下一页选项。

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

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

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

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

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

询问使用Yarn还是NPM，我们使用NPM管理。
在这里插入图片描述
即安装完成。
然后可以看到程序给予的提示：

输入上述两个命令即可运行该项目。

组件

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

组件的使用

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