Javaweb学习笔记day03---Vue-优快云博客

本文链接：https://blog.youkuaiyun.com/Wynb1020/article/details/121633674

本文介绍了Vue前端框架，包括Vue的快速入门步骤，通过创建Vue对象和绑定Vue容器进行介绍。接着，详细讲解了Vue指令，如v-html、v-if、v-for等，并展示了文本操作、事件处理和事件修饰符的用法。此外，还探讨了Vue的双向绑定功能，以及如何使用v-for进行列表渲染。

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

Vue

Vue介绍

概述
一个前端框架，用于将数据渲染到页面展示

Vue快速入门

开发步骤
- ①引入vue的脚本库文件
- ②声明一个div容器(Vue容器)，id=app
- ③创建Vue对象，并和div容器绑定
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门案例</title>
</head>
<body>

<!--②声明一个div容器，id=app-->
<div id="app">
    <!--插值表达式-->
    {{msg}}
</div>

</body>
<!--①引入vue的脚本库文件-->
<script src="js/vue.js"></script>
<!--③创建Vue对象，并和div容器绑定-->
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            msg: "helloworld"
        }
    });

</script>
</html>

Vue入门案例

语法

			<script>
			
		    //创建vue对象
		    var vue = new Vue({
		        el: "id选择器",//绑定vue容器
		        data: {//声明变量
		            变量名: 值,
		            变量名2:值2,
		            ...
		        },
		        methods:{//声明函数
		            函数名(形参列表){
		                功能代码;
		                return 结果;
		            },
		            函数名2(形参列表){
		                功能代码;
		                return 结果;
		            }
		        },
		        watch:{
		            
		        },
		        //钩子函数...
		    });
		
		</script>

Vue指令介绍

概述
- 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
常用指令
- v-html、v-bind、v-if、v-show、v-for、v-on、v-model

Vue文本操作

概述
- 使用v-html和v-text指令，和innerHTML/innerText类似
v-html
- 添加文本，会解析html标签
v-text
- 添加文本，不会解析html标签
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue文本操作</title>
</head>
<body>
<!--②声明Vue容器-->
<div id="app">
    <span v-html="msg"></span><br>
    <span v-text="msg"></span><br>
    <span>{{msg}}</span><br>
</div>
</body>
<!--①引入vue.js-->
<script src="js/vue.js"></script>


<!--③创建Vue对象-->
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            msg: "<font color='red'>hello world</font>"
        }
    })

</script>
</html>

Vue事件处理

概述
- 使用"v-on:事件名"来对事件进行处理，也可以简写成"@事件名"
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn1()">按钮1</button>
    <button @click="fn2()">按钮2</button>

    <input type="text" @change="fn3()">
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {},
        methods: {

            fn1(){
                console.log("fn1...");
            },

            fn2(){
                console.log("fn2...");
            },

            fn3(){
                console.log("fn3...");
            }

        }
    })

</script>
</html>

Vue事件修饰符

概述
- .stop : 禁止事件冒泡
.prevent ：禁止组件原有的事件触发
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件修饰符</title>
</head>
<body>
<div id="app">

    <div @click="fn1()">

        <button @click.stop="fn2()">按钮</button>

    </div>


    <!--当点击a标签，只触发函数fn3，不跳转index.html-->
    <a href="index.html" @click.prevent="fn3()">超链接</a>


</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            fn1(){
                console.log("div点击了~~~~");
            },
            fn2(){
                console.log("button点击了~~~~");
            },
            fn3(){
                console.log("a点击了~~~~");
            }
        }
    })

</script>
</html>

Vue双向绑定

概述
- 使用v-model指令来达到双向绑定效果
- 单向绑定
数据，只可以从vue对象到vue容器中
双向绑定
- 数据，既可以从vue对象到vue容器中，也可以从vue容器到vue对象中。
需求
- 将输入框中的值动态显示到span标签中
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向绑定</title>
</head>
<body>
<div id="app">

    <input type="text" v-model="content"><br>

    <span v-text="content"></span>

</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            content: "aaa"
        }
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue双向绑定</title>
</head>
<body>
<div id="app">

    爱好:
    <input type="checkbox" value="lol" v-model="hobbys">lol
    <input type="checkbox" value="king" v-model="hobbys">王者荣耀
    <input type="checkbox" value="java" v-model="hobbys">java
    <input type="checkbox" value="basketball" v-model="hobbys">篮球
    <br>
    <span v-text="hobbys"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    var vue = new Vue({
        el: "#app",
        data: {
            hobbys:[
                "java"
            ]
        }
    })

</script>
</html>

Vue列表渲染

概述
- 使用v-for指令来进行列表渲染

语法

  <li v-for="item in 集合/数组">

 </li>

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue列表渲染</title>
</head>
<body>
<div id="app">

    <ul>

        <li v-for="(user,index) in userList">
            {{index}}
            <span v-text="user.id"></span>
            <span v-text="user.name"></span>
            <span v-text="user.age"></span>
        </li>

    </ul>

</div>
</body>
<script src="js/vue.js"></script>
<script >

    var vue = new Vue({
        el:"#app",
        data:{
            userList : [
                {
                    id : 1,
                    name : "张三",
                    age : 18
                },
                {
                    id : 2,
                    name : "李四",
                    age : 19
                }
            ]
        }
    })

</script>
</html>