Vue的使用_vue使用-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_77560707/article/details/130145637

该文介绍了Vue.js的基础知识，包括Vue的简介、在Webstorm中创建项目，以及Vue中的常用指令如v-text、v-html、v-on、v-bind、v-for和v-model的用法。此外，还讲解了如何结合axios发送异步请求，展示了与后台交互的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.目录

1. vue简介
2. vue的使用
3. vue中常用的指令
4. axios发送异步请求

2.vue简介

它是一个javascript框架，作用：简化dom操作，以及响应式编程

3.在webstorm中创建工程

（1）引入vue.js文件

//使用自己的路径
<script src="../js/vue.js"></script>

（2）在body中创建一个div标签

<body>
		<div id="app">
			<span>{{msg}}</span>
		</div>
</body>

（3）创建自己的js代码

<script>
    let app = new Vue({
        el:"#app",
        data:{
            msg:"学习vue的第一天"
        }
    })
</script>

3.2 el的属性：

把当前的vue对象挂在到指定的标签元素上，使其vue生效

4.Vue的指令

4.1 v-text 和 v-html 指令

设置标签的文本值

v-text 输出的是纯文本，浏览器不会对其再进行html解析

v-html 会将其html标签解析后输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span>{{msg}}</span>
			<hr />
			<span v-text="hobby"></span>
			<hr />
			<span v-html="hobby"></span>
        </div>
	</body>
	<script>
		// 创建一个vue对象
		let app = new Vue({
			// 挂载到id=app的标签上
			el: "#app",

			data: {
				msg: "我喜欢打篮球",
				hobby:"<font color =red>唱跳Rap篮球</font>"
			}

		})
	</script>
</html>

4.2v-on基础

为元素绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span>{{msg}}</span>
			<hr />
			<button v-on:click="fun">点击</button>
			<button @dblclick="fun2">点击2</button>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		let app = new Vue({
			// 挂载到id=app的标签上
			el: "#app",
			data: {
				msg:"我喜欢打篮球",
},
			methods: {
				fun(){
					this.msg = "C T R L"
				},
				fun2(){
					this.msg = "蔡徐坤",
					alert("ikun")
				}
			}
		})
	</script>
</html>

4.3 v-bind

设置元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <style>
        .a{
            border: red solid 1px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--img标签中src属性引用vue对象中的数据-->
<!--v-bind:class="flag?'a':''" ---- 通过点击事件，修改flag的值来设定class -->
    <img v-bind:src="imgUrl"  width="200" v-bind:title="title"vbind:class="flag?'a':''"/><br>
    <!--v-bind: 缩写为  :   -->
    <img :src="imgUrl"  width="200" :title="title" :class="flag?'a':''"/><br>
    <button @click="fun">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18,
            imgUrl:"图片/00.jpg",
            title:"自定义111图片",
            flag:false
        },
        methods:{
            fun(){
                this.imgUrl="图片/01.jpg";
                this.title="自定义222图片"
                this.flag= !this.flag
            }
        }
    })
</script>
</html>

4.4 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <!--循环遍历爱好，将hobby中的元素用item接收，index索引-->
        <li v-for="(item,index) in hobby">
            {{item}}----{{index}}
        </li>
    </ul>

    <table width="500px" border="1" cellspacing="0" class="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <!--遍历vue中-->
        <tr v-for="item in users">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>
                <button @click="deleteUser(item.name)">删除</button>
                <button >编辑</button>
            </td>
        </tr>
    </table>

</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            hobby:["唱歌","跳舞","篮球","rap"],
            users:[
                {"name":"shi","age":20,"sex":"女"},
                {"name":"xiaoshi","age":23,"sex":"女"},
                {"name":"小石2","age":25,"sex":"女"}
            ]
        },

    })
</script>
</html>

4.5 v-model

获取和设置表单元素的值，例如input，select 等，v-model会实现双向绑定：

vue中的数据发生改变时，绑定的元素也会发生改变，同样绑定的元素改变，vue也会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="aaa"/>

        <button @click="dj">点击</button>
    </div>

</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            aaa:"张三丰"
        },
        methods:{
            dj(){
                // 点击事件，将vue中的aaa数据修改，此时绑定的元素也会改变
                this.aaa="张无忌"
            }
        }
    })
</script>
</html>

4.6 v-show 和 v-if

v-show是通过style中display来控制标签的显示和隐藏，dom元素依旧存在

v-if 显示隐藏是将dom元素整个添加或者删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">     <!--v-show通过style中disable来控制标签的显示和隐藏-->
    <img src="../图片/01.jpg" width="200" v-show="age>18&&age<22"/>   <!--年龄在18到22之间，图片会显示-->
    <hr>
    <!--v-if:通过删除和创建标签来控制-->
    <img src="../图片/02.jpg" width="200" v-if="age>18&&age<22"/>
    <button @click="fun">点击</button>
</div>
</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            age:18
        },
        methods:{
            fun(){
                this.age++;
            }
        }
    })
</script>
</html>

5.vue结合axios以及后台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询</title>

</head>
<body>
<div class="wrap" id="app">
<button class="find" @click="findstudent">
    查询学生
</button>

        <table width="300" border="1">
            <tr>
                <th>学生ID</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
            </tr>
            <tr v-for="item in students">
                <td>{{item.sid}}</td>
                <td>{{item.sname}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            studentVo:{},
            students:[],
        },
        methods:{
            findstudent(){
                axios.post("http://localhost:8080/student/findAll/1/5",this.studentVo).then(result=>{
                    this.students= result.data.data.data.records;
                })

            }
        }
    })
</script>
</html>

6.vue结合axios以及后台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询</title>

</head>
<body>
<div class="wrap" id="app">
<button class="find" @click="findstudent">
    查询学生
</button>

        <table width="300" border="1">
            <tr>
                <th>学生ID</th>
                <th>学生姓名</th>
                <th>学生年龄</th>
            </tr>
            <tr v-for="item in students">
                <td>{{item.sid}}</td>
                <td>{{item.sname}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            studentVo:{},
            students:[],
        },
        methods:{
            findstudent(){
                axios.post("http://localhost:8080/student/findAll/1/5",this.studentVo).then(result=>{
                    this.students= result.data.data.data.records;
                })

            }
        }
    })
</script>
</html>