Vue笔记：指令（2）

最新推荐文章于 2023-09-24 14:37:42 发布
最新推荐文章于 2023-09-24 14:37:42 发布
阅读量172 收藏
点赞数
分类专栏： Vue笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47883103/article/details/108286949
版权

v-bind

在这里插入图片描述

语法糖
在这里插入图片描述

动态改变标签的属性值

在这里插入图片描述

两个class不会重复，内部会合并
v-bind绑定style样式
在这里插入图片描述
在这里插入图片描述

50px(value)需要加上引号，不然vue会认为他是变量，会报错

精进版本
在这里插入图片描述

在这里插入图片描述

v-on

可以直接写操作，复杂的时候也可以调用methods里的方法
语法
在这里插入图片描述
在这里插入图片描述

参数问题

  • 如果该方法不需要额外参数，那么方法后面的()可以不添加
  • @事件=函数名。 加不加小括号主要看需不需要传参数
  • 如果方法中本身有一个参数，那么会默认将原生事件event参数传递进去
  • 如果需要同时传递某个参数，同时需要event时，可以通过$event传入事件

在这里插入图片描述

修饰符
修饰符 .top 阻止事件冒泡的触发
在这里插入图片描述

修饰符 .prevent 阻止默认事件
在这里插入图片描述

修饰符 .{keyCode|keyAlas} 监听键盘按下的键码的点击
在这里插入图片描述

修饰符 .once 只触发一次回调函数
在这里插入图片描述

v-if

  • v-if的值为真的时候渲染，假的时候不渲染

    在这里插入图片描述

    在这里插入图片描述

v-else

isShow为false的时候，显示
在这里插入图片描述

在这里插入图片描述

判断较为复杂的时候，不建议用标签做，用计算属性

v-show

v-show为真的时候显示

在这里插入图片描述
在这里插入图片描述

  • 当isShow为false的时候，两个h2都消失了，但是消失的方式不一样，v-if是h2这个dom都没有了，v-show是更改style属性的diplay为none
  • 当需要在显示和隐藏之间切换很频繁时：v-show 只有一次切换时：v-if

v-for

在遍历过程中，没有用到下标值
在这里插入图片描述

在遍历过程中，获取下标值
在这里插入图片描述

在遍历对象的过程中，如果只是获取一个值，那么获取到的时value
在这里插入图片描述

遍历对象中某一个元素
在这里插入图片描述

获取key和value 格式:(value,key)
在这里插入图片描述

  • for过程添加新的元素
  1. 这个数组里有5(1,2,3,4,5)个元素，如果想在在第2个位置插入一个元素(A)
    vue是这样做的:依次在虚拟dom里创建li0(1),li1(2),在数组第二个位置创建
    li2(A),然后再次依次li3(3),li4(4),li5(5)。需要改很多地方,这样做影响效率
  2. 在绑定 :key=‘item’ 的时候(key和要展示的东西一样，对应起来)，他就会在虚拟
    dom里复用这个dom，直接创建一个新的元素(A),并且放到对应的位置，这样效率了
    diff算法,key的作用主要是为了更高效的更新虚拟dom
enter键上的妹妹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue小笔记.docx
08-21
Vue是一种流行的前端JavaScript框架，用于构建交互性强、动态和响应式的Web应用程序。它的核心思想是通过将视图与数据分离，使开发者能够更轻松地管理和维护复杂的用户界面。 Vue具有以下主要特点： 响应式数据绑定： Vue使用双向绑定技术，允许开发者将页面中的HTML元素与数据模型关联。当数据模型发生变化时，相关的视图会自动更新，从而减少了手动DOM操作的需求。 组件化开发： Vue鼓励将应用程序拆分为多个可复用的组件。每个组件都有自己的逻辑、模板和样式，使开发者能够更高效地管理和组织代码。 虚拟DOM： Vue使用虚拟DOM来优化性能。在数据变化时，Vue首先更新虚拟DOM，然后通过比较虚拟DOM和实际DOM的差异，最终只更新需要改变的部分，从而减少了DOM操作的开销。 指令： Vue提供了一系列指令，用于处理DOM元素。例如，v-if用于条件性地渲染元素，v-for用于循环渲染列表，v-bind用于绑定属性等。 事件处理： Vue允许开发者使用v-on指令来监听DOM事件并执行相应的逻辑。这使得用户交互和事件处理变得简单而直观。 过渡与动画： Vue提供了过渡
条件渲染v-show与v-if
gxh0816的博客
01-12 252
v-show 就是将 display设置为了none 将元素隐藏掉了. v-show与v-if都能实现显示或隐藏,那么使用哪个呢? 如果切换频繁的话建议使用v-show,因为v-show只是控制display:none 但是 v-if是在DOM节点里面添一个节点删一个节点.存在效率上的问题. 如果多个判断的话也可以用v-if,v-else-if,v-else 按住alt可以选中多行 注意点 如果我们多个h2标签都有相同的条件显示或隐藏 <h2 v-if="true">你好</h2>
Vue学习日记之v-if和v-show的使用
qq_124917348的博客
06-03 262
v-if和v-show使用效果都是一样的，根据传入的值，隐藏或显示内容。 不同的是v-if可以搭配v-else使用，当传入v-if的值为true时，v-if显示，否则v-else显示。 看个例子 <div id="app"> <input type="button" :value="toggle" @click="add"> <p v-if...
Vue内置指令——v-show和v-if指令
最新发布
如果相遇，那么你好哦~
09-24 1778
从生成的HTML结构中可以看出，索引不等于的元素被隐藏了，只是添加了CSS样式：display:node，但是该元素还存在。v-show指令可以用来动态的控制DOM元素的显示或隐藏。从生成的HTML结构中可以看出，索引不等于1的元素被隐藏了，这里是直接删除了img元素，不占用位置。v-if指令的用法和v-show指令的用法相同，都是用来控制DOM元素的显示或隐藏。v-show和v-if都可以用来控制DOM元素的显示或隐藏，那么这两个指令有什么区别呢？v-show="false"， 表示隐藏DOM元素。
【vue】条件渲染：v-show
Java is the best language~
11-09 417
vue中关于条件渲染的指令有： v-if、v-show、v-for 今天来总结一下v-show指令的用法。 v-show指令的含义顾名思义，就是让带有v-show指令的元素显示与不显示。 注意： 1、带有v-show的元素始终会被渲染并保留在DOM中。v-show知识简单地切换元素的CSS属性display。 2、v-show不支持<template>，也不支持v-els...
V-show的正确使用方法
热门推荐
m0_62165756的博客
05-07 2万+
1.v-show指令的作用是：根据切换元素的显示状态 2.原理是修改元素 的display，实现显示隐藏 3.通过判断自定义值为true或false进行隐藏显示 下列是v-show最基本的引用方式 <template> <view class="" > <image src="../../static/c1.png" @click="cj()"></image> <input type="text" value="" placeholder="
VUE专题 常用指令 v-show,v-if,v-for,v-bind,v-on,v-model
weixin_44131922的博客
04-11 1450
v-show v-show：判断谋个元素是否显示或隐藏。 true:显示 false:隐藏 <div v-show="type===0">hello vue</div> ........ data:{ type:0 } v-if v-else v-else-if v-if/v-else/v-else-if： v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 v-else-if，顾名思义，充当 v-if 的“else-if 块”，可
关于v-if=“show(val)“中能否写方法的思考
Yetian_2000的博客
10-16 3204
在vue中v-if=“show(‘基础信息’)” ； method中： show(index){ return this.menus.includes(index); }, v-if中可以使用函数表达式，但是问题在于这个函数show（‘基础信息’） 什么时候触发的问题，在模版编译并不会触发执行函数。2.如果在created也不能触发。 3.在beforecreated这个没试过，能不能触发。（注意模版的编译是在created之后进行的） 就上面这个问题v-if不建议使用函数执行返回布尔值，应该
Vue学习笔记
12-05
vue的学习笔记里面的主要内容是vue.js cli的安装和相关的指令
Vue.js 常用系统指令
01-08
1.v-on ：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码 （1）v-on:click绑定点击事件 v-on:click {{message}} vue的onclick //view model new Vue({ el:'#app', data:{ message...
vue学习笔记之动态组件和v-once指令简单示例
09-17
主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
vue_core:vue原始码学习笔记
03-23
vue_core 观察员（劫持所有对象属性变化） 编译（解析模板指令） 观察者（订阅者）
Vue笔记：路由之间的传参（手摸手教程）
m0_47883103的博客
09-03 2617
看了这篇文章，我才知道，原来Vue路由这么简单
Vue笔记：插槽的使用
m0_47883103的博客
09-01 2477
先创建父子关系 <div id='father'> <h1>{{ name }}</h1> <son></son> </div> <template id='son'> <div> <h1>{{ name }}</h1> </div> <template> const son = { template:'#son', data()
Vue笔记：动画效果
m0_47883103的博客
08-31 457
动画效果 利用 v-bind 给元素添加不同的类名，这些类名是提前写好的动画，以此来达到动画效果 利用transition标签包裹住需要产生动画效果的标签 transition中的子元素需要有v-show或者v-if来控制是否显示 transition标签里的name属性决定使用那一个动画效果 例子 先定义动画效果 .fade-enter-active { transition: all ease 2s; } .fade-enter { opacity: 0; }
Vue笔记：指令（3）
m0_47883103的博客
08-28 173
v-model v-model主要用来绑定表单，通过v-model实现双向绑定 v-model实现表单元素和数据的双向绑定 双向绑定可以简单理解为，你可以更改我，我也可以更改你 input里有一个内部事件叫做input用于动态监听有没有输入东西 v-model的原理：相当于 v-bind:value=’’ 和 v-on:input 两个指令的结合 v-model绑定radio 如果绑定了v-model，name属性可以不写，因为已经是互斥的了 可以直接赋给sex一个初始值(男or女)，来实现默认
Vue笔记：自定义指令
m0_47883103的博客
08-28 171
自定义指令 作用 操作底层dom 例子 使用 注意传参时的格式 创建 当组件被创建直接自动传入了一个el参数，el就是使用这个指令的dom 谁用这个指令，谁的背景变成红色 传过来的参数在bind.value里 局部自定义指令 局部自定义指令不用Vue.,而是接收了一个directives 使用 创建 指令生命周期 指令和组件是两套东西 bind() { //... } 当指令绑定到 HTML 元素上时触发 只调用一次 inserted(){ //... } 只执行一次 被绑定元
Vue笔记：组件化
m0_47883103的博客
08-28 150
组件化 思想 人面对复杂问题的处理方式: 1: 任何一个人处理信息的逻辑能力都是有限的 2: 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。 3:但是,我们人有一种天生的能力 ,就是将问题进行拆解。 4:如果将一个复杂的问题 ,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃 组件化也是类似的思想 1:如果我们将一个页面中所有的处理逻辑全部放在一 起，处理起来就会变得非常复杂,而且不利于后续 的管理以及扩展。 2:但如果,我们讲一个页面拆分成一个个小
尚硅谷 vue2 笔记
06-20
### 回答2： 尚硅谷的Vue2笔记是一份非常全面和深入的Vue学习资料，它涵盖了Vue框架的基本概念和重要特性，包括Vue的组件化开发、指令、路由、Vuex状态管理、axios网络请求等。该笔记不仅注重理论知识的讲解，而且...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值