当前位置： 首页 > article >正文

前端基础篇-快速了解 Vue 前端框架（Vue 指令）

article 2025/1/18 8:20:15

 🔥博客主页： 【小扳_-CSDN博客】
❤感谢大家点赞👍收藏⭐评论✍

文章目录

        1.0 Vue 概述

        2.0 Vue 指令

        2.1 指令 - v-bind

        2.2 指令 - v-model

        2.3 指令 - v-on

        2.4 指令 - v-if、v-else-if、v-else

        2.5 指令 - v-show

        2.6 指令 - v-for

        3.0 生命周期

        1.0 Vue 概述

        Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写。基于 MMVM 思想，实现数据的双向绑定，将编程的关注点放在数据上。

        View 相当于 HTML 中的标签，在网页中展示出来的数据，而 Model 则是负责存储数据，ViewModel 则负责连接 View 和 Model ，实现数据的双向绑定。双向绑定的意思可以简单的理解为，无论改变 View 还是 Model 的数据都会影响另外一方的数据。Vue.js 正是通过双向数据绑定实现了这种便捷的数据驱动开发模式。

        Vue.js 采用了响应式数据绑定的机制，当数据发生变化时，页面会自动更新。Vue.js 提供了丰富的指令（Directives），用于操作 DOM 、数据绑定、事件处理等。

        2.0 Vue 指令

        在 Vue.js 中，指令（Directives）是一种特殊的标记，用于向 Vue 实例传达特定的行为。指令以 v- 开头，可以直接绑定到 DOM 元素上，告诉 Vue.js 在渲染 DOM 时要对元素进行怎样的处理。

        2.1 指令 - v-bind

        用于动态绑定 HTML 属性，可以将元素的属性与 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <a :href="url">博客</a>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://blog.csdn.net/Tingfeng__?spm=1000.2115.3001.5343"
        }    
    })
</script>
</html>

        例如将 <a> 标签中的属性 herf 进行绑定，v-bind:href="url" 也可以简写成 :href="url" 。

运行结果：

        2.2 指令 - v-model

        用于实现表单元素和 Vue 实例数据的双向绑定，当表单元素的值发生改变时， 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
        
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello vue"
        }    
    })
</script>
</html>

 用 v-model 指令将输入内容与存储数据绑定起来，保证输入内容与存储数据一致。

       双大括号 {{}} 是一种插值表达式，用于在模板中输出 Vue 实例中的数据。当 Vue 实例的数据发生变化时，插值表达式会自动更新对应的值，从而实现数据的动态展示。当页面渲染时，{{ message }} 会被替换为当前 message 数据的值，

运行结果：

当改变文本框中的内容时，存储的数据也会相应的改变，因为利用了 v-model 将两者进行绑定了。

        2.3 指令 - v-on

        用于绑定事件监听器，可以监听 DOM 事件并在触发时执行 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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="on()">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            on:function(){
                alert("点了我一下");
            }
        }
    })
</script>
</html>

        指令 v-on 将监听器进行绑定，一旦触发，会执行 methods 中指定的方法。v-on:click="on()" 可以简写为 @cilck="on()" 。

运行结果：

        2.4 指令 - v-if、v-else-if、v-else

        条件性的渲染某元素，判定为 true 时渲染，否则不渲染。

举个例子：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">
        <span v-if="age <25">年轻人</span>
        <span v-else-if="age < 60">中年人</span>
        <span v-else>老年人</span>

    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:"33"
        }

    })
</script>
</html>

运行结果：

        2.5 指令 - v-show

        根据条件展示某个元素。

举个例子：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="age">
        <span v-show="age <= 33">年轻人</span>
        <span v-show="age > 33 && age < 60">中年人</span>
        <span v-show="age > 60">老年人</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:"33"
        }
    })
</script>
</html>

运行结果：

与 v-if 的区别：

        与 v-if 区别的是，指令 v-show 是将全部条件都会进行渲染，根据 display 属性的值进行展示，而 v-if 不符合条件的不会进行渲染。

v-if 不合符条件的不会进行渲染：

        只会渲染符合条件的值。

v-show 即使不符合条件也会渲染：

        不合符条件的渲染了，但是不展示在网页上，通过 display 属性值判断。

         简单概括，v-if 是完全的条件渲染，而 v-show 是简单的显示与隐藏。

        2.6 指令 - v-for

        用于循环渲染数组或对象，可以遍历数组的每个元素或对象的属性。

语法格式：

            <span v-for="(item, index) in items"></span>

举个例子：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0px" border="1px" align="center" width="300px">
            <tr>
                <th>序号</th>
                <th>名字</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
            </tr>

            <tr v-for="(user, index) in users">
                <td align="center">{{index+1}}</td>
                <td align="center">{{user.name}}</td>
                <td align="center">{{user.age}}</td>
                <td align="center" v-if="user.gender == 1">男</td>
                <td align="center" v-else-if="user.gender == 2">女</td>
                <td align="center">{{user.score}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {
                    name:"李四",
                    age:19,
                    gender:1,
                    score:90
                },
                {
                    name:"张三",
                    age:29,
                    gender:2,
                    score:66
                },
                {
                    name:"王五",
                    age:33,
                    gender:1,
                    score:95
                },
                {
                    name:"赵六",
                    age:22,
                    gender:2,
                    score:77
                },
                {
                    name:"李思思",
                    age:19,
                    gender:1,
                    score:99
                },
                {
                    name:"小扳手",
                    age:22,
                    gender:1,
                    score:99
                }
                
            ]
        },
        methods:{

        }
    })
</script>
</html>

运行结果：

        3.0 生命周期

        指一个对象从创建到销毁的整个过程。每触发一个生命周期事件，会自动执行一个生命周期方法。

Vue 的生命周期：

        在 Vue 实例挂载到 DOM 之后，Vue实例已经可以正常工作并与 DOM 进行交互。

代码如下：

<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        mounted() {
            alert("挂载完毕，发送请求获取数据")
        },
        methods: {
            
        },
    })
</script>
</html>

运行结果：

        挂载完成之后会自动执行 mounted() 方法，Vue 初始化成功，HTML 页面渲染成功。可以发送请求到服务端，加载数据。


http://www.kler.cn/a/272872.html

相关文章：

  • Oracle报错ORA-01078、LRM-00109
  • 深度学习中的卷积和反卷积（四）——卷积和反卷积的梯度
  • YOLOv10-1.1部分代码阅读笔记-build.py
  • 深入云电脑PC Farm技术探讨，以阿里云、华为云、ToDesk为例
  • 【安卓开发】【Android】总结：安卓技能树
  • 【机器学习】制造业转型：机器学习如何推动工业 4.0 的深度发展
  • 提高效率，就信赖快速开发表单平台
  • 如何跨数据源根据一张表字段更新另一张表字段数据
  • IOS面试题object-c 91-100
  • 上传照片怎么改大小？几个图片改大小的方法
  • Codeforces Round 918 (Div. 4)-----＞E. Romantic Glasses
  • 计算机组成原理-2-计算机的发展应用
  • openEuler-22.03-LTS-SP2更改阿里云yum安装源
  • python异常：pythonIOError异常python打开文件异常
  • 阿里云云服务器ECS端口多个端口号开通教程
  • 组建对等网
  • Qt Excel文件读写
  • 深入理解Linux内核页表映射分页机制原理
  • 软考怎么考？高项科目这么多，应该怎么选？
  • 实现更高能效的汽车级低边驱动器NRVB140ESFT1G 带温度和电流限制 自保护低压侧驱动器
  • 过拟合欠拟合
  • Python爬虫 Day1
  • 网络编程--高并发服务器
  • 程序猿成长之路之socket篇-socket通信原理简介
  • web蓝桥杯真题：和手机相处的时光
  • python异常：Exception、BaseException接收异常，并打印异常信息msg