Javaweb学习笔记day03---Vue

本文介绍了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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值