Vue.js基础指令

在讲指令之前,可以先了解插值表达式,如果已经知道,当我没说

一.插值表达式


1.数据绑定最常见的形式就是双大括号的文本插值,Mustache上属性的值替代。只要绑定的数据对象上属性发生了改变,插值处的内容都会更新。,message 是将数据解析成纯文本的,也就是说,就算中含有了 html,message签,它也是只看做纯文本的,不能输出真正的 html。

完整代码例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>豪哥用例</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello 503'
  }
})
</script>
</body>
</html>

 运行结果:


二.基础(内置)指令

1.Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

说简单点:


v-text  指令:

在与插值表达式的比较中:
它与花括号的区别是:使用 v-text 在页面加载时不会显示'message',解决了插值表达式闪烁问题,因为它是属性而不是插值表达式。

应用例子:

<div id="app">
  <p v-text="message"></p>
</div>
 
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});
 

v-text 通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分,应该使用 mustache interpolations 代替。


v-html指令

v-htm1 指令用于将 HTML 标签和文本插入到元素中。
如果您尝试使用文本插值(使用大括号{{ }})输出 HTML 标签,结果将只是一个文本字符串。
使用<style scoped>在单文件组件(SFC)中定义的范围样式不会影响 v-htm1 指令中的 HTML。
为了实现 SFC 中 v-htm1 包含的 HTML 的范围样式,我们可以将 CSS 模块与<style module〉结合使用。 v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板,不如重新想想怎么使用组件来代替。

典例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>503秘密基地</h1>'
  }
})
</script>
</body>
</html>

运行结果 :

在HTML模板中,使用v-html指令将"message"属性的值渲染到页面中。v-html指令会将属性值作为HTML解析并插入到指令所在的元素中。

最终的结果是页面中显示了一个h1标题,内容为"503秘密基地"。

注意无论是v-html还是v-text,如果绑定了data中属性之后,会覆盖掉原本标签上的内容。


v-show指令

官方解释:v-show
基于表达式值的真假性,来改变元素的可见性。我的说法差不多(根据表达式的值来控制元素的显示与隐藏。

期望的绑定值类型:any
通过设置内联样式的CSS 属性来工作,当元素可见时将使用初始displayv-show值。当条件改变时,也会触发过渡效果。

例如1:

<div v-show="isVisible">This is a visible element</div>
 

在上面的代码中,v-show指令被绑定在一个<div>元素上,它的值为isVisible,表示这个元素的显示与隐藏将根据isVisible的值来决定。

  • 如果isVisible的值为true,那么该<div>元素将会显示在页面上。
  • 如果isVisible的值为false,那么该<div>元素将会被隐藏,其占用的空间也会被隐藏。

v-show的特点是在元素的style属性上使用了display属性来控制元素的显示与隐藏,不会从DOM中移除元素,因此会占用页面的空间。

v-show的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性,也可以是一个计算属性或者一个方法的返回值。

例如2,在Vue实例中定义了一个名为isVisible的属性:

new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})

那么该元素的显示与隐藏将根据isVisible属性的值来决定。

注意v-show 不支持在 <template> 元素上使用,也不能和 v-else 搭配使用。

v-if指令

解释:v-if是Vue.js中的一个条件渲染指令,用于根据表达式的真假来判断是否渲染元素。

特点:

<div v-if="isVisible">This is a visible element</div>
 

在上面的代码中,v-if指令被绑定在一个<div>元素上,它的值为isVisible,表示这个元素是否渲染将根据isVisible的值来决定。

  • 如果isVisible的值为true,那么该<div>元素将会被渲染并显示在页面上。
  • 如果isVisible的值为false,那么该<div>元素将不会被渲染,并且在DOM中不存在。

v-if的特点是根据条件动态地将元素渲染到DOM中或从DOM中移除,从而实现元素的显示与隐藏。

v-if的表达式可以是任何返回布尔值的表达式。可以是一个data中定义的属性,也可以是一个计算属性或者一个方法的返回值。

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>火影DD</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">林,苏,周,罗,邱,李</p>
    <template v-if="ok">
      <h1>九江职业技术学院503秘密基地</h1>
      <p>学的不仅是技术,更是梦想!</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

运行结果:


v-show与v-if的不同

v-show 和 v-if 之间的区别在于 v-if 根据条件创建(渲染)元素,但 v-show 元素已经创建,仅 v-show 改变其可见性(display)。
因此,切换对象的可见性时最好使用 v-show,因为浏览器更容易做到,并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。

官方解释:


都讲到v-if,那就将v-else也说了去,if,else,对于学习语言的是多么的熟悉,到哪都密不可分

语法上也都相差不大。

v-else

基本解释:v-else指令是Vue.js模板语法中的一种指令,用于在条件渲染中定义一个“否则”分支。

使用v-if指令时,可以通过v-else指令来定义一个“否则”分支,该分支会在v-if条件为假时被渲染。v-else指令必须紧跟在v-if或v-else-if指令之后,并且不能单独使用。

典例1:

<div v-if="condition">
  条件为真时渲染的内容
</div>
<div v-else>
  条件为假时渲染的内容
</div>

解释:

如果condition为真,则第一个div会被渲染;如果condition为假,则第二个div会被渲染。

v-else指令的存在可以简化条件渲染的逻辑,使代码更加清晰易读。

注意:一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,否则它将不会被v-

v-else-if



v-on指令

含义:

v-on指令用于绑定DOM事件到Vue实例的方法上。它可以在模板中监听DOM事件,并执行指定的方法。

使用v-on指令的一般语法是将事件名称作为指令参数,方法名作为指令的值。例如,可以通过v-on:click来监听元素的点击事件,然后在Vue实例中定义一个名为clickHandler的方法来处理点击事件。

v-on指令还可以使用简化语法,将@符号作为指令的前缀。例如,@click相当于v-on:click。

关于调用传参,诸位道友可看:

  1. 传递参数给Vue方法:可以在v-on指令中使用方法参数来获取事件对象或其他自定义参数,并将其传递给Vue方法。例如,可以通过@click指令的参数来传递事件对象。

<button v-on:click="doSomething($event)">Click me</button>
 
methods: {
  doSomething(event) {
    // 使用event获取事件对象
  }
}
 

 

2.使用修饰符:v-on指令可以使用修饰符来改变事件监听的行为。例如,使用.stop修饰符可以阻止事件冒泡。

<button v-on:click.stop="doSomething">Click me</button>
 

methods: {
  doSomething() {
    // 执行某些操作
  }
}
 

典例1:

<!DOCTYPE html>
<html>
<head>
  <title>电灯开关</title>
  <style>
    #app {
      border: dashed black 1px;
      display: inline-block;
      padding-bottom: 10px;
    }

    #app > button {
      display: block;
      margin: auto;
    }

    #lightDiv {
      position: relative;
      width: 150px;
      height: 150px;
    }

    #lightDiv > img {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #lightDiv > div {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 50%;
      background-color: yellow;
    }
  </style>
</head>
<body>

<h1>503电灯开关</h1>
<p>v-on 指令用在按钮标签上来监听“click”事件。 当“click”事件发生时,“lightOn”数据属性在“true”和“false”之间切换,使灯泡后面的黄色 div 可见/隐藏。</p>
<div id="app">
  <div id="lightDiv">
    <div v-show="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">开关灯</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
 app.mount('#app')
</script>

</body>
</html>

运行结果:

解释:这是一个电灯开关的页面。页面中有一个电灯图像,当点击"开关灯"按钮时,图像后方的黄色div会显示/隐藏,表示电灯是否亮着。页面使用Vue.js框架实现了点击按钮时切换灯泡状态的功能。

在HTML部分,通过v-show指令来控制灯泡后面的黄色div的显示与隐藏,当lightOn为true时,div显示,当lightOn为false时,div隐藏。

在按钮部分,使用v-on指令监听按钮的click事件,当按钮被点击时,通过表达式“lightOn =! lightOn”来切换lightOn的值,实现灯的开关效果。

v-bind命令

解释:

v-bind指令是Vue.js中用于动态绑定HTML特性的指令,它的主要作用是将Vue实例中的数据绑定到HTML元素的特性上。(Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的.)

在Vue.js中,v-bind指令还有一个简写形式,即":属性名"。这被称为v-bind的语法糖。

使用v-bind的语法糖,可以直接在HTML元素中使用冒号加特性名的方式来绑定数据。

官方解释:

简单小例子:

<!-- 使用v-bind的完整写法 -->
<img v-bind:src="imgUrl">

<!-- 使用v-bind的语法糖写法 -->
<img :src="imgUrl">
 

解释:通过使用v-bind的语法糖写法,将Vue实例中的imgUrl数据绑定到img元素的src特性上。当imgUrl的值发生变化时,img元素的src特性也会相应地更新。 

1.绑定属性值:

<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>

<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>
 

使用v-bind指令将imageUrl属性绑定到img元素的src属性上,实现动态地修改图片的URL

2.动态绑定class:

<!-- 常规写法 -->
<div v-bind:class="{ active: isActive, 'text-bold': isBold }"></div>

<!-- 语法糖写法 -->
<div :class="{ active: isActive, 'text-bold': isBold }"></div>
 

使用v-bind指令将一个对象作为参数传递给class属性,根据isActive和isBold的值动态地设置元素的class。

3.动态绑定样式:

<!-- 常规写法 -->
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }"></div>

<!-- 语法糖写法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
 

使用v-bind指令将一个对象作为参数传递给style属性,根据textColor和fontSize的值动态地设置元素的。

注意:

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

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

相关文章

10_MVC

文章目录 JSON常用的JSON解析Jackson的常规使用指定日期格式 MVC设计模式MVC介绍前后端分离案例&#xff08;开发与Json相关接口&#xff09; 三层架构三层架构介绍 JSON JSON&#xff08;JavaScript Object Notation&#xff09; 是一种轻量级的数据交换格式&#xff0c;是存…

【教学类-09-03】20240401细线迷宫图02(A4横版一页-2份竖版)

作品展示&#xff1a; 背景需求&#xff1a; 【教学类-09-02】20240331细线迷宫图01&#xff08;A4横版一页1份横版&#xff09;-CSDN博客文章浏览阅读779次&#xff0c;点赞28次&#xff0c;收藏6次。【教学类-09-02】20240331细线迷宫图01&#xff08;A4横版一页1份横版&…

【2012 统考真题/完整代码】找单词共同后缀的起始位置

题目 假定采用带头结点的单链表保存单词&#xff0c;当两个单词有相同的后缀时&#xff0c;则可共享相同的后缀存储空间&#xff0c;例如&#xff0c;“loading”和“being”的存储映像如下图所示。 设str1和str2分别指向两个单词所在单链表的头结点&#xff0c;链表结点结构为…

PTA L2-043 龙龙送外卖

龙龙是“饱了呀”外卖软件的注册骑手&#xff0c;负责送帕特小区的外卖。帕特小区的构造非常特别&#xff0c;都是双向道路且没有构成环 —— 你可以简单地认为小区的路构成了一棵树&#xff0c;根结点是外卖站&#xff0c;树上的结点就是要送餐的地址。 每到中午 12 点&#…

【Linux】权限理解

权限理解 1. shell命令以及运行原理2. Linux权限的概念3. Linux权限管理3.1 文件访问者的分类&#xff08;人&#xff09;3.2 文件类型和访问权限&#xff08;事物属性&#xff09;3.2.1 文件类型3.2.2 基本权限 3.3 文件权限值的表示方法3.4 文件访问权限的相关设置方法3.4.1 …

Taskflow应用:波前并行(Wavefront Parallelism)

2D的Wavefront如下图所示&#xff1a; #include <taskflow/taskflow.hpp>std::mutex cout_mutex; void format_str(std::string const& str) {std::lock_guard<std::mutex> lock(cout_mutex); std::cout << str << std::endl; }std::string crea…

算法编程:计算斐波那契数列

实现代码&#xff1a;C 实现方法&#xff1a;通过递推法、递归法、矩阵快速幂方法 适用&#xff1a; 范围小且单次查询时&#xff0c;可以不用记忆化处理。 范围大或多次查询时&#xff0c;应使用记忆化处理。 时间复杂度&#xff1a; 递归法&#xff1a;O(n^2)-->递推法(…

三台电机的顺启逆停

1&#xff0c;开启按钮输入信号是 电机一开始启动&#xff0c;5秒回电机2启动 &#xff0c;在5秒电机三启动 关闭按钮输入时电机3关闭 &#xff0c;5秒后电机2关闭 最后电机一关闭 2&#xff0c;思路开启按钮按下接通电机1 并且接通定时器T0 定时器T0 到时候接通电机2 并且开…

YOLOV8逐步分解(3)_trainer训练之模型加载

yolov8逐步分解(1)--默认参数&超参配置文件加载 yolov8逐步分解(2)_DetectionTrainer类初始化过程 接上2篇文章&#xff0c;继续讲解yolov8训练过程中的模型加载过程。 使用默认参数完成训练器trainer的初始化后&#xff0c;执行训练函数train()开始YOLOV8的训练。 1. t…

windows下安装iteliij Idea2023.3

首先从官网下载 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击uninstall-all-users.vbs,最后点击确定。 接下来运行in…

如何成功找到理想的工作,java不行了吗?我靠这个方法成功拿到大厂10个offer

第一段&#xff1a;引言 作为一名即将毕业的大学生&#xff0c;步入职场是每个毕业生都要面对的现实挑战。随着社会竞争的日益激烈&#xff0c;如何成功找到一份理想的工作成为许多毕业生所关注的焦点。本文将分享一些关于毕业生求职的经验和建议&#xff0c;希望能够帮助毕业生…

图的遍历试题

一、单项选择题 01.下列关于广度优先算法的说法中&#xff0c;正确的是( ). Ⅰ.当各边的权值相等时&#xff0c;广度优先算法可以解决单源最短路径问题 Ⅱ.当各边的权值不等时&#xff0c;广度优先算法可用来解决单源最短路径问题 Ⅲ.广度优先遍历算法类似于树中的后序遍历算法…

C++中的动态内存管理

1.C中动态内存管理 C语言内存管理方式在C中可以继续使用&#xff0c;但有些地方就无能为力&#xff0c;而且使用起来比较麻烦&#xff0c;因此C又提出了自己的内存管理方式&#xff1a;通过new和delete操作符进行动态内存管理。 1.1 new/delete操作内置类型 c语言和c的动态内存…

Java_22 蓝桥杯真题——拼数

问题描述 给定几 个正整数 a1,a2....,an&#xff0c;你可以将它们任意排序, 现要将这 几 个数字连接成一排&#xff0c;即令相邻数字收尾相接&#xff0c;组成一个数。 问&#xff0c;这个数最大可以是多少。 输入格式 第一行输入个正整数 n(l < n< 20)。 第二行输入几 个…

Linux USB驱动(二)

1. Linux USB驱动软件框架 应用程序有两种访问硬件的途径&#xff1a;通过设备驱动程序来访问和跳过设备驱动程序&#xff08;直接使用host驱动程序&#xff09;来访问。 当直接使用Host驱动程序时&#xff0c;可以调用libusb库中已经封装好的函数接口。 2. USB电气信号 一个…

特征融合篇 | 利用RT-DETR的AIFI去替换YOLOv8中的SPPF(附2种改进方法)

前言:Hello大家好,我是小哥谈。RT-DETR模型是一种用于目标检测的深度学习模型,它基于transformer架构,特别适用于实时处理序列数据。在RT-DETR模型中,AIFI(基于注意力的内部尺度特征交互)模块是一个关键组件,它通过引入注意力机制来增强模型对局部和全局信息的处理能力…

2024全开源小狐狸ai付费创作系统V2.8.0

源码介绍 小狐狸GPT付费体验系统的开发基于国外很火的ChatGPT&#xff0c;这是一种基于人工智能技术的问答系统&#xff0c;可以实现智能回答用户提出的问题。相比传统的问答系统&#xff0c;ChatGPT可以更加准确地理解用户的意图&#xff0c;提供更加精准的答案。同时&#x…

从0开始搭建基于VUE的前端项目(三) Vuex的使用与配置

准备与版本 vuex 3.6.2(https://v3.vuex.vuejs.org/zh/)概念 vuex是什么? 是用作 【状态管理】的 流程图如下 state 数据状态,成员是个对象 mapState 组件使用this.$store.state.xxx获取state里面的数据 getters 成员是个函数,方便获取state里面的数据,也可以加工数据 ma…

HarmonyOS 应用开发之组件启动规则(Stage模型)

启动组件是指一切启动或连接应用组件的行为&#xff1a; 启动UIAbility、ServiceExtensionAbility、DataShareExtensionAbility&#xff0c;如使用startAbility()、startServiceExtensionAbility()、startAbilityByCall()等相关接口。 连接ServiceExtensionAbility、DataShare…

[BT]BUUCTF刷题第12天(3.31)

第12天 Basic BUU BURP COURSE 1 经过尝试&#xff0c;在这里X-Forwarded-For不管用&#xff0c;要用X-Real-IP BP抓包添加X-Real-IP:127.0.0.1&#xff08;注意这一行前面不要有空行&#xff09; 发送后返回提示了用户名和密码&#xff0c;这里直接给了&#xff0c;登录即可…