js鼠标切换案例

最新推荐文章于 2022-09-01 14:43:02 发布

medigrat

最新推荐文章于 2022-09-01 14:43:02 发布

阅读量591

点赞数 1

分类专栏：小案例学Vue 文章标签： vue

本文链接：https://blog.csdn.net/medigrat/article/details/108415848

版权

小案例学Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js鼠标切换案例介绍

js鼠标切换主要是当鼠标操作文本内容的动作切换（鼠标悬浮、鼠标按下、鼠标单击）的时候文本会有不同的样式产生，当鼠标悬浮在文本上会有橙色颜色出现在文本内容上，当鼠标按下去一直不放的时候是粉色的，当鼠标单击后是红色的，本案例就是实现这个功能。

准备知识点

vue

指令

属性指令v-bind，事件指令v-on

这些指令的语法与用法。

实例成员

el:挂载点，data：变量数据值，methods：事件方法，

这些实例成员的语法与用法。

html

css

选择器

类选择器(.)类选择器语法：.类名来定义类属性样式

鼠标操作

鼠标悬浮

逻辑

鼠标悬浮控制的区域是用块标签div包裹的区域，具体的是标签语言内的文本。

鼠标悬浮操作的控制逻辑

逻辑分为悬浮操作控制着变量类名具体的类名，类选择器选择类名定义具体的类属性

鼠标悬浮在div标签上的文本上的事件，触发了@mouseover事件指令，将@mouseover事件指令的方法激活，传入@mouseover=’’hFn(’c1‘)’‘的方法的实参’c1’，传入的实参’c1’,到达vue对象的methods实例成员的被@mouseover激活的方法hFn,激活的方法hFn执行参数到变量的函数体执行，此时变量c就变成’c1’,变量c被全局赋值，vue对象的data实例成员的变量c被赋值为’c1’，'c1’通过虚拟dom操作渲染给类属性p2,至此类属性名的变量驱动成功，一次@mouseover事件指令的数据驱动，一次:class属性指令的虚拟dom渲染，一个是头，一个是尾。

有了具体的类名，用类选择器，给这个类名定义具体的样式的类属性。

步骤

前期准备：

1、开发项目文件的创建

2、vue文件的导入，（也可以是cdn导入）

3、html模板文件的创建

具体操作步骤：

1、在body、html这两个结束的标签之间写一个script标签，导入vue环境

2、在body标签之内，写一个div标签，作为vue的挂载点

3、生成一个新的Vue对象挂载div标签，用id来挂载

4、在挂载的div标签里面写一个div标签，

4-1、在标签区域写上文本内容

4-2、用vue属性指令语法定义标签类属性变量，事件指令语法定义鼠标悬浮方法的事件名和要传入的实参值

5、在vue对象中，产生数据定义和方法的实例成员，按照逻辑定义变量的赋值与方法参数传递

6、在head标签内写style标签，在style标签内写类属性

<head>	
	<style>
	.d2.c1{
        color:orange;
    }
	</style>
</head>

<body>
	<div id="app">
		<div :class="['d2',c]"  @mouseover="hFn('c1')" @mousedown="hFn('c2')">鼠标悬浮的事件处理</div>
	</div>

</body>
	<script src="js/vue.js"></script>
	<script>
    		new Vue({
        	el:'#app',
        	data:{
            	c:"",
        	},
            	methods:{
                	hFn(c){
                    	this.c=c;
                	}
            	}

	})
	</script>
</html>

鼠标按下

逻辑

鼠标按下逻辑与鼠标悬浮的逻辑一样

特点

事件的方法传入的参数不同，鼠标按下传递的是实参’c2’，事件是鼠标按下@mousedown事件。

步骤

1、在vue对象控制的挂载点的div标签内部的div内，用事件指令语法定义鼠标悬浮方法的事件名和要传入的实参值

2、在head标签内的style标签用类选择器语法写该类属性

<head>	
	<style>
	.d2.c1{
        color:orange;
    }
    .d2.c2{
      	color:pink;
    }
	</style>
</head>

<body>
	<div id="app">
		<div :class="['d2',c]"  @mouseover="hFn('c1')" @mousedown="hFn('c2')">鼠标悬浮的事件处理</div>
	</div>

</body>
	<script src="js/vue.js"></script>
	<script>
    		new Vue({
        	el:'#app',
        	data:{
            	c:"",
        	},
            	methods:{
                	hFn(c){
                    	this.c=c;
                	}
            	}

	})
	</script>
</html>

鼠标单击

逻辑

鼠标按下逻辑与鼠标悬浮和鼠标单击的逻辑一样

特点

事件的方法传入的参数不同，鼠标按下传递的是实参’c3’，事件是鼠标按下@click事件。

步骤

1、在vue对象控制的挂载点的div标签内部的div内，用事件指令语法定义鼠标按下方法的事件名和要传入的实参值

2、在head标签内的style标签用类选择器语法写该类属性

<head>	
	<style>
	.d2.c1{
        color:orange;
    }
    .d2.c2{
      	color:pink;
    }
    .d2.c3{
      	color:pink;
    }   
	</style>
</head>

<body>
	<div id="app">
		<div :class="['d2',c]"  @mouseover="hFn('c1')" @mousedown="hFn('c2')" @click="hFn('c3')">鼠标悬浮的事件处理</div>
	</div>

</body>
	<script src="js/vue.js"></script>
	<script>
    		new Vue({
        	el:'#app',
        	data:{
            	c:"",
        	},
            	methods:{
                	hFn(c){
                    	this.c=c;
                	}
            	}

	})
	</script>
</html>

后记总结

注意点：

1、新Vue对象，new Vue({}),Vue是首字母大写，后面是一个小括号，小括号里面是大括号；

2、在vue实例成员之间用逗号隔开；

3、属性指令的简写:class不要丢了这个冒号；

4、事件方法hFn里面传递的是字符串，用引号给它，因为事件方法用双引号，所以参数用单引号；

5、挂载点的值是’#app’,这样来寻找app这个id值的；

6、固定类名与变量类名用[]来存放，[‘d2’,c]，因为本身已经在大括号内，所以固定类名就用单引号，c是变量，直接写；

7、默认的c的变量值为空字符串，它的含义就是逻辑值为false，调用不到所对应的类名；

8、在实例成员methods的方法函数体大括号内，函数块之间用逗号隔开分号隔开；

9、在类选择器属性定义的大括号内，不同样式用分号隔开；

感想：

我已经试验了，可以实现功能，注意语法的基本，也就是逗号，冒号，传递的是字符串实参，还有默认的是空字符串，这些要一个都不能错，还有id的挂载需要用#，id选择器来挂载，el的值也是一个字符串。

谢谢各位的观看，理解一下，有所输出！给个评论，好评就给个意思，有点意思！~

medigrat

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js鼠标切换案例

js鼠标切换案例介绍js鼠标切换主要是当鼠标操作文本内容的动作切换（鼠标悬浮、鼠标按下、鼠标单击）的时候文本会有不同的样式产生，当鼠标悬浮在文本上会有橙色颜色出现在文本内容上，当鼠标按下去一直不放的时候是粉色的，当鼠标单击后是红色的，本案例就是实现这个功能。准备知识点vue指令属性指令v-bind，事件指令v-on这些指令的语法与用法。实例成员el:挂载点，data：变量数据值，methods：事件方法，这些实例成员的语法与用法。html标签div、script、style这些标签
复制链接

扫一扫