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

快速掌握Vue：基础命令详解

news 来源：原创 2024/9/20 20:23:43

1. Vue概述

Vue.js（读音 /vjuː/, 类似于 「view」） 是一套构建用户界面的 「渐进式框架」。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现「响应的数据绑定」和「组合的视图组件」。

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

MVVM(Model-View-ViewModel)，具体释义如下：

  • Model: 数据模型，特指前端中通过请求从后台获取的数据

  • View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据

  • ViewModel: 视图模型，数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

如图所示就是MVVM开发思想的含义：

基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分，我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢？可以参考下图对比：

在更加复杂的dom操作中，vue只会变得更加的简单！在上述的代码中，我们看不到之前的DOM操作，因为vue全部帮我们封装好了。

2. 快速入门

接下来我们通过一个vue的快速入门案例，来体验一下vue。

第一步：在VS Code中创建名为1. Vue-快速入门.html的文件，并且在html文件同级创建js目录，如下图所示：

第二步：编写<script>标签来引入vue.js文件，代码如下：

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

第三步：在js代码区域定义vue对象,代码如下：

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{message: "Hello Vue"}})
</script>

在创建vue对象时，有几个常用的属性：

  • el: 用来指定哪些标签受 Vue 管理。 (该属性取值 #app 中的 app 需要是受管理的标签的id属性值)

  • data: 用来定义数据模型

  • methods: 用来定义函数

第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的

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

浏览器打开效果如图所示：

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title><!-- 1.引入vue.js文件 --><script src="js/vue.js"></script>
</head>
<body><!-- 编写视图 --><div id="app"><input type="text" v-model="message">{{message}}</div>
</body>
<!-- 2.在JS代码区域,创建Vue核心对象，定义数据模型 -->
<script>// 定义Vue对象new Vue({el:"#app",// vue接管区域data:{message:"Hello Vue"}})
</script>
</html>

3. Vue指令

在上述的快速入门中，我们发现了html中输入了一个没有学过的属性v-model，这个就是vue的「指令」。

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

在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表所示：

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

3.1 v-bind

「指令」「作用」
v-bind为HTML标签绑定属性值，如设置 href , css样式等

  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。

    编写如下代码：

  <a v-bind:href="url">链接1</a>

在上述的代码中，v-bind指令是可以省略的：

  <a :href="url">链接2</a>

浏览器打开，2个超链接都可以点击，然后跳转到百度去！效果如图所示：

代码如下：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><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"><!-- v-bind：为HTML标签绑定属性值 --><!-- 两种绑定方式 --><a v-bind:href="url">链接1</a><a :href="url">链接2</a></div></body><script>new Vue({el:"#app",data:{url:"https://space.bilibili.com/349567482"}})</script></html>

「注意：html属性前面有:表示采用的vue的属性绑定！」

3.2 v-model

「指令」「作用」
v-model在表单元素上创建双向数据绑定

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？

    • vue对象的data属性中的数据变化，视图展示会一起变化

    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

    data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？「只有表单项标签！所以双向绑定一定是使用在表单项标签上的」。编写如下代码：

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

打开浏览器，我们修改表单项标签，发现vue对象data中的数据也发生了变化，如下图所示：

通过上图我们发现，我们只是改变了表单数据，那么我们之前超链接的绑定的数据值也发生了变化，为什么？

就是因为我们双向绑定，在视图发生变化时，同时vue的data中的数据模型也会随着变化。

「双向绑定的作用：可以获取表单的数据的值，然后提交给服务器」

代码如下:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-model</title><script src="js/vue.js"></script></head><body><div id="app"><a v-bind:href="url">链接1</a><!-- v-model：在表单元素上创建双向数据绑定 --><input type="text" v-model="url"></div></body><script>new Vue({el:"#app",data:{url:"https://www.baidu.com"}})</script></html>

3.3 v-on

「指令」「作用」
v-on为HTML标签绑定事件

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数

  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

    例如：在js中，事件绑定demo函数

  <input onclick="demo()">

vue中，事件绑定demo函数

  <input v-on:click="demo()">

在vue对象的methods属性中定义事件绑定时需要的handle()函数，代码如下：

 methods: {handle: function(){alert("你点击了一下...");}
}

然后给第一个按钮，通过v-on指令绑定单击事件，代码如下：

<!-- 两种方式 -->
<input type="button" value="点击" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()">

效果如图所示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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"><!-- v-on：为HTML标签绑定事件 --><input type="button" value="点击" v-on:click="handle()"><input type="button" value="点击" @click="handle()"></div>
</body>
<script>new Vue({el:"#app",data:{},methods:{handle:function(){alert("你点击了一下...")}}})
</script>
</html>

3.4 v-if

指令描述
v-if, v-else-if, v-else条件性的渲染某元素，判定为true时渲染,否则不渲染

需求：当我们改变年龄时，需要动态判断年龄的值，呈现对应的年龄的文字描述。

年轻人，需要使用条件判断age<=35,中年人需要使用条件判断age>35 && age<60,其他情况是老年人。所以通过v-if指令

编写如下代码：

年龄<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>

浏览器打开测试效果如下图：

image-20240805161450401

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-if</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-if, v-else-if, v-else：条件性的渲染某元素，判定为true时渲染,否则不渲染 -->年龄<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="age>=60">老年人(60及以上)</span></div>
</body>
<script>new Vue({el:"#app",data:{age:25},methods:{}})
</script>
</html>

3.5 v-show

「指令」「作用」
v-show根据条件展示某元素，区别在于切换的是display属性的值

v-show和v-if的作用效果是一样的，只是原理不一样。代码如下：

年龄<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>

打开浏览器，展示效果如下所示：

可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- v-show：根据条件展示某元素，区别在于切换的是display属性的值 -->年龄<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 Vue({el:"#app",data:{age:25},methods:{}})
</script>
</html>

3.6 v-for

「指令」「作用」
v-for列表渲染，遍历容器的元素或者对象的属性

v-for: 用来遍历变量。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">{{变量名}}
</标签>

遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据"><!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->{{索引变量 + 1}} {{变量名}}
</标签>

编写2种遍历语法来遍历数组，展示数据，代码如下：

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

浏览器打开，呈现如下效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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"><!-- v-for：列表渲染，遍历容器的元素或者对象的属性 --><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div></div>
</body>
<script>new Vue({el:"#app",data:{addrs:["北京","上海","广州","深圳"]},methods:{}})
</script>
</html>

3.7 案例

  • 需求：

    如上图所示，我们提供好了数据模型，users是数组集合，提供了多个用户信息。然后我们需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

  • 分析：

    首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换

  • 步骤：

    • 使用v-for的带索引方式添加到表格的<tr>标签上

    • 使用{{}}插值表达式展示内容到单元格

    • 使用索引+1来作为编号

    • 使用v-if来判断，改变性别和等级这2列的值

  • 代码实现：

    准备如下代码：

  <!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></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>

然后在<tr>上添加v-for进行遍历，以及通过插值表达式{{}}和v-if指令来填充内容和改变内容，其代码如下：

   <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-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 style="color: red;" v-else>不及格</span></td></tr>

效果如图所示：

完整代码如下：

<!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><!-- vue指令渲染 --><tr align="ceenter" 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-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 style="color:red" v-else>不及格</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>

4. 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

其完整的生命周期如下图所示：

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

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

其中我们需要重点关注的是**mounted,**其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。「以后我们一般用于页面初始化自动的ajax请求后台数据」

准备如下代码：

<!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: {}})
</script>
</html>

然后我们编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。

代码如下：

<!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-生命周期-mounted</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},<!-- mounted：挂载完成，Vue初始化成功，HTML页面渲染成功 -->mounted(){alert("Vue挂载完成,发送请求到服务端.")}})
</script>
</html>

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 大数据应用【大数据导论】
  • 揭露黑产新势力：Akira勒索软件家族深度解析
  • [ERR] 1273 - Unknown collation: ‘utf8mb4_0900_ai_ci‘（已解决）
  • 【linux】linux中特殊权限管理--FACL详细用法教程与应用实战
  • Unity初识
  • C语言深度剖析（部分）--剩下随缘更新
  • 2024.08.01 校招 实习 内推 面经
  • 2024年8月7日（mysql主从 ）
  • Kafka + Kraft 集群搭建教程，附详细配置及自动化安装脚本
  • 51单片机-第八节-蜂鸣器
  • 破解PyCharm插件更新难题：让IDE焕发新生
  • Java如何使用 HTTP 请求下载图片
  • 如何通过淘口令链接获取该商品的详情数据？（电商API接口）
  • 2024河南省萌新联赛第四场I
  • 数据结构复杂度
  • 《Javascript高级程序设计 (第三版)》第五章 引用类型
  • 【mysql】环境安装、服务启动、密码设置
  • javascript 总结（常用工具类的封装）
  • Laravel 菜鸟晋级之路
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • nginx 负载服务器优化
  • PHP的类修饰符与访问修饰符
  • 持续集成与持续部署宝典Part 2：创建持续集成流水线
  • 机器学习 vs. 深度学习
  • 力扣(LeetCode)965
  • ​1：1公有云能力整体输出，腾讯云“七剑”下云端
  • ​经​纬​恒​润​二​面​​三​七​互​娱​一​面​​元​象​二​面​
  • # 安徽锐锋科技IDMS系统简介
  • #{}和${}的区别是什么 -- java面试
  • #我与Java虚拟机的故事#连载01：人在JVM，身不由己
  • $L^p$ 调和函数恒为零
  • (07)Hive——窗口函数详解
  • （16）Reactor的测试——响应式Spring的道法术器
  • （C语言版）链表（三）——实现双向链表创建、删除、插入、释放内存等简单操作...
  • (Python) SOAP Web Service (HTTP POST)
  • （solr系列:一）使用tomcat部署solr服务
  • (非本人原创)我们工作到底是为了什么？​——HP大中华区总裁孙振耀退休感言（r4笔记第60天)...
  • （附源码）php投票系统 毕业设计 121500
  • (几何:六边形面积)编写程序，提示用户输入六边形的边长，然后显示它的面积。
  • (计算机网络)物理层
  • （十八）devops持续集成开发——使用docker安装部署jenkins流水线服务
  • （四） Graphivz 颜色选择
  • （万字长文）Spring的核心知识尽揽其中
  • （学习日记）2024.01.09
  • （已更新）关于Visual Studio 2019安装时VS installer无法下载文件，进度条为0，显示网络有问题的解决办法
  • （转）创业家杂志：UCWEB天使第一步
  • .net core webapi Startup 注入ConfigurePrimaryHttpMessageHandler
  • .Net Core/.Net6/.Net8 ，启动配置/Program.cs 配置
  • .Net Core与存储过程(一)
  • .Net MVC4 上传大文件，并保存表单
  • .Net 中Partitioner static与dynamic的性能对比
  • .NET/C# 使用反射调用含 ref 或 out 参数的方法
  • .NET+WPF 桌面快速启动工具 GeekDesk
  • .NET上SQLite的连接
  • /etc/sudoers (root权限管理)