JavaWeb 课堂笔记 —— 03 Vue

东方芷兰

已于 2025-04-08 13:52:23 修改

阅读量1.1k

点赞数 42

分类专栏： JavaWeb 文章标签：笔记 vue.js 前端 javascript java

于 2025-04-08 13:44:45 首次发布

本文链接：https://blog.youkuaiyun.com/lango_LG/article/details/147066463

版权

JavaWeb 专栏收录该内容

16 篇文章

订阅专栏

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 Vue ?

Vue是一套前端框架，用于免除原生JavaScript中的DOM操作，其基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定。

在这里插入图片描述

注：框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型，基于框架进行开发，更加快捷、更加高效。

02 Vue 快速入门

① 引入vue.js文件

<scrpit src="js/vue.js"></scrpit>

② 定义vue对象

<script>
	new Vue({
        //定义vue接管的区域
        el: "#app",
        //定义数据模型
        data:{ 
        	message: "Hello Vue"
    	}
    })
</script>

③ 编写视图层

<body>
    <div id="app">
    	<input type="text" v-model="message"> //v-为指令
        {{message}}
    </div>
</body>

插值表达式{{}}的内容可以是变量、三元运算符、函数调用以及算术运算。

03 Vue 常用指令

Vue常用指令为HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如：v-if,v-for…

在这里插入图片描述

① v-bind和v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a> ♥

        <input type="text" v-model="url"> ♥

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com" ♥
        }
    })
</script>
</html>

在这里插入图片描述

② v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点了我一下~");
           }
        }
    })
</script>
</html>

在这里插入图片描述

③ v-if和v-show

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为: ♥
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为: ♥
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20 ♥
        },
        methods: {
            
        }
    })
</script>
</html>

在这里插入图片描述

④ v-for

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>

        <div v-for="(addr, index) in addrs">{{index}} : {{addr}}</div>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

在这里插入图片描述

04 案例：通过 Vue 完成表格数据的渲染展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            //循环遍历集合
            <tr align="center" v-for="(user, index) in users"> 
                <td>{{index + 1}}</td> //展示内容用插值表达式{{}}包含
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-else-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >=60">及格</span>
                    <span v-else style="color: red;">不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        //接管区域
        el: "#app",
        //数据模型
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
 
        methods: {
            
        },
    })
</script>
</html>

在这里插入图片描述

05 Vue 生命周期

生命周期是指一个对象从创建到销毁的整个过程，其包含八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        //数据模型
        data:{
           
        },
        methods: {
            
        },
        //生命周期方法
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

在这里插入图片描述