自制笔记 | JavaWeb——Vue（持续更新...）

本文链接：https://blog.youkuaiyun.com/Vendetta_A_A/article/details/136587719

本文详细介绍了Vue前端框架的基本概念，包括MVVM模式、数据双向绑定、常用指令（如v-bind,v-model,v-on等）以及组件的生命周期阶段，通过实例演示了如何在项目中应用这些概念。

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

文章目录

常用指令
生命周期

Vue是一套 前端框架，免除原生JS中的DOM操作，简化书写

基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

Vue

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

快速入门：

① 新建HTML页面，引入Vue.js文件

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

② 在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域（这里表示id为app的区域）
        data: {
            message: "Hello Vue!"
        }
    })
</script>

③ 编写视图

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

完整代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<script>
    new Vue ({
        el: "#app", //vue接管区域
        data: {
            message: "Hello Vue"
        }
    })
</script>

常用指令

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

常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

1.v-bind

<a v-bind:href="url">传智教育</a>

简化写法：

<a :href="url">传智教育</a>

2.v-model

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

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

示例：

<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
    </div>
</body>

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

3.v-on

<input type="button" value="按钮" v-on:click="handle()">

简化写法：

<input type="button" value="按钮" @click="handle()">

示例：

<script>
    new Vue ({
        el: "#app",
        data: {
            //...
        },
       	methods: {
            handle:function() {
                alert("我被点击了");
            }
        }
    })
</script>

4.v-if、v-show

示例：

<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>
    new new Vue({
        el: "#app",
        data: {
            age: 20
        }
    })
</script>

渲染效果：

渲染效果

二者的区别在于v-show改变的是display属性的值，而v-if而是改变渲染的元素

<div v-for="addr in addrs">{{addr}}</div>

<div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>

data : {
	...
	addrs: ['北京', '上海', '广州', '深圳', '成都', '杭州']
}

addr表示遍历到的每一个元素，index表示索引（从0开始）

示例：

<body>
    <div id="app">
        <div v-for="addr in addrs">{{addr}}</div>

        <div v-for="(addr, index) in addrs">{{index + 1}} : {{addr}}</div>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            addrs: ['北京', '上海', '广州', '深圳', '成都']
        },
        methods: {
            
        }
    })
</script>

案例：

通过Vue完成表格数据的渲染展示

<!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="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 v-show="user.gender == 1">男</td>
                <td v-show="user.gender == 2">女</td>
                <td>{{user.score}}</td>
                <td v-show="user.score >= 85">优秀</td>
                <td v-show="user.score >= 60 && user.score < 85">及格</td>
                <td v-show="user.score < 60" style="color: red;">不及格</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
            }]
        }
    })
</script>
</html>

生命周期

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

Vue生命周期

mounted：挂载完成，Vue初始化完成，HTML页面渲染成功。（发送请求到服务端，加载数据）

示例：

<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            
        },
        mounted() {
            alert("vue加载完毕，发送请求到服务端");   
        }
    })
</script>