springboot和vue：八、vue快速入门

news2025/11/1 2:20:13

vue快速入门

新建一个html文件

导入 vue.js 的 script 脚本文件

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

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

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

创建 vm 实例对象（vue 实例对象）

const hello = {
	 data : functiion(){
	                return {
	                    message: 'Hello vue!'
	                }
	            }
	        }
const app = Vue.createApp(hello)
app.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标签再加动作，也可以直接用@加动作
后面可以加方法，也可以直接写简单的函数。
两个按钮都可以实现+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>

在这里插入图片描述

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1053448.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！