参考视频1天搞定SpringBoot+Vue全栈开发
vue前端框架，没有介绍

MVVM模式

Model-View-ViewModel，一种基于前端开发的框架模式，其核心是提供对View和ViewModel的双向数据绑定
Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，其负责连接VIEW和Model，保证视图和数据的一致性

快速上手

建议使用按照官方文档来

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

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

<body>
    <div id="app">
        {{message}}
    </div>
    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    message
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

基础使用

内容渲染

通过vue的模板语法
1
<p>{{username}}</p>
通过v-html=""渲染成html形式:

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

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

<body>
    <div id="app">
        <!-- 模板语法 -->
        <p>{{username}}</p>
        <p v-html="username"></p>

    </div>
    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    username: 'zhangsan'
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

属性绑定

当我们想把内容渲染到属性里面的时候，就需要用到属性绑定

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

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

<body>
    <div id="app">
        <a :href="link">我的博客</a>
        <input type="text" :placeholder="inputValue">
        <img :src="imgSrc" :stylle="{width:w}" alt="">

    </div>
    <script>
        const { createApp, ref } = Vue

        createApp({
            setup() {
                const message = ref('Hello vue!')
                return {
                    link: "https://sofish.top",
                    //文本框的占位符内容
                    inputValue: '请输入内容',
                    //图片的src地址
                    imgSrc: 'https://i2.hdslb.com/bfs/archive/91dc6fa8a57e31a8988ec058743b1624b3fd4c29.jpg@.avif',
                    w: '500px'
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

使用JavaScript表达式

<div id="app">
    <p>{{number+1}}</p>
    <p>{{user.name}}</p>
</div>

注意：这里不要写语句，只能是表达式或者变量

事件绑定

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

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

<body>
    <div id="app">
        <h3>count:{{count}}</h3>
        <button v-on:click="add">+1</button>
        <button @click="add">+1</button>
        <!-- 两者等效 -->

    </div>
    <script setup>
        const vm = {
            data: function () {
                return {
                    count: 0,
                }
            },
            methods: {
                add() {
                    this.count += 1
                },
            },
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
</html>

条件渲染指令

用v-if控制渲染条件
用v-show控制渲染条件

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

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

<body>
    <div id="app">
        <button @click="flag= !flag">change Flag</button>
        <p v-if="flag">v-if成功</p>
        <p v-show="flag">v-show成功</p>
    </div>
    <script setup>
        const vm = {
            data: function () {
                return {
                    flag: false
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

二者差异

v-if如果是false，那么不会被创建
v-show如果是false, 创建后通过css的style="display:none"隐藏

频繁切换时候，v-show更好

v-if和v-else-if指令

<div id="app">
    <button @click="flag= !flag">change Flag</button>
    <p v-if="flag">v-if成功</p>
    <p v-else>v-else成功</p>
</div>

v-else-if同理，不多赘述

列表渲染指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue!</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <li v-for="(user,i) in userList">index:{{i}},name:{{user.name}}</li>
    </div>
    <script setup>
        const vm = {
            data: function () {
                return {
                    userList: [
                        { id: 0, name: 'zhangsan' },
                        { id: 1, name: 'lisi' },
                        { id: 2, name: 'wangwu' },
                    ],
                }
            },
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
</html>

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>Hello Vue!</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <div>
            <!-- 双向绑定v-model -->
            <input type="text" v-model="name">
            <button @click="addNewUser">添加</button>
        </div>
        <ul>
            <li v-for="(user,index) in  userlist">
                <input type="checkbox">
                姓名:{{user.name}}
            </li>
        </ul>
    </div>
    <script setup>
        const vm = {
            data: function () {
                return {
                    userlist: [
                        { id: 0, name: 'zhangsan' },
                    ],
                    name: '',
                    nextId: 1
                }
            },
            methods: {
                addNewUser() {
                    this.userlist.unshift({ id: this.nextId, name: this.name })
                    this.name = ''
                    this.nextId++
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

当不加key的时候，勾选标签再添加就会出现bug，此时就需要添加key

1	<li v-for="(user,index) in userlist" :key="user.id">

注意，key不可以是index，其数值实时变化，依然解决不了问题

NPM的使用

概述

NPM(Node Package Manager)是一个NodeJS包管理和分发工具
其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个JS领域的依赖管理工具
最常见的用法就是用于安装和更新依赖。要使用NPM，首先要安装Node工具

使用

NodeJS安装地址-Node包含了NPM包管理工具
常见指令

最主要的就是npm install

Vue CLI的使用

是Vue官方提供的构建工具，通常称为脚手架
用于快速搭建一个带有热重载以及构建生成版本等功能的单页面应用
Vue CLI基于webpack构建，也可以通过项目内的配置文件进行配置
安装: npm install -g @vue/cli

安装时，在你想要开发项目的文件夹下打开cmd安装

选错的时候，ctrl+c可以重来

创建项目：vue create your_project
学习时脚手架安装推荐
Manually select features->Babel->3.x->In package.json->N(不用快照)

组件化开发

组件(Component)的构成

规定组件的后缀名是.vue
每个.vue组件都由3个部分组成：
- template,组件的模板结构，可以包含HTML标签以及其他组件
- script,组件的JavaScript代码,导入组件也在这里
- style，组件的样式

了解架构

package.json:
- 如果设置private:true就不会发布到npm上
- serve:默认vue-cli-service serve,运行指令
src:写代码的目录
- main.js:入口文件
App.vue:Vue提供的根组件
components:所有组件都写到这个底下

封装，可复用

运行

在vscode中打开文件夹，打开终端（也可以在文件下目录下打开cmd）
输入npm run serve，这个serve就是上文中的运行指令
ctrl+c可以关闭

导入其他组件到App.vue中

<script>
import HelloWorld from './components/HelloWorld.vue'
//import导入后注册
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

使用其他组件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <guide></guide>
</template>

<script>
import guide from './components/guide.vue'

export default {
  name: 'App',
  components: {
    guide
  }
}
</script>