前端基础篇-快速了解 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 页面渲染成功。可以发送请求到服务端，加载数据。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

实现C++自定义的String类

实现C++自定义的String类

一、简介 采用了COW写时复制的方式实现&#xff0c;即在每个String类数据域之前用了4个字节的空间进行引用计数。通过拷贝构造函数或者赋值运算符函数进行赋值时不会重新开辟空间&#xff0c;只会对引用计数加一&#xff0c;当有修改操作时&#xff0c;才会重新开辟新的空间&a…
阅读更多...
es文档操作命令

es文档操作命令

文档操作 documents 创建数据&#xff08;put&#xff09; 向 user 索引下创建3条数据 PUT /user/_doc/1 {"name":"zhangsan","age":18,"sex":"男","info":"一顿操作猛如虎&#xff0c;一看工资2500"…
阅读更多...
码云简化版使用教程

码云简化版使用教程

码云简化版使用教程 ①创建本地项目 ②在本地项目根目录下创建git相关目录及文件 ③在码云上创建新的仓库 ④在本地项目中配置仓库地址&#xff0c;提交项目内容 下面直接从第二步开始讲解 在本地项目根目录下创建git相关目录及文件 1、打开项目根目录&#xff0c;进入cmd界…
阅读更多...
Linux应用 线程同步之互斥锁

Linux应用 线程同步之互斥锁

1、概念 1.1 定义 互斥锁&#xff08;Mutex&#xff09;&#xff0c;又称互斥型信号量&#xff0c;是一种特殊的二值性信号量&#xff0c;主要用于实现对共享资源的独占式处理。任意时刻&#xff0c;互斥锁的状态只有两种&#xff1a;开锁或闭锁。当有任务持有时&#xff0c;…
阅读更多...
旧衣服回收小程序开发，“互联网+”模式下巨大收益

旧衣服回收小程序开发，“互联网+”模式下巨大收益

近年来&#xff0c;在人们生活水平的提高下&#xff0c;旧衣物随之增加&#xff0c;如何处理旧衣服成为了当下大众所困扰的问题。 当下&#xff0c;旧衣回收行业已经成为了一个新的热门行业&#xff0c;我国人口众多&#xff0c;旧衣物的市场规模也在不断扩大&#xff0c;市场…
阅读更多...
【QT入门】qmake和cmake的简单区别

【QT入门】qmake和cmake的简单区别

声明&#xff1a;该专栏为本人学习Qt知识点时候的笔记汇总&#xff0c;希望能给初学的朋友们一点帮助(加油&#xff01;) 往期回顾&#xff1a; 【QT入门】Windows平台下 QT的编译过程-CSDN博客 【QT入门】VS2019QT的开发环境配置-CSDN博客 【QT入门】VS2019和QT Creator如何添…
阅读更多...
基于springboot+vue的房屋交易平台

基于springboot+vue的房屋交易平台

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
代码随想录算法训练营Day48 | LeetCode121. 买卖股票的最佳时机、LeetCode122.买卖股票的最佳时机II

代码随想录算法训练营Day48 | LeetCode121. 买卖股票的最佳时机、LeetCode122.买卖股票的最佳时机II

LeetCode121. 买卖股票的最佳时机 动规五部曲&#xff1a; 1、dp[i][0]:在第i天持有股票的最大收入&#xff1b;dp[i][1]:在第i天不持有股票的最大收入。 2、递推公式&#xff1a;第i天持有股票&#xff0c;有两种情况&#xff1a;前一天已经持有&#xff0c;当天刚买入&#…
阅读更多...
Greetings

Greetings

Problem - 1915F - Codeforces 题意 给一些(l,r)找到所有能够包含(l,r)的数目 引入 也就是找逆序对个数 要用到归并排序中的思想&#xff1a; //https://www.luogu.com.cn/problem/P1216 #include<iostream> #include<cstdio> #include<stack> #include…
阅读更多...
用python如何实现智能合约？如何使用remix编写solidity智能合约并部署上链

用python如何实现智能合约？如何使用remix编写solidity智能合约并部署上链

目录 用python如何实现智能合约？ 直接展示下成功界面 下面分步骤说： remix代码 python链接remix代码
阅读更多...
将查询出来数据中相对应的字段根据枚举类更改为其中文内容

将查询出来数据中相对应的字段根据枚举类更改为其中文内容

&#x1f413;1.通过mapper.xml文件中的内容使用casewhen进行更换字段内容 SELECT case user_type when 101000 then 李明 when 101001 then 王丽 when 101002 then 王小黑 when 101003 then 王大黑 when 101004 then 超级大王 when 101005 then 小董 else end as 别称 from…
阅读更多...
python面向对像之第二次笔记

python面向对像之第二次笔记

python面向对像 一、面向对象的三大特性面向对象包含3大主要特性&#xff1a;封装私有成员继承复写 pass关键字多态 总结 一、面向对象的三大特性 面向对象包含3大主要特性&#xff1a; 封装 封装是面向对象编程中的一个重要概念&#xff0c;它指的是将数据&#xff08;属性&a…
阅读更多...
STM32信息安全 1.2 课程架构介绍：芯片生命周期管理与安全调试

STM32信息安全 1.2 课程架构介绍：芯片生命周期管理与安全调试

STM32信息安全 1.2 课程架构介绍&#xff1a;STM32H5 芯片生命周期管理与安全调试 下面开始学习课程的第二节&#xff0c;简单介绍下STM32H5芯片的生命周期和安全调试&#xff0c;具体课程大家可以观看STM32官方录制的课程&#xff0c;链接&#xff1a;1.2. 课程架构介绍&…
阅读更多...
记一些有关Element Plus的样式修改

记一些有关Element Plus的样式修改

先记一个放着&#xff0c;后续慢慢补充。。。 一个 Vue 3 UI 框架 | Element Plus Radio 单选框 1、去除radio的圆圈 .box-radio {/deep/ .el-radio__input {display: none;} }
阅读更多...
Leetcode 3085. Minimum Deletions to Make String K-Special

Leetcode 3085. Minimum Deletions to Make String K-Special

Leetcode 3085. Minimum Deletions to Make String K-Special 1. 解题思路2. 代码实现 题目链接&#xff1a;3085. Minimum Deletions to Make String K-Special 1. 解题思路 这一题思路上来说的话我们只需要统计一下word当中所有的字符出现的频次&#xff0c;然后依次排序&…
阅读更多...
【QT入门】VS2019和QT Creator如何添加第三方模块

【QT入门】VS2019和QT Creator如何添加第三方模块

声明&#xff1a;该专栏为本人学习Qt知识点时候的笔记汇总&#xff0c;希望能给初学的朋友们一点帮助(加油&#xff01;) 往期回顾&#xff1a; 【QT入门】什么是qt&#xff0c;发展历史&#xff0c;特征&#xff0c;应用&#xff0c;QtCreator-CSDN博客 【QT入门】Windows平台…
阅读更多...
模方信创版正式上线！支持水面一键修复、道路置平、纹理编辑...

模方信创版正式上线！支持水面一键修复、道路置平、纹理编辑...

现在国家大力推进信创国产化软硬件替代的政策背景下&#xff0c;大势智慧重磅发布模方信创版&#xff0c;以满足用户对在信创环境下进行实景三维模型修饰与编辑的需求。 模方信创版与重建大师信创版、DasViewer信创版一道&#xff0c;构筑起三维重建信创生态的“铁三角”&…
阅读更多...
Unity PS5开发 天坑篇 之 DEVKit环境部署与系统升级02

Unity PS5开发 天坑篇 之 DEVKit环境部署与系统升级02

上一篇各位大神们已经收到了SONY官方免费寄送的PS5开发机与测试机&#xff0c;恭喜大家成为SONY的开发者, 本篇继续PS5开发机的部署与开发套件使用。 一, PC安装PS5 SDK与系统升级 1. PC/PS5 SDK Manager下载安装包 登录开发者账号后&#xff0c;Development->Resources&a…
阅读更多...
微信小程序处理ArrayBuffer拼接问题

微信小程序处理ArrayBuffer拼接问题

微信小程序中与设备进行通讯时&#xff0c;经常需要在前面加一些字节&#xff0c;或者处理分包的时候需要加一些字节过去&#xff0c;如果在后端很好操作&#xff0c;但是在小程序中由于ArrayBuffer不支持直接操作&#xff0c;非常不方便 最近一个与设备通讯中&#xff0c;需要…
阅读更多...
在字符串中替换指定的子字符串

在字符串中替换指定的子字符串

得到的路径是 url : "/devapihttps://ossdcd.nyncjxx.com/202403/18/1710744688215/xiaomai.jpg" 去除/dev-api&#xff0c;只要后面的 url.replace(/dev-api, "")string.replace(searchValue, newValue)let originalString "Hello, World!"; l…
阅读更多...
最新文章

Copyright @ 2022~2023