您的位置:首页 > 文旅 > 旅游 > 怎么做网页制作鼠标点击导航项时下拉显示_效果图外包_营销推广案例_合肥网站推广公司排名

怎么做网页制作鼠标点击导航项时下拉显示_效果图外包_营销推广案例_合肥网站推广公司排名

2024/12/23 8:50:46 来源:https://blog.csdn.net/2401_84715637/article/details/144109256  浏览:    关键词:怎么做网页制作鼠标点击导航项时下拉显示_效果图外包_营销推广案例_合肥网站推广公司排名
怎么做网页制作鼠标点击导航项时下拉显示_效果图外包_营销推广案例_合肥网站推广公司排名

 往期内容

《Vue零基础入门教程》第一课:Vue简介

《Vue零基础入门教程》第二课:搭建开发环境

《Vue零基础入门教程》第三课:起步案例

《Vue零基础入门教程》第四课:应用实例

《Vue零基础入门教程》第五课:挂载

《Vue零基础入门教程》第六课:基本选项

《Vue零基础入门教程》第八课:模板语法

《Vue零基础入门教程》第九课:插值语法细节

《Vue零基础入门教程》第十课:属性绑定指令

1) 什么是事件绑定

将JS事件和对应的处理函数绑定

2) 语法

v-on:事件名="函数名"
// 简写
@事件名="函数名"

示例

给一个按钮绑定点击事件

template部分

<button @click="handleClick">点击</button>

js部分

methods: {handleClick() {alert('hello')}
}
  • methods中定义的函数会挂载到vm实例对象上
  • methods中定义的普通函数内部this指向vm
  • methods中, 不推荐使用箭头函数

3) 是否加括号

  • 不加括号(70%): 直接写函数名称, 可以在回调函数中, 直接拿到事件对象event
  • 加括号(20%): 加括号主要为了传参, 在回调函数中, 拿到参数
  • 加括号(10%): 有时, 除了拿到参数外, 还需要原生的事件对象, 通过$event传递

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><!-- 访问vm实例上的属性 --><!-- 70%: 在指令表达式中不加(). 就可以通过默认参数获取事件对象 --><button @click="handleClick">点击了{{count}}次</button><!-- 20%: 加() 目的是为了传参数 --><button @click="handleClick(100)">点击了{{count}}次</button><!-- 10%: 加() 在参数的最后, 通过$event也可以将事件对象传递 --><button @click="handleClick(100, $event)">点击了{{count}}次</button></div><script>const { createApp } = Vueconst vm = createApp({data() {return {count: 0,}},methods: {// 在methods中定义的就是事件回调函数, 默认情况可以接收事件对象 做为参数handleClick(a, b) {console.log(a, b)// 事件回调. 当点击事件触发, 会被调用this.count++},},}).mount('#app')// const div = document.querySelector('#app')// div.addEventListener('click', function (e) {//   console.log(e)// })</script></body>
</html>

4) 事件修饰符

在绑定事件的时候, 可以添加事件修饰符, 常用的事件修饰符如下:
●.prevent: 阻止默认行为
●.stop: 阻止冒泡
●.once: 事件只会触发一次
示例

prevent示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><a @click.prevent="" href="http://www.baidu.com">baidu</a></div><script>const { createApp } = Vueconst vm = createApp({}).mount('#app')// 原生js方式// document.querySelector('a').addEventListener('click', function (e) {//   // 调用事件对象的preventDefault方法, 阻止默认行为//   // 对于a元素而言, 默认行为就是跳转页面//   e.preventDefault()// })</script></body>
</html>

stop示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><ul @click="handleUl"><!-- 1. `.stop` 阻止事件向上冒泡2. 事件修饰符可以连用--><li @click.stop="handleLi">1</li><li>2</li><li>3</li></ul></div><script>const { createApp } = Vueconst vm = createApp({methods: {handleUl() {console.log('ul被点击了...')},handleLi() {console.log('li被点击了...')},},}).mount('#app')</script></body>
</html>

5) 按键修饰符

主要针对 键盘事件

常用按键修饰符

  • .enter: 回车键
  • .up: 上
  • .down: 下
  • .left: 左
  • .right: 右

系统功能键

  • .ctrl
  • .alt
  • .shift

示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"><input type="text" @keyup.enter="submit" /></div><script>const { createApp } = Vueconst vm = createApp({methods: {submit() {console.log('输入了数据, 按下回车键')},},}).mount('#app')</script></body>
</html>

指令语法的完整示意图:

https://cn.vuejs.org/guide/essentials/template-syntax#directives

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com