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

news2025/1/10 21:07:04

文章目录

  • 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.coloradmin.cn/o/1692161.html

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

相关文章

[数据结构] -- 单链表

[数据结构] -- 单链表

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;C打怪之路&#xff0c;python从入门到精通&#xff0c;数据结构&#xff0c;C语言&#xff0c;C语言题集&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文(平均质量分82)&#…
阅读更多...
订单id的设计问题探讨

订单id的设计问题探讨

如何设计一个订单id 设计一个订单ID系统需要考虑多个因素&#xff0c;包括唯一性、排序性&#xff08;时间顺序&#xff09;、可读性&#xff08;可选&#xff09;以及系统的扩展性和性能。结合这些因素&#xff0c;可以选择不同的方案来生成订单ID。以下是几种常见的订单ID设…
阅读更多...
【Nodejs-多进程之Cluster】

【Nodejs-多进程之Cluster】

cluster 模块是 Node.js 提供的一个用于多进程的模块&#xff0c;它可以轻松地创建一组共享同一个服务器端口的子进程&#xff08;worker进程&#xff09;。通过使用 cluster 模块&#xff0c;可以充分利用多核系统&#xff0c;提高应用程序的性能和可靠性。 基本原理 cluste…
阅读更多...
文心智能体，零代码构建情感表达大师智能体

文心智能体，零代码构建情感表达大师智能体

前言 随着智能体技术的突飞猛进&#xff0c;各行各业正迎来前所未有的变革与机遇。智能体&#xff0c;作为人工智能领域的重要分支&#xff0c;以其自主性、智能性和适应性&#xff0c;正逐步渗透到我们生活的每一个角落&#xff0c;成为推动社会进步和科技发展的新动力。 为了…
阅读更多...
秒级达百万高并发框架Disruptor

秒级达百万高并发框架Disruptor

1、起源 Disruptor最初由lmax.com开发&#xff0c;2010年在Qcon公开发表&#xff0c;并于2011年开源&#xff0c;企业应用软件专家Martin Fowler专门撰写长文介绍&#xff0c;同年它还获得了Oracle官方的Duke大奖。其官网定义为&#xff1a;“High Performance Inter-Thread M…
阅读更多...
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十九）- JUC（5）

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

synchronized优化原理 轻量级锁 如果一个对象有多个线程访问&#xff0c;但多线程访问的时间是错开的&#xff08;没有竞争&#xff09;&#xff0c;可以用轻量级锁优化 Slf4j(topic "c.ExerciseTransfer")public class Test {​static final Object obj new Obj…
阅读更多...
利用天气API接口自己DIY一个预报小管家

利用天气API接口自己DIY一个预报小管家

天气预报查询API 是一种实用的日常工具&#xff0c;它通过编程方式为开发者提供实时的天气数据。开发者可以通过简单的代码调用&#xff0c;与天气预报服务提供商进行交互&#xff0c;获取特定地区的天气信息&#xff0c;如温度、湿度、风速、风向、降水量等&#xff0c;以及未…
阅读更多...
【智能优化算法】粒子群优化算法（PSO）【附python实现代码】

【智能优化算法】粒子群优化算法（PSO）【附python实现代码】

写在前面&#xff1a; 首先感谢兄弟们的订阅&#xff0c;让我有创作的动力&#xff0c;在创作过程我会尽最大能力&#xff0c;保证作品的质量&#xff0c;如果有问题&#xff0c;可以私信我&#xff0c;让我们携手共进&#xff0c;共创辉煌。 路虽远&#xff0c;行则将至&#…
阅读更多...
微信小程序上线必备：SSL证书申请以及安装

微信小程序上线必备：SSL证书申请以及安装

一、认识ssl证书 1、ssl证书是什么&#xff1f; SSL证书&#xff0c;全称Secure Socket Layer Certificate&#xff0c;是一种数字证书&#xff0c;它遵循SSL&#xff08;现在通常指TLS&#xff0c;Transport Layer Security&#xff09;协议标准&#xff0c;用于在客户端&…
阅读更多...
ElasticSearch - 删除已经设置的认证密码（7.x）

ElasticSearch - 删除已经设置的认证密码（7.x）

文章目录 Pre版本号 7.x操作步骤检查当前Elasticsearch安全配置停止Elasticsearch服务修改Elasticsearch配置文件删除密码重启Elasticsearch服务验证配置 小结 Pre Elasticsearch - Configuring security in Elasticsearch 开启用户名和密码访问 版本号 7.x ES7.x 操作步骤 …
阅读更多...
1小时从0开始搭建自己的直播平台(详细步骤)

1小时从0开始搭建自己的直播平台(详细步骤)

本文讲述了如何从0开始&#xff0c;利用腾讯云的平台&#xff0c;快速搭建一个直播平台的过程。 文章目录 效果图详细步骤准备工作第一步&#xff1a;添加域名并检验cname配置1.先填加一个推流域名2. 点击完下一步&#xff0c;得到一个cname地址3. 将cname地址&#xff0c;配置…
阅读更多...
A股重磅！史上最严减持新规，发布！

A股重磅！史上最严减持新规，发布！

此次减持新规被市场视为A股史上最严、最全面的规则&#xff0c;“花式”减持通道被全面“封堵”。 5月24日晚间&#xff0c;证监会正式发布《上市公司股东减持股份管理暂行办法》&#xff08;以下简称《减持管理办法》&#xff09;及相关配套规则。 据了解&#xff0c;《减持…
阅读更多...
开放式耳机哪个品牌音质好用又实惠耐用？五大公认卷王神器直入！

开放式耳机哪个品牌音质好用又实惠耐用？五大公认卷王神器直入！

​在现今耳机市场&#xff0c;开放式耳机凭借其舒适的佩戴体验和独特的不入耳设计&#xff0c;备受消费者追捧。它们不仅让你在享受音乐时&#xff0c;仍能察觉周围的声音&#xff0c;确保与人交流无障碍&#xff0c;而且有利于耳朵的卫生与健康。对于运动爱好者和耳机发烧友而…
阅读更多...
热题系列章节1

热题系列章节1

22. 括号生成 数字 n 代表生成括号的对数&#xff0c;请你设计一个函数&#xff0c;用于能够生成所有可能的并且 有效的 括号组合。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[“((()))”,“(()())”,“(())()”,“()(())”,“()()()”] 示例 2&#xff1a…
阅读更多...
Ubuntu（22.04）不能上网解决办法

Ubuntu（22.04）不能上网解决办法

想必大家可能在别的贴子看到用以下指令的方法&#xff0c;但是在22版本的ubuntu是行不通的&#xff0c;问题在于22版本中网络管理器的名字压根不是network-manager&#xff0c;而是 NetworkManager. sudo service network-manager stop sudo rm /var/lib/NetworkManager/Netw…
阅读更多...
力扣hot100学习记录(八)

力扣hot100学习记录(八)

206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 题意 给一个链表&#xff0c;将链表进行翻转 思路 用两个指针维护相邻两个点&#xff0c;每次把后面一个点指向前一个点&#xff0c;直到后一个点指向空&#xff0c;最后把…
阅读更多...
ESP32-C3模组上跑通OTA升级（8）

ESP32-C3模组上跑通OTA升级（8）

接前一篇文章&#xff1a;ESP32-C3模组上跑通OTA升级&#xff08;7&#xff09; 本文内容参考&#xff1a; 杂项系统 API - ESP32 - — ESP-IDF 编程指南 latest 文档 《ESP32-C3 物联网工程开发实战》 乐鑫科技 特此致谢&#xff01; 七、固件版本 将不同功能的固件标记为…
阅读更多...
阿里云Linux 3.2104 LTS 64位安装SVN服务器

阿里云Linux 3.2104 LTS 64位安装SVN服务器

直接按步骤 yum install subversion 写y就行 主要是看看安装了那些文件 rpm -ql subversion 主要是为了创建版本库而准备&#xff0c;这个能一遍创建就一遍创建&#xff0c;不行就逐个创建。能创就忽略下面两个mkdir步骤。 mkdir /home/svn/groupRepos 根据新建目录作为版本…
阅读更多...
嵌入式作业5

嵌入式作业5

在函数main.c中初始化三种颜色的灯&#xff1a; gpio_init(LIGHT_BLUE, GPIO_OUTPUT, LIGHT_OFF); //蓝灯 gpio_init(LIGHT_GREEN, GPIO_OUTPUT, LIGHT_OFF); //绿灯 gpio_init(LIGHT_RED, GPIO_OUTPUT, LIGHT_OFF); //红灯 同时为了响应以上修改&#xff0c;进入isr。c…
阅读更多...
1098: 堆的判断

1098: 堆的判断

解法&#xff1a; 堆是完全二叉树 用数组来存储 然后用定义判定 #include<iostream> #include<vector> using namespace std; int main() {int n;cin >> n;vector<int> vec(n);for (int i 0; i < n; i) cin >> vec[i];for (int i 0; i &…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023