前端基础篇-快速了解 Vue 前端框架(Vue 指令)

 🔥博客主页: 【小扳_-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 页面渲染成功。可以发送请求到服务端,加载数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/466496.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软件测试工程师教你如何做好职业发展规划

今天将为大家带来一篇关于软件测试工程师职业生涯阶段发展方向分析的文章&#xff0c;准备做测试人员和正在做测试的小伙伴们&#xff0c;我们一起来看一看吧。由于新时代下国内软件测试行业目前的发展迅速、需求旺盛&#xff0c;在国内的软件测试职位晋升一般要比国外快&#…

2024最全电商API接口 高并发请求 实时数据 支持定制 电商数据 买家卖家数据

电商日常运营很容易理解&#xff0c;就是店铺商品维护&#xff0c;上下架&#xff0c;评价维护&#xff0c;库存数量&#xff0c;协助美工完成制作详情页。店铺DSR&#xff0c;好评率&#xff0c;提升客服服务等等&#xff0c;这些基础而且每天都必须做循环做的工作。借助电商A…

宝马发生数据泄露事件,涉及中国、欧洲和美国三地

据悉&#xff0c;汽车巨头宝马的云存储服务器发生配置错误&#xff0c;导致包含敏感信息的私钥和内部数据泄露。 研究人员 Can Yoleri 在例行扫描时发现&#xff0c;宝马在微软 Azure 上的开发环境存储服务器被错误配置为公共访问&#xff0c;本应设置为私有。该存储服务器包含…

移动性模拟助力现实世界实现更优交通决策

什么是移动性模拟&#xff1f; 每天&#xff0c;数以百万计的人在各个地区、城市和空间中流动。移动性模拟将真实世界的数据与模型相结合&#xff0c;揭示人们通常选择的路程&#xff0c;从而帮助了解这些流动。 移动性受小汽车和公共汽车、公路、火车、桥梁、隧道等资产影响…

Axure RP基础功能详解,让你一目了然!

当我们谈论交互设计和用户体验时&#xff0c;axurerp的名字不容忽视。本文将全面解释什么是axurerp&#xff0c;以及如何帮助设计师和开发人员创建高度互动的原型&#xff0c;作为一个强大的工具。 什么是Axure rp&#xff1f; axurerp是一种专业的快速原型设计工具&#xff…

尝试搭建谷粒商城 记录(三)

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a;https://blog.csdn.net/weixin_44190665/article/details/121043585 ———————————————— 版权声明&#xff1…

最新WooCommerce教程指南-如何搭建B2C外贸独立站

WooCommerce是全球最受欢迎的开源电子商务平台之一。它基于WordPress建站&#xff0c;只需一键安装即可使用。该平台提供了丰富的功能&#xff0c;包括产品发布、库存管理、支付网关和运输发货等&#xff0c;可以帮助搭建各种类型的电子商务网站。相比其他竞争对手&#xff0c;…

【Spring整合QQ个人邮箱】

整合腾讯邮箱&#xff0c;首先需要在腾讯邮箱上开启服务&#xff0c;获取到授权码&#xff1b; 获取步骤如下&#xff1a; 进入设置 进入账号页 开启协议获取授权码 JavaMailSender配置 引入依赖 <!--邮件发送依赖--> <dependency><groupId>org.spring…

练习unittest+Fixture实现

练习01 创建⼀个⽬录 case, 作⽤就是⽤来存放⽤例脚本,在这个⽬录中创建 5 个⽤例代码⽂件 , test_case1.py使⽤ TestLoader 去执⾏⽤例 将来的代码 ⽤例都是单独的⽬录中存放的 test_项⽬_模块_功能.py test_case1.py # 1. 导包 unittest import unittest # 2. 定义测试类, 只…

Qt学习--QT Creator使用基本介绍

话不多说&#xff0c;直接开搞&#xff0c;笔者用的是5.12.9版本 双击打开QT Creator 显示这个界面 新建工程 然后出现这样的界面 点击运行 就弹出了一个这个&#xff0c;空的&#xff0c;因为我们啥也没写

集成学习 | 集成学习思想:Bagging思想

目录 一. Bagging思想1. Bagging 算法2. 随机森林(Random Forest)算法 在正文开始之前&#xff0c;我们先来聊一聊什么是集成学习&#xff1f; 集成学习是一种算法思想&#xff1a;将若干个弱学习器分组之后&#xff0c;产生一个新的学习器 弱学习器指预测误差在50%以下的学习器…

快速文字快闪pr模板视频制作素材

Premiere快速文字开场视频模板(pr快闪模板)下载。 项目特点&#xff1a;全高清分辨率&#xff0c;适用于任何字体&#xff0c;包含帮助文件&#xff0c;适用于Premiere Pro 2021及以上版本。 来自&#xff1a;pr模板网&#xff0c;免费下载地址&#xff1a;https://prmuban.com…

JavaScript进阶:js的一些学习笔记-原型

文章目录 js面向对象1. 原型2. constructor属性3. 对象原型4. 原型继承5. 原型链 js面向对象 构造函数 属性和方法 function Person(name,age){this.name name;this.age age;this.play ()>{console.log(玩&#xff01;);} } const a new Person(1,12),b new Person(2…

深入探讨ChatGPT:技术突破与应用前景

目录 一、ChatGPT究竟是什么&#xff1f; 二、ChatGPT的发展脉络 三、ChatGPT的突出优势 强大的语言生成能力 多场景适应性 多语言处理能力 广泛的应用范围 数据敏感性的重视 四、结语&#xff1a;ChatGPT的未来与挑战 Tips&#xff1a;国内的ChatGPT ⭐ 点击进入Chat…

基于MATLAB的OFDM系统实现

1、内容简介 略 78-可以交流、咨询、答疑 基于MATLAB的OFDM系统实现 2、内容说明 略正交频分复用&#xff1b;16QAM&#xff1b;QPSK&#xff1b;系统仿真&#xff1b;误码率 OFDM&#xff08;正交频分复用&#xff09;的基本原理是将高速的数据流通过串并转换分解成若干低…

B140XW01 V8 +OZ9956B PDF

B140XW01 V8 PDF OZ9956B 14B38-COW 18650串联50欧点亮一颗灯珠

结构体成员访问操作符

1.结构体成员的直接访问&#xff1a; 结构体变量.成员名&#xff1a; 2.结构体成员的间接访问: 间接访问应用于指向结构体变量的指针&#xff1a;如下

Linux系统——nload命令

目录 引言 一、nload安装 二、nload命令详解 1.命令使用 2.命令详解 3.命令选项 3.1-u选项 nload -u h 自动变更单位&#xff0c;Bit/s nload -u H 自动变更单位&#xff0c;Byte/s 3.2-m选项 nload -m 不显示流量图 nload -m -H ens33 不显示流量图&#xff0c;以By…

Jenkins流水线将制品发布到Nexus存储库

1、安装jenkins&#xff08;建议别用docker安装&#xff0c;坑太多&#xff09; docker run -d -p 8089:8080 -p 10241:50000 -v /var/jenkins_workspace:/var/jenkins_home -v /etc/localtime:/etc/localtime --name my_jenkins --userroot jenkins/jenkins:2.449 坑1 打开x…