Vue.js - Vue 的安装 以及 常用的 Vue 指令 【0基础向 Vue 基础学习】

文章目录

  • Vue 快速上手
    • 1、Vue.js 官网 & Vue.js 的获取
    • 2、创建 Vue 实例，初始化渲染
    • 3、插值表达式
  • 安装 Vue 开发者工具：装插件调试 Vue 应用
  • Vue 指令
    • 1、v-show 指令
    • 2、v-if
    • 3、v-else & v-else-if
    • 4、v-on
      • v-on 调用传参
    • 5、v-bind
      • v-bind 对于样式控制的增强 - 操作class
    • 6、v-for
      • v-for 中的 key
    • 7、v-model

Vue 快速上手

1、Vue.js 官网 & Vue.js 的获取

​ Vue3 官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

​ Vue2 官网：Vue.js

​ 本系列将以如下的 Vue.js 版本为大家进行实例的演示与讲解

<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

2、创建 Vue 实例，初始化渲染

在这里插入图片描述

创建 Vue 实例，初始化渲染的核心步骤：

  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染

创建一个 vue 实例：

const app = new Vue({el: '#app',//el 指定挂载点，选择器指定控制的是哪个盒子data: {//data 提供数据message: '迪幻',count: 2386},})

完整的代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{message}}{{count}}</div>
</body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: '迪幻',count: 2386},})
</script></html>

3、插值表达式

插值表达式是一种 Vue 的模板语法

在这里插入图片描述

效果图

在这里插入图片描述

1. 作用:

利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2. 语法：

{{ 表达式 }}

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

3. 注意点：

（1）使用的数据必须存在（data）

（2）支持的是表达式，而非语句，比如：if for…

（3）不能在标签属性中使用{{ }} 插值

安装 Vue 开发者工具：装插件调试 Vue 应用

（1）通过谷歌应用商店安装 （国外网站）

（2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件

下载地址：https://chrome.zzzmh.cn/index

在这里插入图片描述

打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试。

在这里插入图片描述

Vue 指令

1、v-show 指令

  • 作用： 控制元素显示隐藏
  • 语法： v-show = “表达式” 表达式值 true 显示， false 隐藏
  • 原理： 切换 display:none 控制显示隐藏
  • 场景： 频繁切换显示隐藏的场景

在这里插入图片描述

2、v-if

  • 作用： 控制元素显示隐藏（条件渲染）
  • 语法： v-if = “表达式” 表达式值 true 显示， false 隐藏
  • 原理： 基于条件判断，是否 创建 或 移除 元素节点
  • 场景： 要么显示，要么隐藏，不频繁切换的场景

在这里插入图片描述

注意：v-show 和 v-if 最大的区别：

  • v-show 只是控制元素的显示与隐藏，但是元素是一直存在的
  • v-if 是只有在其表达式为真时才会创建相应的标签，而为假时则不会创建此标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div v-show="flag">这是v-show控制的盒子</div><div v-if="flag">这是v-if控制的盒子</div></div>
</body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {flag: true}})
</script></html>

3、v-else & v-else-if

  • 作用： 辅助 v-if 进行判断渲染
  • 语法： v-else v-else-if = “表达式”
  • 注意： 需要紧挨着 v-if 一起使用

例如：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><p v-if="gender===1">男生</p><p v-else>女生</p><p v-if="score>90">grade-A</p><p v-else-if="score>80">grade-B</p><p v-else-if="score>70">grade-C</p><p v-else="score>60">grade-D</p></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {gender: 1,score: 79}})
</script></html>

4、v-on

  • 作用： 注册事件
  • 语法： ① v-on:事件名 = “内联语句” ② v-on:事件名 = “methods中的函数名”
  • 简写：@事件名 = 添加监听 + 提供处理逻辑
  • 注意：methods函数内的 this 指向 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>
</head><body><div id="app"><button @click="login">{{message}}</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '迪幻登录',},methods: {login() {alert(this.message)}}})</script></html>

v-on 调用传参

在这里插入图片描述

例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>余额：</h1>{{money}}</h1><button @click="buy(price1)">{{title1}}</button><button @click="buy(price2)">{{title2}}</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {money: 100,price1: 5,price2: 10,title1: '可乐5元',title2: '蛋糕10元'},methods: {buy(price) {this.money -= price}},})
</script></html>

5、v-bind

  • 作用：动态的设置html的标签属性 → src url title …
  • 语法：v-bind:属性名=“表达式”
  • 注意：简写形式 :属性名=“表达式”

在这里插入图片描述

v-bind 对于样式控制的增强 - 操作class

语法 :class = “对象/数组”

① 对象 → 键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

在这里插入图片描述

② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

:class="['pink', 'big']"

适用场景：批量添加或删除类

注意：如果没有 img 标签没有 v-bind 属性的话，src就会只会被认为是 url 这个字面量，而不是一个变量

实例

<!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>Document</title>
</head><body><div id="app"><!-- v-bind:src   =>   :src --><img src="imgUrl" v-bind:title="msg" alt=""><img :src="imgUrl" :title="msg" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {imgUrl: './imgs/10-02.png',msg: 'hello 迪幻'}})</script>
</body></html>

6、v-for

  1. 作用： 基于数据循环， 多次渲染整个元素

    • 遍历数组语法： v-for = “(item, index) in 数组”

    • item 每一项， index 下标

    • 省略 index: v-for = “item in 数组” → 数组、对象、数字…

在这里插入图片描述

v-for 中的 key

  • 语法：key属性 = “唯一标识”
  • 作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

在这里插入图片描述

v-for 的默认行为会尝试 原地修改元素 （就地复用）

  • key作用： 给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。

  • 注意点：

    1. key 的值只能是 字符串 或 数字类型
    2. key 的值必须具有 唯一性
    3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

在这里插入图片描述

7、v-model

  1. 作用: 给 表单元素 使用, 双向数据绑定 ① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新
  2. 语法: v-model = ‘变量’

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><input type="text" v-model="username"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {username: 'dihuan',},})
</script></html>

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

v-model 应用于其他表单元素

它会根据 控件类型 自动选取 正确的方法 来更新元素

在这里插入图片描述

本次分享就到这里，感谢大家的支持与观看，若有谬误请各位谅解与指出，我们下期再见

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

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

相关文章

【算法】前缀和算法——和为k的子数组之和

【算法】前缀和算法——和为k的子数组之和

题解&#xff1a;和为k的子数组之和(前缀和算法) 目录 1.题目2.题解思路2.1前缀和 哈希表&#xff0c;算法步骤&#xff1a;2.2细节如下&#xff1a;2.3参考代码&#xff1a; 3.总结及思考 1.题目 题目链接&#xff1a;LINK 2.题解思路 暴力求解自然不用多说&#xff0c;时…
阅读更多...
【SQL】外连接 LEFT JOIN

【SQL】外连接 LEFT JOIN

目录 一.内连接与外连接 1.内连接&#xff08;inner join&#xff09; 2.外连接&#xff08;outer join&#xff09; 二.两表连接 1.我们先来试试看内连接&#xff1a; 2.我们再来试试外连接 三.单表外连接 四.总结 一.内连接与外连接 先得介绍内连接和外连接两个概念&…
阅读更多...
第199题｜关于函数的周期性问题｜函数强化训练（六）｜武忠祥老师每日一题 5月24日

第199题｜关于函数的周期性问题｜函数强化训练（六）｜武忠祥老师每日一题 5月24日

解题思路&#xff1a;解这道题我们要用到下面这个结论 f(x)连续&#xff0c;以T为周期时&#xff0c;原函数以T为周期的充分必要条件是&#xff1a; (A) sin x显然是以π为周期的&#xff0c;我们可以看到并不等于0,根据结论&#xff0c;A的原函数显然不是周期函数。 (B) 的…
阅读更多...
你以为的私域是真正的私域嘛？？你的私域流量真的属于你嘛？

你以为的私域是真正的私域嘛？？你的私域流量真的属于你嘛？

大家好 我是一个软件开发公司的产品经理 专注私域电商行业7年有余 您的私域流量是真正的属于你自己嘛&#xff1f; 私域的定义 私域的界定&#xff1a;一个互联网私有数据&#xff08;资产&#xff09;积蓄的载体。这个载体的数据权益私有&#xff0c;且具备用户规则制定权…
阅读更多...
Mysql 备份恢复 mysqldump与xtrabackup备份

Mysql 备份恢复 mysqldump与xtrabackup备份

1.1 备份的原因 备份是数据安全的最后一道防线&#xff0c;对于任何数据丢失的场景&#xff0c;备份虽然不一定能恢复百分之百的数据 (取决于备份周期)&#xff0c;但至少能将损失降到最低。衡量备份恢复有两个重要的指标&#xff1a;恢复点目标(RPO) 和恢复时间目标(RTO)&…
阅读更多...
数据库常用命令（1）

数据库常用命令（1）

DML 1.添加数据&#xff08;insert into&#xff09; insert into 表名 values (值1&#xff0c;值2....); 表示成功运行&#xff1a; 2.修改数据&#xff08;update&#xff09; update 表名 set 字段名1值1&#xff0c;字段名2值2.....【where条件】 3.删除数据&#xff0…
阅读更多...
元年科技数据智能研发部负责人张亚东受邀为第十三届中国PMO大会演讲嘉宾

元年科技数据智能研发部负责人张亚东受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 北京元年科技股份有限公司数据智能研发部负责人张亚东先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“大模型时代&#xff0c;AI创新型工具提升项目管理效率”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&a…
阅读更多...
jmeter之HTTP请求和查看结果树

jmeter之HTTP请求和查看结果树

一、HTTP请求作用&#xff1a; 可以发送post或get请求等请求可以向服务器发送参数或消息体数据可以进行文件上传 HTTP请求&#xff1a;是线程组内的取样器最常用的的一个原件 二、查看界面 添加一个HTTP请求&#xff1a;选择线程组–添加–取样器–HTTP请求 默认界面 名称和…
阅读更多...
ThreadLocal为什么会导致内存泄漏？

ThreadLocal为什么会导致内存泄漏？

问题引出&#xff1a; ThreadLocal是为了解决什么问题而产生的&#xff1f; ThreadLocal发生内存泄漏的根本原因是什么&#xff1f; 如何避免内存泄漏的发生&#xff1f;定义 为了解决多个线程同时操作程序中的同一个变量而导致的数据不一致性的问题。   假设现在有两个线程A…
阅读更多...
如何获取一个城市或者一个区域的玫瑰风向图？

如何获取一个城市或者一个区域的玫瑰风向图？

玫瑰风向图是一种直观展示风向和风速的图形工具&#xff0c;它在气象学、城市规划、农业等领域都有广泛的应用。那么&#xff0c;如何获取某个城市或某个区域的玫瑰风向图呢&#xff1f; 首先&#xff0c;我们可以借助互联网资源获取玫瑰风向图。现代网络技术发达&#xff0c;…
阅读更多...
前端 防抖和节流

前端 防抖和节流

在前端开发中&#xff0c;防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;是两种常用的性能优化技术&#xff0c;尤其在处理频繁触发的事件时显得尤为重要。无论是在用户输入、窗口调整大小&#xff0c;还是滚动事件中&#xff0c;这两种技术都可…
阅读更多...
3D 生成重建011-LucidDreamer 优化SDS过平滑结果的一种探索

3D 生成重建011-LucidDreamer 优化SDS过平滑结果的一种探索

3D 生成重建011-LucidDreamer 优化SDS过平滑结果的一种探索 文章目录 0论文工作1论文方法2 效果 0论文工作 文本到3D生成的最新进展标志着生成模型的一个重要里程碑&#xff0c;为在各种现实场景中创建富有想象力的3D资产打开了新的可能性。虽然最近在文本到3D生成方面的进展…
阅读更多...
自建公式，VBA在Excel中解一元一次方程

自建公式，VBA在Excel中解一元一次方程

自建公式，VBA在Excel中解一元一次方程 文章目录 前言一、运行效果图二、操作思路三、代码1.去除方程中未知数，将未知数转为“*0”2.计算方程中常数3.计算方程中未知数的系数一，先将未知数替换成“*1”4.计算方程中未知数的系数二5.计算方程得数前言 小学必考内容：一元一次…
阅读更多...
掌握Python基本语法的终极指南【基本语法部分】

掌握Python基本语法的终极指南【基本语法部分】

一、基本语法部分 1.简单数据类型 1.1字符串类型及操作 字符串访问&#xff1a; 1.索引访问 mystr"Hello world" #索引访问 print(mystr[0]) #H print(mystr[-1]) #d print(mystr[-7]) #o print(mystr[6]) #w 2.切片访问 [头下标&#xff1a;尾下标] &#x…
阅读更多...
齐护K210系列教程(三十二)_在线模型训练

齐护K210系列教程(三十二)_在线模型训练

在线模型训练 概念理解准备工作1 采集图像1.1 图像要求1.2 使用K210采集图片 2 标注图像3 打包数据集4 上传数据4.1创建项目4.1.1图像分类创建项目4.1.2图像检测创建项目 4.2上传数据4.2.1分类检测上传数据4.2.2图像检测上传数据 5 训练模型6 部署模型以及测试7 测试效果7.1图像…
阅读更多...
JDBC总结

JDBC总结

目录 JDBC(java database connection) JDBC连接数据库步骤: 1. 在项目中添加jar文件,如图所示 2.加载驱动类 向数据库中插入数据代码示例: 第一种: 第二种: 查询操作 : 第一种: 第二种: JDBC(java database connection) java数据库连接.api(应用程序编程接口) ,可…
阅读更多...
一文讲清！传统企业的进销存管理难题该怎么解决？

一文讲清！传统企业的进销存管理难题该怎么解决？

有没有开源的进销存软件啊&#xff1f; 确实&#xff0c;市面上存在不少开源的进销存软件。但客观地讲&#xff0c;开源软件往往面临着安全隐患&#xff0c;因为代码公开&#xff0c;容易成为黑客攻击的目标。此外&#xff0c;开源软件的功能模块通常较为固定&#xff0c;难以…
阅读更多...
初出茅庐的小李博客之MQTT.fx客户端接入EMQX Platform

初出茅庐的小李博客之MQTT.fx客户端接入EMQX Platform

EMQX Platform 概览 EMQX Platform 是 EMQ 推出的一款面向物联网领域的 MQTT 消息中间件产品。作为全球首个 MQTT 5.0 消息云服务&#xff0c;EMQX Platform 提供了一站式运维代管、独有隔离环境的 MQTT 消息服务。在万物互联的时代&#xff0c;EMQX Platform 可以帮助您快速构…
阅读更多...
python数据类型之列表

python数据类型之列表

目录 1.创建列表 2.列表基础操作 常用操作 对列表元素顺序随机打乱 列表下标和切片 字符串分割为列表 列表位移 列表切片替换 3.列表内置方法 4.列表排序 简单排序 使用key参数按指定规则排序 二维列表排序 自定义排序规则函数 5.列表排序算法 选择排序 柱状图…
阅读更多...
C# 利用Xejen框架源码，我们来开发一个基于Dapper技术的数据库通用的帮助访问类，通过Dapper的增删改查，可以访问Sqlite数据库

C# 利用Xejen框架源码，我们来开发一个基于Dapper技术的数据库通用的帮助访问类，通过Dapper的增删改查，可以访问Sqlite数据库

Dapper 是一个轻量级的对象关系映射&#xff08;ORM&#xff09;工具&#xff0c;适用于 .NET 平台。它由 Stack Overflow 团队开发&#xff0c;旨在提供简单、高效的数据访问功能。与其他重量级 ORM&#xff08;如 Entity Framework&#xff09;相比&#xff0c;Dapper 更加轻…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023