1天搞定SpringBoot+Vue全栈开发 (5)Vue框架快速上手-阿里云开发者社区

1天搞定SpringBoot+Vue全栈开发 (5)Vue框架快速上手

2024-05-24 27

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 1天搞定SpringBoot+Vue全栈开发 (5)Vue框架快速上手

1.前端环境准备

VScode(WebStorm也可以)

2.Vue框架介绍

3.Vue快速入门

3.1导入vue.js的scrip的脚本文件

<script src="https://unpkg.com/vue@next">< script>

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

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

3.3创建vm实例对象

const hello = {
// 指定数据源，既MVVM中的Model
    data: function() {    
        return {
            message: 'Hello Vue!'
        }
    }     
}   
const app = Vue.createApp(hello)
app.mount('#app') // 指定当前vue实例要控制页面的哪个区域

4.Vue的几个用法

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>
    <!--1.导入vue的脚本文件-->
    <script src="https://unpkg.com/vue@3"></script>
</head>
 
<body>
    <!--2.声明要被vue所控制的DOM区域-->
    <div id="app">
        {{message}}
    </div>
    <!--3.创建vue的实例对象-->
    <script>
        const hello = {
            //指定数据源，即MVVM中的Model
            data: function () {
                return {
                    message: 'Hello Vue!'
                }
            }
        }
        const app = Vue.createApp(hello)
        app.mount('#app')
    </script>
</body>
 
</html>

测试：

2.内容渲染指令

<!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/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <p>姓名：{{username}} </p>
        <p>性别：{{gender}}</p>
 
        <!-- 渲染百度的链接-->
        <p>{{desc}}</p>
        <p v-html="desc"></p>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    username: 'zhangsan',
                    gender: '男',
                    desc: '<a href="https//www.baidu.com">百度</a>'
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>

测试：

3.属性绑定指令

<!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/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <a :href="link">百度</a>
        <!-- <a v-bind:href ="link">vue</a> 绑定指令，一般省略v-bind -->
        <input type="text" :placeholder="inputValue"><!--inputValue：默认显示文本-->
        <img :src="imgSrc" :style="{ width : w }" alt="">
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    link: "http://www.baidu.com",
                    //文本框的占位符内容
                    inputValue: '请输入内容',
                    //图片的src地址
                    imgSrc: './images/demo.png',
                    w: '100px'
                }
            }
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
 
</body>
 
</html>

测试：

4.使用JavaScript表达式

<!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/dist/vue.global.js"></script>
</head>
 
<body>
    <!-- vue 实例要控制的 DOM 区域 -->
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{ok ?'True' :'False'}}</p>
        <!-- 拆分 倒序 拼接 -->
        <p>{{message.split('').reverse().join('')}}</p>
        <p :id="'list-' + id">xxx</p>
        <!-- 绑定了user对象 -->
        <p>{{user.name}}</p>
    </div>
    <script>
        const vm = {
            data: function () {
                return {
                    number: 9,
                    ok: false,
                    message: 'ABC',
                    id: 3,
                    user: {
                        name: 'zs',
                    }
                }
            }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
</body>
 
</html>

测试：

5.事件绑定指令

<!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/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <h3>count 的值为: {{count}}</h3>
        <!-- v-on或@ 用于件监听 -->
        <button v-on:click="addCount">+1</button>
        <button @click="count+=1">+1</button>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    count: 0,
                }
            },
            methods: {
                // 点击按钮，让 count 自增 +1
                addCount() {
                    this.count += 1
                },
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>

测试：

点击“+1“按钮，count的值可以+1

6.条件渲染指令

<!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/dist/vue.global.js"></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>

测试：

不断点击“Toggle Flag“按钮，下面两行可以消失又出现

7.v-else和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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <p v-if="num>0.5">随机数 > 0.5</p><!--num>5此标签才会显示-->
        <p v-else>随机数 ≤ 0.5"</p>
        <hr />
        <p v-if="type==='A'">优秀</p>
        <p v-else-if="type==='B'">良好</p>
        <p v-else-if="type==='C'">一般</p>
        <p v-else>差</p>
        <div v-show="a">
            测试
        </div>
        <button @click="a=!a">点击</button>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    //生成1以内的随机数
                    num: Math.random(),
                    type: 'A',
                    a: true
 
                }
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>

测试：

不断点击“点击“按钮，”测试“可以消失又出现

8.列表渲染指令

<!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/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <ul>
            <!--自动创建多个标签-->
            <li v-for="(user,i) in userList">索引是: {{i}}，姓名是: {{user.name}}</li>
        </ul>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    userList: [//准备数据
                        { id: 1, name: '111' },
                        { id: 2, name: '222' },
                        { id: 3, name: '333' },
                    ],
                }
            },
        }
 
        const app = Vue.createApp(vm)
        app.mount('#app')
    </script>
 
</body>
 
</html>

测试：

9.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/dist/vue.global.js"></script>
</head>
 
<body>
    <div id="app">
        <!-- 添加用户的区域 -->
        <div>
            <!-- v-model="something" 双向绑定 页面数据发生变化也会影响name值-->
            <input type="text" v-model="name">
            <button v-on:click=" addNewUser">添加</button>
        </div>
 
        <!-- 用户列表区域 -->
        <ul>
            <li v-for="(user, index) in userlist" :key="user.id">
                <input type="checkbox" />
                姓名: {{user.name}}
            </li>
        </ul>
    </div>
 
    <script>
        const vm = {
            data: function () {
                return {
                    //用户列表
                    userlist: [
                        { id: 1, name: '111' },
                        { id: 2, name: '222' }
                    ],
                    //输入的用户名
                    name: ' ',
                    //下一个可用的 id 值
                    nextId: 3
                }
            },
            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>

测试：

点击“添加“按钮后可以在前端添加姓名