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 应用于其他表单元素

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

在这里插入图片描述

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

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

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

相关文章

类和对象（下篇）（未完结）！

类和对象（下篇）（未完结）！

文章目录 在谈构造函数1.构造函数体赋值2.初始化列表尽量使用初始化列表&#xff1f;初始化列表的初始化顺序&#xff1f;成员变量声明处的缺省值构造函数支持类型转换3.explicit关键字 static成员 在谈构造函数 1.构造函数体赋值 class Date{public:Date(int year, int mont…
阅读更多...
Python设计模式之适配器模式

Python设计模式之适配器模式

目录 一、适配器模式 适配器模式的组成部分 适配器模式的种类 应用场景 实现步骤 二、测试例子 一、适配器模式 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过将一个现有接口转换为另一个期望的接口来让不兼容的接口能够合作…
阅读更多...
香港服务器负载过高的原因和应对办法

香港服务器负载过高的原因和应对办法

保持网站正常运行看似简单&#xff0c;但事实上&#xff0c;有许多问题会影响网站和应用程序的性能&#xff0c;并可能导致停机。其中一个问题就是服务器过载。而香港服务器作为一种常见的服务器类型&#xff0c;有时会出现负载过高的情况。为了帮助您确保在香港服务器过载不会…
阅读更多...
跨境电商投放Facebook广告推广攻略！

跨境电商投放Facebook广告推广攻略！

在出海浪潮中&#xff0c;跨境电商已经成为企业连接不同市场、拓展国际业务的重要途径。Facebook&#xff0c;作为全球最大的社交平台之一&#xff0c;拥有超过20亿的活跃用户&#xff0c;为跨境卖家提供了一个无与伦比的营销舞台。有效利用Facebook广告&#xff0c;不仅能帮助…
阅读更多...
捕捉二氧化碳也能赚钱？深入探索CCUS技术与商业前景

捕捉二氧化碳也能赚钱？深入探索CCUS技术与商业前景

引言 随着全球变暖和气候变化的加剧&#xff0c;如何有效减少二氧化碳&#xff08;CO2&#xff09;排放成为各国亟待解决的问题。近日&#xff0c;全球最大的二氧化碳捕集工厂在冰岛正式运营&#xff0c;这一消息引起了广泛关注。本文将深入探讨捕集二氧化碳技术&#xff08;C…
阅读更多...
海康威视NVR通过ehome协议接入视频监控平台，视频浏览显示3011超时错误的问题解决，即：The request timeout! 【3011】

海康威视NVR通过ehome协议接入视频监控平台，视频浏览显示3011超时错误的问题解决，即：The request timeout! 【3011】

目录 一、问题描述 二、问题分析 2.1 初步分析 2.2 查看日志 2.3 问题验证 1、查看防火墙 2、查看安全组 3、问题原因 三、问题解决 3.1 防火墙开放相关端口 3.2 安全组增加规则 3.3 测试 1、TCP端口能够联通的情况 2、TCP端口不能够联通的情况 四、验证 五、云…
阅读更多...
JWT使用方法

JWT使用方法

目录 基础概念 依赖 生成令牌 工具类 控制层 解析令牌 工具类 网关过滤器 效果 基础概念 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准&#xff08;(RFC 7519).该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点…
阅读更多...
Hsql每日一题 | day03

Hsql每日一题 | day03

前言 就一直向前走吧&#xff0c;沿途的花终将绽放~ 题目&#xff1a;打折日期交叉问题 如下为平台商品促销数据&#xff1a;字段为品牌&#xff0c;打折开始日期&#xff0c;打折结束日期 brand stt edt oppo,2021-06-05,2021-06-09 oppo,2021-06-11,2021-06-21 vivo,…
阅读更多...
共享经济中的创新演示：打造案例分析PPT，让想法流动起来

共享经济中的创新演示：打造案例分析PPT，让想法流动起来

在当今这个看图说话的时代&#xff0c;无论是在职场打拼还是学术殿堂&#xff0c;一份牛气冲天的案例分析PPT无疑是你专业形象的加分项。 不管你是刚出道的小鲜肉&#xff0c;还是已经混迹江湖多年的老鸟&#xff0c;一份有深度、有力度的PPT都能帮你在人群中脱颖而出&#xf…
阅读更多...
IT行业已经饱和？2024年报考计算机类专业还有出路吗？

IT行业已经饱和？2024年报考计算机类专业还有出路吗？

&#x1f446;点击关注 获取更多编程干货&#x1f446; “高薪”光环加持&#xff0c;IT行业一直是不少人心仪的职业选择&#xff0c;计算机专业一度成为最热门的本科专业。 然而&#xff0c;正因报考计算机专业、想要入行IT行业的人越来越多&#xff0c;“行业饱和”、“人才…
阅读更多...
Nodejs 第七十三章（网关层）

Nodejs 第七十三章（网关层）

什么是网关层(getway)&#xff1f; 技术选型fastify 速度快适合网关层 fastify教程上一章有讲 网关层是位于客户端和后端服务之间的中间层&#xff0c;用于处理和转发请求。它充当了请求的入口点&#xff0c;并负责将请求路由到适当的后端服务&#xff0c;并将后端服务的响应…
阅读更多...
免费的八字软件

免费的八字软件

无敌八字排盘软件完全免费使用&#xff0c;即使用不需要付费且无任何限制。同时推出手机版电脑版&#xff0c;两版本数据互通互用&#xff0c;即电脑版的数据可以备份到手机版上导入&#xff0c;手机版的数据也可以备份到电脑版上恢复导入&#xff0c;方便手机和电脑共用的朋友…
阅读更多...
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十九）- JUC（5）

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十九）- JUC（5）

synchronized优化原理 轻量级锁 如果一个对象有多个线程访问&#xff0c;但多线程访问的时间是错开的&#xff08;没有竞争&#xff09;&#xff0c;可以用轻量级锁优化 Slf4j(topic "c.ExerciseTransfer")public class Test {​static final Object obj new Obj…
阅读更多...
AI爆文写作：如果你有一篇文章爆了，正确的做法是：自己抄袭自己，重复发，还可以继续爆！

AI爆文写作：如果你有一篇文章爆了，正确的做法是：自己抄袭自己，重复发，还可以继续爆！

爆款总是相似的&#xff0c;如果你有一篇文章爆了&#xff0c;正确的做法&#xff0c;就是重复发&#xff0c;让它继续爆下去。 以前我在小红书看到一个人&#xff0c;将一篇自己火的笔记&#xff0c;连续发了5次&#xff0c;每次点赞数据都不错。 公众号文章也是一样的。 我…
阅读更多...
Halcon 极坐标转换图像

Halcon 极坐标转换图像

一、概述 先看效果 将圆形的用极坐标转换成矩性然后再进行识别或者其他缺陷检测&#xff0c;最后在还圆到原图中 二、原理&#xff1a; halcon 圆环类缺陷检测的一种方法&#xff08;极坐标变换法&#xff09;_halcon缺口检测-CSDN博客 图像极坐标变换与反变换&#xff08;…
阅读更多...
谈恋爱没经验？那就来刷谈恋爱经验宝宝吧

谈恋爱没经验？那就来刷谈恋爱经验宝宝吧

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…
阅读更多...
IDEA连接MySQL后如何管理数据库

IDEA连接MySQL后如何管理数据库

上一节讲解了IDEA如何连接MySQL数据库管理系统&#xff0c;接下来我们就可以在IDEA里使用MySQL来管理数据库了。那么如果我们现在还没有创建需要的数据库怎么办&#xff1f;本节就来教大家如何在IDEA连接MySQL后管理数据库(创建/修改/删除数据库、创建/修改/删除表、插入/更新/…
阅读更多...
SpringMVC笔记

SpringMVC笔记

一、SpringMVC 简介 1.1 什么是 MVC MVC 是一种软件架构的思想&#xff0c;将软件按照模型、视图、控制器来划分 1.M&#xff1a;Model 模型层&#xff0c;指工程中的 JavaBean &#xff0c;作用是处理数据 JavaBean 分为两类 实体类Bean&#xff1a;专门存储业务数据的…
阅读更多...
在Visual Studio Code和Visual Studio 2022下配置Clang-Format，格式化成Google C++ Style

在Visual Studio Code和Visual Studio 2022下配置Clang-Format，格式化成Google C++ Style

项目开发要求好的编写代码格式规范&#xff0c;常用的是根据Google C Style Guide 网上查了很多博文&#xff0c;都不太一样有的也跑不起来&#xff0c;通过尝试之后&#xff0c;自己可算折腾好了&#xff0c;整理一下过程 背景&#xff1a; 编译器主要有三部分&#xff1a;前…
阅读更多...
最简单的 UDP-RTP 协议解析程序

最简单的 UDP-RTP 协议解析程序

最简单的 UDP-RTP 协议解析程序 最简单的 UDP-RTP 协议解析程序原理源程序结果下载链接参考 最简单的 UDP-RTP 协议解析程序 本文介绍网络协议数据的处理程序。网络协议数据在视频播放器中的位置如下所示。 本文中的程序是一个 UDP/RTP 协议流媒体数据解析器。该程序可以分析 …
阅读更多...
最新文章

Copyright @ 2022~2023