Vue：基本命令的使用（代码 + 效果）

文章目录

  • Hello Vue!
    • el: 挂载点
    • data
    • methods
  • vue命令
    • v-text
    • v-html
    • v-on @
    • v-show
    • v-if
    • v-bind
    • v-for
    • v-model

Hello Vue!

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!"
            }
        })
    </script>
  </body>
</html>

在这里插入图片描述

el: 挂载点

实例范围：el命中元素及其内部的后代元素
可以使用其他选择器，但是建议使用id选择器
只能支持双标签，不能使用html 和 body

data

Vue中用到的数据，定义在data中。
data中可以写复制数据类型，遵循js语法即可。

methods

放方法。

vue命令

v-text

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Vue!</title>
  </head>
  <body>
    <div id="app">
        <h2 v-text="message + '123'"></h2>
        <h3 v-text="info+'!'"></h3>
        <h4>
            {{ message + '!'}}
        </h4>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!",
                info:"这是一个vue"
            }
        })
    </script>
  </body>
</html>

在这里插入图片描述

v-html

放html文本而已。
和js一样。

v-on @

v-on可以用@代替
主要学习与jquery不同的，不是用dom操作来改变，而是直接操纵数据。
数据改变，页面同步跟着改变。

<!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="button"  value="点击" @click="alert">
        <input type="button" value="双击" @dblclick="alert">
        <input type="button" value="移入" @mouseenter="alert">
        <input type="button" value="点击添加" @click="addone">
        <h3>
            {{ num }}
        </h3>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            num:"+1"
        },
        methods: {
            alert:function(){
                alert("你好")
            },
            addone:function(){
                this.num+="+1"
            }
        }
        
    })
</script>
</html>

在这里插入图片描述

监听回车:

<!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" @keyup.enter="alt">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            alt:function(){
                alert("释放按下触发的弹出")
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-show

是否显示。
true,false两个值，一般用变量来写，方便我们控制。
也可以用表达式><=等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态"  @click="change">
        <img src="../2023.12.15/6D5ED8A27DD04CD72FAC750E2295B6B1.jpg" alt="" v-show="flag">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change:function(){
                this.flag ^= true;
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-if

与v-show相似，但是v-show是改变的样式，而v-if是直接从dom中删除和添加。
切换频繁的用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>
    <style>
        img {
            width:100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态"  @click="change">
        <img src="../2023.12.15/6D5ED8A27DD04CD72FAC750E2295B6B1.jpg" alt="" v-if="flag">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change:function(){
                this.flag ^= true;
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-bind

v-bind:设置元素的属性。
可简写成:直接。
可用三元表达式，不过推荐用对象的写法。
例子：
切换img的类名，使其加上边框，和取消边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width:100px;
            height: 120px;
        }
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="点击切换class" @click="change">
        <img :src="imgSrc" alt="" v-bind:class="isActive?'active':''">
        <img :src="imgSrc" alt="" :class="{active:isActive}">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isActive:false,
            imgSrc:"OIP-C.jpg"
        },
        methods:{
            change:function(){
                this.isActive ^= true
            }
        }
    })
</script>
</html>

在这里插入图片描述

v-for

遍历数组，循环填充。
(item, idx) in arr
也可以只写item

<!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">
        <ul>
            <li v-for="(item, idx) in arr">
                {{ idx }}样例{{ item }}
            </li>
            <li v-for="item in arr2">
                {{ item.name }}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","河北", "天津"],
            arr2:[
                {"name": "小红"},
                {"name": "小明"}
            ]
        }
    })
</script>
</html>

在这里插入图片描述

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="msg" @keyup.enter="alt">
        <h3>{{ msg }}</h3>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            "msg":"默认值"
        },
        methods:{
            alt:function() {
                alert(this.msg);
            }
        }
    })
</script>
</html>

在这里插入图片描述

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

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

相关文章

RabbitMq：RabbitMq消息中的相关处理 ③

RabbitMq：RabbitMq消息中的相关处理 ③

一、解耦思想 在 RabbitMQ 在设计的时候&#xff0c;特意让生产者和消费者分离&#xff0c;也就是消息的发布和消息的消费之间是解耦的。 生产者与消费者之间的直连&#xff0c;少了很多的灵活性和策略的制定。还有一种解耦的思想存在。 二、消息的可靠性保证与性能关系 消息的…
阅读更多...
Nacos简易示例

Nacos简易示例

目录 步骤&#xff1a; 1. 下载并启动 Nacos Server 2. 创建用户订单微服务 2.1 创建 Spring Boot 项目 2.2 添加依赖 2.3 配置 Nacos 2.4 编写业务逻辑 3. 注册服务到 Nacos 4. 测试服务 Nacos 是一个开源的服务发现和配置管理系统&#xff0c;可以用于微服务架构中的…
阅读更多...
QT数据库

QT数据库

八、数据库 准备工作 Qt本身并没有数据库功能&#xff0c;但是Qt支持调用其他主流的数据库产品。并且这些数据库产品指定了统一的Qt接口&#xff0c;实际上是一种数据库的中间件。 Qt支持以下数据库类型&#xff1a; 嵌入式常用的数据库式SQLite3&#xff0c;本体只有几兆大小&…
阅读更多...
Linux进程 ----- 信号处理

Linux进程 ----- 信号处理

前言 从信号产生到信号保存&#xff0c;中间经历了很多&#xff0c;当操作系统准备对信号进行处理时&#xff0c;还需要判断时机是否 “合适”&#xff0c;在绝大多数情况下&#xff0c;只有在 “合适” 的时机才能处理信号&#xff0c;即调用信号的执行动作。 一、信号的处理…
阅读更多...
什么是代码签名证书中的“硬证书”？

什么是代码签名证书中的“硬证书”？

代码签名证书是用于验证和签名软件程序的一种数字证书。使用代码签名证书&#xff0c;可以保护代码完整性、防止非法篡改&#xff0c;标识软件发行商的身份并确保软件来源可信。按不同验证级别&#xff0c;代码签名证书分为扩展验证型EV代码签名证书、企业验证型OV代码签名证书…
阅读更多...
babylonjs入门模

babylonjs入门模

基于babylonjs封装的一些功能和插件 &#xff0c;希望有更多的小伙伴一起玩babylonjs&#xff1b; 欢迎加群&#xff1a;464146715 官方文档 中文文档 最小模版 ​ 代码如下&#xff1a; 在react中使用 import React, { FC, useCallback, useEffect, useRef, useState } f…
阅读更多...
LINE封号全面解析：原因、判断方法与申诉渠道

LINE封号全面解析：原因、判断方法与申诉渠道

在LINE中被封锁有两个方面&#xff1a;一是你被好友屏蔽&#xff0c;另一是遭到平台官方的封锁。通常用户会用“停权”来代表LINE的官方封锁&#xff0c;在实际操作上&#xff0c;所谓的停权并不意味着你的账户完全无法使用&#xff0c;只是没办法与好友发送消息&#xff0c;更…
阅读更多...
聊一聊EGO-Planner膨胀系数的大小对无人机避障飞行的影响

聊一聊EGO-Planner膨胀系数的大小对无人机避障飞行的影响

EGO-Planner简介 EGO-Planner作为业界知名的无人机轨迹规划算法&#xff0c;其优势在于能够在复杂环境中快速规划出安全、平滑且动态可行的飞行轨迹。在这个算法中&#xff0c;膨胀系数发挥着关键作用。它通过扩大障碍物的感知范围&#xff0c;提供额外的安全边距&#xff0c;…
阅读更多...
如何使用Lychee+cpolar搭建本地私人图床并实现远程访问存储图片

如何使用Lychee+cpolar搭建本地私人图床并实现远程访问存储图片

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站&#xff0c;可以看做是云存储的一部分&#xff0c;既可…
阅读更多...
c++ Qt 网络连接

c++ Qt 网络连接

1、基础概念 1.1 TCP/UDP TCP 是一种面向连接的传输层协议&#xff0c;它能提供高可靠性通信(即数据无误、数据无丢失、 数据无失序、数据无重复到达的通信) 适用情况&#xff1a; 1.SN/QQ等即时通讯软件的用户登录账户管理相关的功能通常采用TCP协议 2、适合于对传输质量要求较…
阅读更多...
网站开发--详解Servlet

网站开发--详解Servlet

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;网站开发–详解Servlet 一.基本介绍 tomcat是Java中开发服务器的重要的一个工具,任何开发的服务器都要部署在tomcat之上,可以说tomcat是所有服务器的底座,为了更好的操作http,to…
阅读更多...
python 进程笔记一 （概念+示例代码）

python 进程笔记一 （概念+示例代码）

1. 进程的概念 进程是资源分配的最小单位&#xff0c;也是线程的容器&#xff0c;线程&#xff08;python 线程 &#xff08;概念示例代码&#xff09;&#xff09;是CPU调度的基本单位&#xff0c;一个进程包括多个线程。 程序&#xff1a;例如xxx.py是一个程序 进程&#xf…
阅读更多...
C++初阶 | [八] (下) vector 模拟实现

C++初阶 | [八] (下) vector 模拟实现

摘要&#xff1a;vector 模拟实现讲解&#xff08;附代码示例&#xff09;&#xff0c;隐藏的浅拷贝&#xff0c;迭代器失效 在进行 vector 的模拟实现之前&#xff0c;我们先粗略浏览一下 stl_vector.h 文件中的源码来确定模拟实现的大体框架。 这里提供一些粗略浏览源码的技巧…
阅读更多...
如何使用GAP-Burp-Extension扫描潜在的参数和节点

如何使用GAP-Burp-Extension扫描潜在的参数和节点

关于GAP-Burp-Extension GAP-Burp-Extension是一款功能强大的Burp扩展&#xff0c;该工具在getAllParams扩展的基础上进行了升级&#xff0c;该工具不仅可以帮助广大研究人员在安全审计过程中扫描潜在的参数&#xff0c;而且还可以搜索潜在的链接并使用这些参数进行测试&#…
阅读更多...
HarmonyOS—代码Code Linter检查

HarmonyOS—代码Code Linter检查

Code Linter代码检查 Code-Linter针对ArkTS/TS代码进行最佳实践、编程规范方面的检查&#xff0c;目前还会检查ArkTS语法规则。开发者可根据扫描结果中告警提示手工修复代码缺陷&#xff0c;或者执行一键式自动修复&#xff0c;在代码开发阶段&#xff0c;确保代码质量。 检查…
阅读更多...
Linux之项目部署与发布

Linux之项目部署与发布

目录 一、Nginx配置安装&#xff08;自启动&#xff09; 1.一键安装4个依赖 2. 下载并解压安装包 3. 安装Nginx 4. 启动 nginx 服务 5. 对外开放端口 6. 配置开机自启动 7.修改/etc/rc.d/rc.local的权限 二、后端部署tomcat负载均衡 1. 准备2个tomcat 2. 修改端口 3…
阅读更多...
【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

【Vue3】学习watch监视：深入了解Vue3响应式系统的核心功能（上）

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
基于Java的艺培管理解决方案

基于Java的艺培管理解决方案

✍✍计算机毕业编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java、…
阅读更多...
抖音小程序获取手机号

抖音小程序获取手机号

1、* 手机号获取和登录需要分开 &#xff08;规定&#xff09; 2、 抖音小程序首先得先通过试运营 没有通过试运营的 会提示没有权限 getPhoneNumber:fail auth deny 3、上代码 <button class"phone toutiaoSq" v-if"!userInfo.phone && isLogin&…
阅读更多...
[AutoSar]BSW_Com03 DBC详解 （一）

[AutoSar]BSW_Com03 DBC详解 （一）

目录 关键词平台说明一、DBC 定义1.1 相关工具 二、主要组成部分介绍2.1 Networks2.2 ECUs2.3 Network nodes2.4 messages2.5 signal2.6 Value Tables 三、主要组成部分关系图 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &am…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站