Vue 基础语法

news2024/10/6 19:40:35

【1】模板语法

（1）差值表达式

  • {{}}是 Vue.js 中的文本插值表达式。

    • 它用于在模板中输出数据或表达式的值。当数据或表达式的值发生变化时，插值表达式会自动更新。

  • 补充：三目运算符

    • 它的基本语法是 Condition ? A : B，意思是当 Condition 为真时，执行 A，否则执行 B。

image-20240424185144908

<body>
<div id="app">
    <li>字符串：{{name}}</li>
    <li>数值：{{age}}</li>
    <li>数组：{{list1}}</li>
    <li>对象：{{obj1}}</li>
    <li>字符串：{{link1}}</li>
    <li>运算：{{1 + 2 +3 + 4}}</li>
    <li>三目运算符：{{1 > 2 ? 'Y' : 'N'}}</li>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: 'bruce',
            age: 18,
            list1: [1, 2, 3, 4],   // 数组
            obj1: {name: 'Darker', age: 19},
            link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>

【2】文本指令

（1）v-html和v-text

  • ​ v-html

    • v-html 指令用于更新元素的 innerHTML。

    • 这个指令可以输出真正的 HTML 内容，而不仅仅是纯文本。

      • 如果你尝试用双花括号 {{ }} 插入 HTML，它将被转义并显示为纯文本。
      • 但是使用 v-html 可以直接插入 HTML 内容。

    • 使用 v-html可能会带来 XSS 攻击的风险

  • v-text

    • v-text 指令用于更新元素的文本内容。
    • 它基本上与双花括号 {{ }} 的功能相同，但 v-text 不会在元素上创建额外的文本节点。
    • 如果元素已经包含文本内容，v-text 会替换这些文本内容。

image-20240424172743630

<body>
<div id="app">
    <div v-html="htmlContent"></div>
    <div>{{htmlContent}}</div>
    <hr>
    <div v-text="textContent"></div>
    <div>{{textContent}}</div>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            htmlContent: '<span style="color: red">标签：红色文字</span>',
            textContent: '纯文本内容'
        }
    })
</script>

（2）v-if和v-show

  • v-if
    • v-if 指令用于条件性地渲染一个元素。
    • 只有当其表达式的值为真值时，才会渲染元素及其内容。如果表达式的值为假值，则元素及其内容不会被渲染到 DOM 中。
    • 这意味着每次 v-if 的条件改变时，都会进行条件块的销毁或重建，这是一个“真正”的条件渲染。
  • v-show
    • v-show 指令与 v-if 类似，也是用于根据条件来显示或隐藏元素。但是，无论 v-show 的表达式值为真值还是假值，元素始终会被渲染到 DOM 中。
    • v-show 只是简单地通过切换元素的 CSS 属性 display 来控制其可见性。
image-20240424184439938 
<div id="app">
    <div v-if="true">v-if渲染</div>
    <div v-if="false">v-if不渲染</div>
    <hr>
    <div v-show="true">v-show渲染</div>
    <div v-show="false">v-show不渲染</div>
</div>

【3】事件指令

（1）v-on+click

  • Vue 提供了许多事件指令，用于处理 DOM 事件。这些指令以 v-on 或其简写 @ 开头，后面跟上要监听的事件名称。
  • 当在 Vue 组件的模板中使用这些指令时，它们可以绑定到组件的方法或表达式上，以便在特定事件发生时执行相应的操作。
<body>
<div id="app">
    <span v-text="info" v-on:click="handleClick" style="background-color: coral; font-size: 30px"></span><br>
    <img v-show="pTag" src="https://pic.netbian.com/uploads/allimg/240420/003439-1713544479de41.jpg" alt=""
         height="300px" width="500px">
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            pTag: true,
            info: "关闭图片",
        },
        methods: {
            handleClick: function () {
                this.pTag = !this.pTag
                console.log(this.pTag)
                if (this.pTag) {
                    this.info = '关闭图片'
                } else {
                    this.info = '显示图片'
                }
            },
        }
    })
</script>

image-20240425161000332

（2）参数问题

  • 示例：v-on:click或@click后面跟着自定义事件，正常传参正常执行，这里说一下不正常的情况
    • 函数有参,前端方法不传递，不加括号 ----> 函数将拿到当前操作事件
    • 函数有参,前端方法不传参数，加括号 ----> 函数将拿不到任何值
    • 函数有参,前端方法多传参数(‘1’, ‘2’) ----> 函数将拿到接收个数的参数
    • 函数有参,前端方法手动传递($event) ----> 函数将拿到当前操作事件

image-20240425162546478

<body>
<div id="app">
    <h2 v-text="info1" @click="handleClick">dada</h2>
    <h2 v-text="info2" @click="handleClick()">dada</h2>
    <h2 v-text="info3" @click="handleClick('1', '2')">dada</h2>
    <h2 v-text="info4" @click="handleClick($event)">dada</h2>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info1: "函数有参,前端方法不传递，不加括号",
            info2: "函数有参,前端方法不传参数，加括号",
            info3: "函数有参,前端方法多传参数('1', '2')",
            info4: "函数有参,前端方法手动传递($event)",
        },
        methods: {
            handleClick: function (e) {
                console.log(e)
            },
        }
    })
</script>

【4】属性指令v-bind

（1）基础属性src等

  • v-bind是 vue 中的一个核心指令，用于响应式地更新 HTML 属性。可以简写为:，简单来说就是将属性变为了变量。
  • 其基本功能是将表达式（通常是 JavaScript 表达式）的结果绑定到一个元素的属性上。这样，当 Vue 实例中的数据发生变化时，绑定的属性也会自动更新。

image-20240425163859157

<body>
<div id="app">
    <button v-text="info" @click="handleChange" style="font-size: 30px"></button>
    <img :src="imageList[index]" style="display: block; width: 500px; height: 300px;">
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info: "切换图片",
            index: 0,
            imageList: ["https://pic.netbian.com/uploads/allimg/240424/003411-1713890051411d.jpg", "https://pic.netbian.com/uploads/allimg/240424/001415-171388885570eb.jpg", "https://pic.netbian.com/uploads/allimg/240422/005357-17137184373f8b.jpg"]
        },
        methods: {
            handleChange: function () {
                this.index = (this.index + 1) % this.imageList.length
            },
        }
    })
</script>

（2）style和class属性

  • class属性语法：:class='字符串、js数组、js对象'
    • 字符串格式：需要手动拼接样式，不推荐
      • classStr: "div1"
      • this.classStr = this.classStr + ' div2'
    • js数组格式：需要对列表进行添加push操作和删除pop操作，推荐
      • classList: ["div1"]
      • this.classList.push("div2")
    • js对象格式：通过键值对修改样式，判断键对应值的Bool值，不推荐
      • classObj: {"div1": true, "div2": false}
      • this.classObj.div2 = true

image-20240425172737072

<style>
    .div1 {
        background-color: #44f1aa;
        height: 200px;
        width: 200px;
    }

    .div2 {
        border-radius: 50%;
    }
</style>

<body>
<div id="app">
    <button v-text="info" @click="handleChange"></button>
    <div :class="classObj"></div>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info: "样式切换",
            // 字符串形式
            classStr: "div1",
            // js数组形式
            classList: ["div1"],
            // js对象形式
            classObj: {"div1": true, "div2": false}

        },
        methods: {
            handleChange: function () {
                // 字符串形式操作
                // this.styleStr = this.styleStr + ' div2'
                // js数组形式操作
                // this.styleList.push("div2")
                // js对象形式操作
                this.classObj.div2 = true

            },
        }
    })
</script>

  • style属性语法：:style='字符串、js数组、js对象'

    • 字符串格式：需要手动拼接样式，不推荐

      • styleStr: "background-color: #44f1aa; height: 200px; width: 200px;"
      • this.styleStr = this.styleStr + ' border-radius: 50%;'

    • js数组格式：需要对列表进行添加push操作和删除pop操作，不推荐

      • styleList: [{backgroundColor: "#44f1aa"}, {height: "200px"}, {width: "200px"}]

      • this.styleList.push({borderRadius: "50%"})

    • js对象格式：通过键值对修改样式，判断键对应值的Bool值，推荐

      • styleObj: {backgroundColor: "#44f1aa", height: "200px", width: "200px"}
      • this.styleObj.borderRadius = "50%"

  • 但是有时候会出现这种情况：页面中的值修改成功了，但是样式却没有改变，这是因为ViewModel的并没有识别到属性的变化

image-20240426105852869

  • 这个时候需要使用Vue的语法set
    • Vue.set 的语法用于向响应式对象添加一个属性，并确保这个新属性也是响应式的。
    • Vue.set(target, propertyName/index, value)
      • target: 目标对象或数组。
      • propertyName/index: 要添加或修改的属性名（对于对象）或索引（对于数组）。
      • value: 要设置的新值。
<body>
<div id="app">
    <button v-text="info" @click="handleChange"></button>
    <div :style="styleObj"></div>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info: "样式切换",
            // 字符串形式
            styleStr: "background-color: #44f1aa; height: 200px; width: 200px;",
            // js数组形式
            styleList: [{backgroundColor: "#44f1aa"}, {height: "200px"}, {width: "200px"}],
            // js对象形式
            styleObj: {backgroundColor: "#44f1aa", height: "200px", width: "200px"}
        },
        methods: {
            handleChange: function () {
                // 字符串形式操作
                this.styleStr = this.styleStr + ' border-radius: 50%;'
                // js数组形式操作
                this.styleList.push({borderRadius: "50%"})
                // js对象形式操作

                // this.styleObj.borderRadius = "50%"
                Vue.set(this.styleObj, "borderRadius", "50%")
            },
        }
    })
</script>

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

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

相关文章

python绘图（pandas）

python绘图（pandas）

matplotlib绘图 import pandas as pd abs_path rF:\Python\learn\python附件\pythonCsv\data.csv df pd.read_csv(abs_path, encodinggbk) # apply根据多列生成新的一个列的操作&#xff0c;用apply df[new_score] df.apply(lambda x : x.数学 x.语文, axis1)# 最后几行 …
阅读更多...
3W 3KVDC 隔离单输出 DC/DC 电源模块——TPG-3W 系列

3W 3KVDC 隔离单输出 DC/DC 电源模块——TPG-3W 系列

TPG-3W系列是一款额定功率为3W的隔离产品&#xff0c;国际标准引脚&#xff0c;宽范围工作、温度–40℃ 到 105℃&#xff0c;在此温度范围内都可以稳定输出3W&#xff0c;并且效率非常高&#xff0c;高达88%&#xff0c;同时负载调整率非常低&#xff0c;对于有输出电压精度有…
阅读更多...
61-ARM与FPGA间SPI通信电路设计

61-ARM与FPGA间SPI通信电路设计

视频链接 ARM与FPGA间SPI通信电路设计01_哔哩哔哩_bilibili ARM与FPGA间SPI通信电路设计 第22课&#xff1a;SPI Flash 电路设计 第65课&#xff1a;实战S1-FPGA板级实战导学 1、SPI简介 1.1、SPI概述 SPI是(Serial Peripheral Interface) 串行外设接口&#xff0c;由Mot…
阅读更多...
产业空间集聚DO指数计算

产业空间集聚DO指数计算

1.前言 创始人 :Duranton and Overman&#xff08;2005&#xff09; 目前应用较多的产业集聚度量指数主要基于两类&#xff0c;一是根据不同空间地理单元中产业经济规模的均衡性进行构造&#xff0c;如空间基尼系数与EG指数&#xff1b;二是基于微观企业地理位置信息形成的产业…
阅读更多...
求解亲和数

求解亲和数

【问题描述】 古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220的所有真约数&#xff08;即不是自身 的约数&#xff09;之和为&#xff1a; 1245101120224455110284。而284的所有真约数为1、2、4、71、142&#xff0c;加起来恰好为220。人 们对这样的数感到很惊奇&am…
阅读更多...
H3C ripng实验（ipv6）

H3C ripng实验（ipv6）

H3C ripng实验&#xff08;ipv6&#xff09; 实验需求 按照图示为路由器配置IPv6地址 所有路由器运行ripng&#xff0c;进行ipv6网段的互通 查询路由表后&#xff0c;​进行全网段的ping测试&#xff0c;实验目的RTD可以ping通RTA 实验解法 按照图示为路由器配置IPv6地址 …
阅读更多...
力扣295. 数据流的中位数

力扣295. 数据流的中位数

Problem: 295. 数据流的中位数 文章目录 题目描述思路复杂度Code 题目描述 思路 1.定义一个大顶堆和小顶堆&#xff1b; 2.当添加的数据小于大顶堆的堆顶元素或者大顶堆为空时&#xff0c;将元素添加到大顶堆&#xff1b;当元素大于大顶堆堆顶元素时添加到小顶堆&#xff1b;同…
阅读更多...
easy_signin_ctfshow_2023愚人杯

easy_signin_ctfshow_2023愚人杯

https://ctf.show/challenges#easy_signin-3967 2023愚人杯信息检索&#xff0c;在请求荷载中发现一个base64 face.pngencode ZmFjZS5wbmc解密结果 flag.pngencode ZmxhZy5wbmc尝试一下 返回内容 Warning: file_get_contents(flag.png): failed to open stream: No such file…
阅读更多...
T0策略是什么？有哪些优点和缺点，如何操作T0策略？

T0策略是什么？有哪些优点和缺点，如何操作T0策略？

T0策略又称日内交易策略&#xff0c;它的持仓时间较短&#xff0c;基于对未来短期股价走势的判断&#xff0c;通过低位买入、高位卖出的方式来获得价差收益&#xff0c;并且买入卖出交易在日内完成。 T0策略分类 按照策略逻辑分类&#xff0c;T0策略可分为融券T0和底仓T0。融…
阅读更多...
Android11 InputManagerService启动流程分析

Android11 InputManagerService启动流程分析

InputManagerService在systemserver进程中被启动 //frameworks\base\services\java\com\android\server\SystemServer.java t.traceBegin("StartInputManagerService"); inputManager new InputManagerService(context);//1 t.traceEnd(); //省略 //注册服务 Servi…
阅读更多...
我独自升级崛起在哪下载 我独自升级电脑PC端下载教程分享

我独自升级崛起在哪下载 我独自升级电脑PC端下载教程分享

将于5月8日在全球舞台闪亮登场的动作角色扮演游戏《我独自升级崛起》&#xff0c;灵感源自同名热门动画与网络漫画&#xff0c;承诺为充满激情的游戏玩家群体带来一场集深度探索与广阔体验于一身的奇幻旅程。该游戏以独特的网络武侠世界观为基底&#xff0c;展现了一位普通人踏…
阅读更多...
React + 项目(从基础到实战) -- 第11期

React + 项目(从基础到实战) -- 第11期

目标 问卷编辑器的开发 设计UI - 拆分布局 水平垂直居中 画布 y方向滚动 自定义问卷组件 后端 返回组件数据 //获取单个问卷信息{url: /api/question/:id,method: get,response: () > {return {errno: 0,data: {id: Random.id(),title: Random.ctitle(),componentList:[//…
阅读更多...
纯血鸿蒙APP实战开发——页面间共享组件实例的案例

纯血鸿蒙APP实战开发——页面间共享组件实例的案例

介绍 本示例提供组件实例在页面间共享的解决方案&#xff1a;通过Stack容器&#xff0c;下层放地图组件&#xff0c;上层放Navigation组件来管理页面&#xff0c;页面可以共享下层的地图组件&#xff0c;页面中需要显示地图的区域设置为透明&#xff0c;并参考触摸交互控制&am…
阅读更多...
Linux网络-部署YUM仓库及NFS共享服务

Linux网络-部署YUM仓库及NFS共享服务

目录 一.YUM仓库服务 1.YUM概述 1.1.YUM&#xff08;Yellow dog Updater Modified&#xff09; 2.准备安装源 2.1.软件仓库的提供方式 2.2.RPM软件包的来源 2.3.构建CentOS 7 软件仓库 2.4.在软件仓库中加入非官方RPM包组 3.一键安装软件包的工具&#xff1a; 好处&a…
阅读更多...
ubuntu中的docker记录（3）——如何安装nvidia-docker以更好地支持GPU加速计算应用程序的运行

ubuntu中的docker记录（3）——如何安装nvidia-docker以更好地支持GPU加速计算应用程序的运行

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、nvidia-docker2的安装1. 安装docker2. 安装nvidia-docker2(1) 添加密钥(2) 更新软件列表(3) 安装nvidia-docker2(4) 测试nvidia-docker2 二、可能的报错及解…
阅读更多...
大模型争霸的下一站：不仅是超越GPT-4，更是寻求模型之间的平衡应用

大模型争霸的下一站：不仅是超越GPT-4，更是寻求模型之间的平衡应用

文 | 智能相对论 作者 | 沈浪 知名科学杂志《Nature》发表了一篇关于大模型规模参数大小争议的文章《In Al, is bigger always better?》——AI大模型&#xff0c;越大越好吗&#xff1f;随着大模型应用走向实践&#xff0c;这一问题不可避免地成为了当前AI行业发展的焦点与…
阅读更多...
【网络原理】IP协议详解

【网络原理】IP协议详解

一.与IP协议相关的基本概念 IP协议&#xff0c;即网际互连协议&#xff08;Internet Protocol&#xff09;&#xff0c;是TCP/IP体系中的核心网络层协议。 网络层IP协议解决的问题 数据传输的过程中,不是直接进行的传输,而是经过层层的封装和分用的过程才能到达对端. IP协议主…
阅读更多...
怎么通过网页查看iPhone手机的备忘录内容？

怎么通过网页查看iPhone手机的备忘录内容？

在这个数字化的时代&#xff0c;iPhone已成为我们日常生活中不可或缺的一部分。我特别喜欢用iPhone的备忘录功能&#xff0c;随时随地记录生活的点点滴滴&#xff0c;工作中的待办事项。然而&#xff0c;有时候&#xff0c;当我需要在电脑上查看或编辑这些备忘录时&#xff0c;…
阅读更多...
最原理的一集——Mathtype公式编号设置（Mathtype7.8+Word）

最原理的一集——Mathtype公式编号设置（Mathtype7.8+Word）

版本 Mathtype7.8Office2019 Word 读完本文你将会 随心所欲&#xff0c;想怎么给公式编号就怎么给公式编号&#xff0c;想从(X.1)开始&#xff0c;就从(X.1)开始大概了解Mathtype公式设置原理给作者点赞 如果你想自己跟着文章做的话 请不要在自己的论文里边直接操作&#…
阅读更多...
超详细——集成学习——Adaboost——笔记

超详细——集成学习——Adaboost——笔记

资料参考 1.【集成学习】boosting与bagging_哔哩哔哩_bilibili 集成学习——boosting与bagging 强学习器&#xff1a;效果好&#xff0c;模型复杂 弱学习器&#xff1a;效果不是很好&#xff0c;模型简单 优点 集成学习通过将多个学习器进行结合&#xff0c;常可获得比单一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023