springboot和vue2：八、vue快速入门（环境准备、MVVM模式、快速上手、超链接渲染、属性绑定、js表达式、事件绑定、条件渲染、v-if和列表渲染）

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

前端环境准备

依赖管理：NPM
项目构建：VueCli
IDE：VsCode（安装插件：Live Server和open in browser，第一个插件用于保存后就可刷新浏览器，第二个插件用于右键显示在默认浏览器中打开）

vue快速入门

MVVM模式

MVVM是Model--View-ViewModel的缩写，model实际上就是数据。view实际上就是视图，也就是用户看到的页面。ViewModelf负责连接View和Model,保证视图和数据的一致性。

Vue提供了MVVM风格的双向数据绑定（就是model/数据变化可以影响视图/页面。同时视图/页面变化也可以影响model/数据）
Vue的核心是MVVM中的VM,也就是ViewModel，但是其本质还是一个js框架。
在这里插入图片描述

导入脚本

新建一个html文件，在head标签内导入 vue.js 的 script 脚本文件

//不压缩版
<script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>
//压缩版1
<script src="https://unpkg.com/vue@next"></script>
//压缩版2
<script src="https://unpkg.com/vue@3"></script>

以上三个选一个就好了，本人选了最后一个

声明视图

在页面中声明一个将要被 vue 所控制的 DOM 区域，既MVVM中的View视图

<div id="app">
	{{ message }}
</div>

创建vue 实例对象

在body标签里面新增script标签，代码如下：

// 声明一个js对象，里面包含Model
const hello = {
	 // 指定数据源。即Model
	 data : functiion(){
	                return {
	                    message: 'Hello vue!'
	                }
	            }
	        }
const app = Vue.createApp(hello) //通过Vue.createApp(js对象)创建一个 VM/ViewModel实例对象
app.mount('#app') //指定当前vue实例要控制哪个视图

以上又可以简写为：

Vue.createApp({
  data() {
    return {
      message: 'Hello vue!'
    }
  }
}).mount('#app')

最终html代码

<!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">
        {{ message }}
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    message: 'hello vue'
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

注意ctrl+s保存。

最终页面

在这里插入图片描述

vue基础用法

内容渲染（超链接的渲染）

需要额外注意的是链接标签的渲染除了双括号之外需要额外用v-html的标签，否则只会识别成文本。

<!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">
        <p>姓名：{{username}}</p>
        <p v-html="desc"></p>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    username: 'zhangsan',
                    desc: '<a href = "http://www.baidu.com">百度</a>'
                }
            }
        }
        const app = Vue.createApp(vm)
        app.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>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <a :href='link'>百度</a:href>
            <input type="text" :placeholder="inputValue">
            <img :src="imgSrc" :style="{width:w}" alt=""></img:>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    link: "http://www.baidu.com",
                    inputValue: '请输入内容',
                    imgSrc: './images/1.jpg',
                    w: '300px'
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

测试页面：

在这里插入图片描述

结合js表达式

<!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">
        <p>{{number+1}}</p>
        <p>{{ok ? 'True' : 'False'}}</p>
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-'+id"></p>
        <p>{{user.name}}</p>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    number: 9,
                    ok: false,
                    message: 'ABC',
                    id: 3,
                    user: {
                        name: "shanshan"
                    }
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

在这里插入图片描述

事件绑定

可以使用v-on标签再加动作，也可以直接用@加动作。注意不能用js原生的onclick
后面可以加方法，也可以直接写简单的函数。
两个按钮都可以实现+1的功能。

完整代码：

<!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">
        <h3>count的值：{{count}}</h3>
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    count: 0
                }
            },
            methods: {
                addCount() {
                    this.count += 1
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

条件渲染

只有表达式为真时，v-if才会真正地在dom树里创建出来。
无论表达式值为什么，v-show都会被创建出来，只是页面不一定显示。
完整代码

<!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">
        <button @click="flag = !flag">Toggle Flag</button>
        <p v-if="flag">请求成功 --- 被v-if控制</p>
        <p v-show="flag">请求成功 --- 被v-show控制</p>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    flag: false,
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>

最开始表达式为假时：
在这里插入图片描述
可以看到此时表达式为假，但是在dom树里面可以看到v-show对应的标签，看不到v-if对应的标签。

点击按钮后，表达式为真时：
在这里插入图片描述

v-if和列表渲染

完整代码：

<!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">
        <p v-if="num>0.5">随机数>0.5</p>
        <p v-else>随机数≤0.5</p>
        <ul>
            <li v-for="(user, i) in userList">索引是：{{i}}， 姓名是：{{user.name}}</li>
        </ul>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                	num: Math.random(),
                    userList: [
                        { id: 1, name: 'zhangsan' },
                        { id: 2, name: 'lisi' },
                        { id: 3, name: 'wangwu' },
                    ]
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>

</html>