Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片

在某个需求下，需要鼠标移入时是A背景图，移出时是B背景图。（针对于Vue项目），如果是普通的HTML页面可直接在js中获取dom元素去修改style等方式实现，在Vue中，需要先将导入，将声明为一个变量。

如截图所示，我们要改变的是红圈标记的两个，当鼠标移入部分时，将那块的image替换为UI给的。

这里也可以用require去获取

也可以使用import导入再去data中去赋值给变量

下面就是赋值给到变量中去

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods: {

        getref() {

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          consolelog(this$refsh1eleinnerText);

          this$refsh1elestylecolor = 'red';// 修改html样式

          consolelog(this$refshomsg);// 获取组件数据

          consolelog(this$refshotest);// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

thiscontent = '顶部d出 popup'

break

case 'bottom':

thiscontent = '底部d出 popup'

break

case 'center':

thiscontent = '居中d出 popup'

break

}

thistype = type

this$nextTick(() => {

this$refs['show' + open]open()

})

},

cancel(type) {

this$refs['show' + type]close()

},

change(e) {

consolelog('是否打开:' + eshow)

}

},

一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this$refs元素绑定rel  这样就可以减少获取dom节点的消耗了

       Virtual DOM这个概念相信大家不会太陌生，他产生的前提是浏览器中的DOM是很“昂贵”的，为了直观的感受，我们可以把一个简单的 div 元素属性都打印出来，如下图所示：

       可以看到Vuejs中的Virtual DOM还是稍微有点复杂的。因为他这里包含了很多Vuejs的特性。这里千万不要被这茫茫多的属性吓到，实际上Vuejs中Virtual DOM是借鉴了一个开源库 snabbdom 的实现，然后加入了一些Vuejs特色的东西。

       其实VNode是对真实DOM的一种抽象描述，它的核心定义为非就几个关键属性，标签名，数据，子节点，键值等，其他属性都是用来扩展VNode的灵活性以及实现一些特殊的 feature 的。由于VNode只是用来用来映射到真实DOM的渲染，不需要包含 *** 作DOM的方法，因此它就非常轻量和简单。

       Virtual DOM除了它的数据结构的定义，映射到真实的DOM实际上要经历VNode的 create、diff 、patch 等过程。

       下面是vuejs从初始化到最终渲染的整个过程。假如你想阅读Vue源码，这张图应该能够帮到你。

内容简介：

1）Vue指令

2）computed和watch

3）生命周期钩子

4）组件间的传参

5）插槽

6）修饰符

7）nextTick()

前端三大框架：

Vue：尤雨溪开发

React：Facebook主导开发

Angular：谷歌主导开发

为什么选择Vue

1国内Vue的市场份额占比多

2简单易上手，非常适合前端开发初学者学习

前置知识：

1HTML、CSS和JS基础

2了解Node和npm

3webpack（可选，vue-cli已经封装了打包功能）

使用Vue的两种方式：

1直接script标签引入vuejs文件

2基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）

前端框架与库的区别

• jquery 库 -> DOM( *** 作DOM) + 动画+ ajax请求

• 框架 -> 全方位功能

一、指令

指令（Directives）是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。

v-model也可用在自定义组件上。

5v-for（列表渲染）

使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1 利用索引直接设置数组的某一项 2 对象属性的添加或删除

二、computed和watch

三、生命周期钩子

什么是Vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

总共分为8个阶段：创建前/后，挂载前/后，更新前/后，销毁前/后。

1）beforeCreate

此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。

2）created

此时可以读取data的值，并可以对其进行 *** 作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行>

this$el 可以获取当前组件的容器节点，然后你就：1this$elquerySelect('my-class')// 获取节点。编程是编写程序的中文简称，就是让计算机代为解决某个问题，对某个计算体系规定一定的运算方式，是计算体系按照该计算方式运行，并最终得到相应结果的过程。

拓展：

1、为了使计算机能够理解人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

2、编程:设计具备逻辑流动作用的一种"可控体系"注:编程不一定是针对计算机程序而言的，针对具备逻辑计算力的体系，都可以算编程。为了解决使用机器语言编写应用程序所带来的一系列问题，文件系统驱动编程流程人们首先想到使用助记符号来代替不容易记忆的机器指令。这种助记符号来表示计算机指令的语言称为符号语言，也称汇编语言。

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>

<script>

// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了

Vue$refs['video']play();

</script>

答

v-for是vuejs中的指令，用于遍历数组或对象中的数据，动态添加dom。使用v-for指令时，需要提供一个数组或对象，它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是：v-for="(item,index) in items"，其中items是要遍历的数组或对象，item是当前遍历到的元素，index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构，而不用写大量的dom结构代码。

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

以上就是关于Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片全部的内容，包括:Vue中 前端如何动态的修改某个DOM元素鼠标移入移出时的背景图片、vue中$refs的使用记录、基于Vue认识虚拟DOM（Virtual DOM）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！