Vue中常用指令

Vue中的常用指令

  • Vue中的常用指令
  • 内容渲染指令
  • 条件渲染指令
  • 事件绑定指令
    • 内联语句
    • 事件处理函数
    • 给事件处理函数传参
  • 属性绑定指令
  • 列表渲染指令
    • v-for中的key
  • 双向绑定指令

Vue中的常用指令

概念：指令 是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。Vue 会根据不同的【指令】，针对标签实现不同的【功能】
为啥要学：提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 列表渲染指令（v-for）
  • 双向绑定指令（v-model）

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

  • v-text（类似innerText）

    • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
    • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

  • v-html（类似 innerHTML）

    • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
    • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
    • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

代码演示：

    <div class="app">
        <p v-text="uname">姓名：</p> 
        <p v-html="intro">简介：</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                // v-html自动解析标签，{{ }}不解析标签
                uname:'李四',
                intro:`<h1>自动解析标签</h1>`
            }
        })
    </script>

在这里插入图片描述

条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

  • v-show
    • 作用： 控制元素显示隐藏
    • 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
    • 原理： 切换 display:none 控制显示隐藏
    • 场景：频繁切换显示隐藏的场景
  • v-if
    • 作用： 控制元素显示隐藏（条件渲染）
    • 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
    • 原理： 基于条件判断，是否创建 或 移除元素节点
    • 场景： 要么显示，要么隐藏，不频繁切换的场景
  <!-- 
    v-show底层原理：切换 css 的 display: none 来控制显示隐藏
    v-if  底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）
  -->
  <div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是v-if控制的盒子</div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: false
      }
    })

浏览器检查中，v-show的元素节点存在，v-if的元素节点不存在
在这里插入图片描述

  • v-else 和 v-else-if

    • 作用：辅助v-if进行判断渲染
    • 语法：v-else v-else-if=“表达式”
    • 需要紧接着v-if使用
    <div class="app">
        <p v-if="sc > 90">A</p>
        <p v-else-if="sc > 70">B</p>
        <p v-else-if="sc > 60">C</p>
        <p v-else>D</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
        data:{
            sc:90
        }
      })
    </script>

在这里插入图片描述

事件绑定指令

使用Vue时，如需为DOM注册事件，及其的简单，语法如下：

  • <button v-on:事件名=“内联语句”>按钮
  • <button v-on:事件名=“处理函数”>按钮
  • <button v-on:事件名=“处理函数(实参)”>按钮
  • v-on: 简写为 @

内联语句

    <div class="app">
        <button @click="count--"> - </button>
        <h3>{{ count }}</h3>
        <button @click="count++"> + </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                count: 100
            }
        })
    </script>

在这里插入图片描述

事件处理函数

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中
  • methods中的函数内部的this都指向Vue实例
    <div class="app">
        <button @click="fn">切换显示隐藏</button>
        <h2 v-show="isShow">{{ count }}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                isShow: true,
                count:'你好 Vue'
            },
            methods:{
                fn(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

请添加图片描述

给事件处理函数传参

  • 如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

  • 如果传递了参数，则实参 $event 表示事件对象，固定用法。

    <div class="app">
        <h3>{{ title }}</h3>
        <button @click="buy(3)">{{ goods1 }}</button>
        <button @click="buy(5)">{{ goods2}}</button>
        <p>余额{{ money}} 元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                title:'售货机',
                goods1:'可乐 3元',
                goods2:'面包 5元',
                money:'100'
            },
            methods:{
                buy(money){
                    this.money = this.money - money
                }
            }
        })
    </script>

在这里插入图片描述

属性绑定指令

作用：动态设置html的标签属性 比如：src、url、title
语法：v-bind:属性名=“表达式”
v-bind:可以简写成 => :

    <div class="app">
        <img :src="imgUrl" 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-01.png'
            }
        })
    </script>

在这里插入图片描述

列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项
  • index 是每一项的索引，不需要可以省略
  • arr 是被遍历的数组
    <div class="app">
        <ul>
            <li v-for="(item,index) in booksList" :key="item.id">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                booksList:[
                { id: 1, name: '《红楼梦》', author: '曹雪芹' },
                { id: 2, name: '《西游记》', author: '吴承恩' },
                { id: 3, name: '《水浒传》', author: '施耐庵' },
                { id: 4, name: '《三国演义》', author: '罗贯中' }
                ]
            },
            methods:{
                del(id){
                    console.log(id)
                    this.booksList = this.booksList.filter(item => item.id !== id)
                }
            }
        })
    </script>

在这里插入图片描述

v-for中的key

语法： :key=“唯一值”
作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key：Vue 的默认行为

注意：

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

双向绑定指令

所谓双向绑定就是：

  1. 数据改变后，呈现的页面结果会更新
  2. 页面结果更新后，数据也会随之而变

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
语法：v-model=“变量”

    <div class="app">
        账户：<input type="text" v-model="username">
        <br>
        密码：<input type="password" v-model="password">
        <br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'.app',
            data:{
                username:'',
                password:''
            },
            methods:{
                login(){
                    console.log('账户：' , this.username , ', 密码：' , this.password);
                },
                reset(){
                    this.username = '';
                    this.password = '';
                }
            }
        })
    </script>

在这里插入图片描述

<div id="app">
    <h3>学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input v-model="gender" type="radio" name="gender" value="1">男
      <input v-model="gender" type="radio" name="gender" value="2">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>

在这里插入图片描述

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

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

相关文章

机器人开发项目实现过程

机器人开发项目实现过程

比赛项目实现过程 第一步&#xff1a;设置远程桌面连接 登录机器人系统&#xff0c;设置网络&#xff0c;参考远程桌面连接20230525.mp4 外接显示器、鼠标和键盘 登录系统 账户&#xff1a;robuster 密码&#xff1a;123456 建议&#xff0c;手机开热点&#xff0c;机器人…
阅读更多...
C++ 派生类的引入与特性

C++ 派生类的引入与特性

一 继承与派生 从上面的例子可以看出&#xff1a; 继承&#xff1a;一旦指定了某种事物父代的本质特征&#xff0c;那么它的子代将会自动具有哪些性质。这就是一种朴素的可重用的概念。 派生&#xff1a;而且子代可以拥有父代没有的特性&#xff0c;这是可扩充的概念。 1 C 的…
阅读更多...
游戏找不到emp.dll怎么恢复，简单介绍5种有效的恢复方法

游戏找不到emp.dll怎么恢复，简单介绍5种有效的恢复方法

当你在启动游戏时遇到提示“找不到emp.dll”时&#xff0c;可能会感到有些手足无措。不要担心&#xff0c;这个问题其实相当常见&#xff0c;解决起来也并不复杂。emp.dll是一个与游戏运行环境密切相关的动态链接库文件&#xff0c;它的缺失可能会导致游戏无法正常启动。小编将…
阅读更多...
【数据结构】详解队列

【数据结构】详解队列

现在我们来掌握一下队列&#xff01;如果有对往期知识有不足地方&#xff0c;可翻阅之前文章哦&#xff01; 个人主页&#xff1a;小八哥向前冲~-CSDN博客 所属专栏&#xff1a;数据结构【c语言版】_小八哥向前冲~的博客-CSDN博客 栈和队列的实现其实都是对你顺序表和链表的检验…
阅读更多...
Docker运行出现iptables: No chain/target/match by that name报错如何解决？

Docker运行出现iptables: No chain/target/match by that name报错如何解决？

在尝试重启 Docker 容器时遇到的错误信息表明有关 iptables 的配置出了问题。这通常是因为 Docker 需要配置网络&#xff0c;而 iptables 规则没有正确设置或被意外删除。具体到你的错误信息中&#xff0c;报错 iptables: No chain/target/match by that name 表示 Docker 尝试…
阅读更多...
【ARM Cortex-M 系列 2.2 -- Cortex-M7 单步调试原理及实现详细介绍】

【ARM Cortex-M 系列 2.2 -- Cortex-M7 单步调试原理及实现详细介绍】

请阅读【嵌入式开发学习必备专栏】 文章目录 单步调试概述单步执行原理Debug stepping control using the DHCSR 紧接上篇文章 【ARM Cortex-M 系列 2.1 – Cortex-M7 Debug system registers】 单步调试概述 在ARMv7-M架构中&#xff0c;通过使用单步调试&#xff08;Haltin…
阅读更多...
【工具推荐】好用的电脑文件检索工具 everything

【工具推荐】好用的电脑文件检索工具 everything

之前每次想要检索一些电脑中的文件&#xff0c;软件什么之类的 只能在“我的电脑”里面&#xff0c;搜索 我去&#xff0c;真的是巨慢无比~&#xff0c;搜好了有些时候又忘记了&#xff0c;然后就得重新搜 直到我发现了…… Everything 他的名字起的确实好&#xff0c;想找…
阅读更多...
Selenium + Pytest自动化测试框架实战（下）

Selenium + Pytest自动化测试框架实战（下）

前言 本文接上篇文章哟。 一、简单学习元素定位 在日常的工作中&#xff0c;我见过很多在浏览器中直接在浏览器中右键Copy Xpath复制元素的同学。这样获得的元素表达式放在 webdriver 中去运行往往是不够稳定的&#xff0c;像前端的一些微小改动&#xff0c;都会引起元素无法…
阅读更多...
JVM的垃圾回收算法有哪些？从可达性分析算法开始，深入解读三大核心垃圾回收算法

JVM的垃圾回收算法有哪些？从可达性分析算法开始，深入解读三大核心垃圾回收算法

导航&#xff1a; 【Java笔记踩坑汇总】Java基础JavaWebSSMSpringBootSpringCloud瑞吉外卖/黑马旅游/谷粒商城/学成在线设计模式面试题汇总性能调优/架构设计源码-CSDN博客 目录 一、概念准备 1.1 GC Roots 1.2 可达性分析算法 1.3 非可达对象被回收过程中的两次标记 1.4…
阅读更多...
单页源码加密屋zip文件加密API源码

单页源码加密屋zip文件加密API源码

简介&#xff1a; 单页源码加密屋zip文件加密API源码 api源码里面的参数已改好&#xff0c;往服务器或主机一丢就行&#xff0c;出现不能加密了就是加密次数达到上限了&#xff0c;告诉我在到后台修改加密次数 点击下载
阅读更多...
基于SpringBoot + Vue的学生宿舍课管理系统设计与实现+毕业论文（15000字）+开题报告

基于SpringBoot + Vue的学生宿舍课管理系统设计与实现+毕业论文（15000字）+开题报告

系统介绍 本系统包含管理员、宿管员、学生三个角色。 管理员&#xff1a;管理宿管员、管理学生、修改密码、维护个人信息。 宿管员&#xff1a;管理公寓资产、管理缴费信息、管理公共场所清理信息、管理日常事务信息、审核学生床位安排信息。 学生&#xff1a;查看公共场所清理…
阅读更多...
初识C语言——第十九天

初识C语言——第十九天

for循环 1.简单概述 2.执行流程 3.建议事项&#xff1a;
阅读更多...
docker 安装 Redis (附图文教程)

docker 安装 Redis (附图文教程)

首先确保已安装docker 安装docker 拉取 redis 镜像 搜索镜像 docker search redis使用最多人使用的 拉取镜像 没有指定版本默认最新版本 docker pull redis查看镜像 docker images启动容器 创建挂载目录 mkdir -p /home/local/redis/conf /home/local/redis/data创建…
阅读更多...
【vue2项目经验总结：部署到服务器之后出现所有数据渲染失败的问题】

【vue2项目经验总结：部署到服务器之后出现所有数据渲染失败的问题】

原因是因为在没部署到服务器之前前端为了解决跨域问题使用了代理&#xff0c;但是在项目部署到服务器之后&#xff0c;前端通常不再需要使用代理&#xff0c;因为代理的作用是在开发过程中帮助前端应用程序与后端服务进行通信&#xff0c;解决跨域访问等问题。在开发阶段&#…
阅读更多...
分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测

分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测

分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测 目录 分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现DBO-CNN-SVM蜣螂算法…
阅读更多...
大厂Java面试题：MyBatis中是如何实现动态SQL的？有哪些动态SQL元素（标签）？描述下动态SQL的实现原理。

大厂Java面试题：MyBatis中是如何实现动态SQL的？有哪些动态SQL元素（标签）？描述下动态SQL的实现原理。

大家好&#xff0c;我是王有志。 今天给大家带来的是一道来自京东的 MyBatis 面试题&#xff1a;MyBatis 中是如何实现动态 SQL 的&#xff1f;有哪些动态 SQL 元素&#xff08;标签&#xff09;&#xff1f;描述下动态 SQL 的实现原理。 MyBatis 中提供了 7 个动态 SQL 语句…
阅读更多...
国际护士节庆祝活动向媒体投稿有方法很轻松

国际护士节庆祝活动向媒体投稿有方法很轻松

作为一名医院职工,我肩负着医院对外信息宣传的重任。在国际护士节这个特殊的日子里,我们医院举办了一系列庆祝活动,以表彰护士们的辛勤付出和无私奉献。然而,在将这些活动信息投稿至媒体的过程中,我最初却遭遇了诸多挑战。 起初,我采用传统的邮箱投稿方式,将精心撰写的稿件发送…
阅读更多...
基于51单片机的电子门铃设计( proteus仿真+程序+设计报告+原理图+讲解视频）

基于51单片机的电子门铃设计( proteus仿真+程序+设计报告+原理图+讲解视频）

基于51单片机电子门铃设计( proteus仿真程序设计报告原理图讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0091 1. 主要功能&#xff1a; 基于51单片机的智能门铃设计 1、系统采用…
阅读更多...
共赴科技盛会“2024南京智博会”11月在南京国际博览中心召开

共赴科技盛会“2024南京智博会”11月在南京国际博览中心召开

2024年&#xff0c;南京这座历史悠久的文化名城迎来了一场科技与智慧交织的盛会——南京智博会|南京国际智慧城市、物联网、大数据。本次博览会以智慧城市、人工智能、消费电子、物联网、大数据为主题&#xff0c;汇聚了全球各地的智能科技精英&#xff0c;共同探讨智慧城市建设…
阅读更多...
设计模式Java实现-迭代器模式

设计模式Java实现-迭代器模式

✨这里是第七人格的博客✨小七&#xff0c;欢迎您的到来~✨ &#x1f345;系列专栏&#xff1a;设计模式&#x1f345; ✈️本篇内容: 迭代器模式✈️ &#x1f371; 本篇收录完整代码地址&#xff1a;https://gitee.com/diqirenge/design-pattern &#x1f371; 楔子 很久…
阅读更多...
最新文章

Copyright @ 2022~2023