vue5中的事件修饰符(style)和template

发布时间:2023-07-16 13:30

目录
  • 事件修饰符
  • 按键修饰符
  • 自定义按键修饰符别名
    • template
    • 组件
    • 组件注册
    • Vue 调试工具
    • 组件插槽

事件修饰符

  • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  • Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符
  • 修饰符是由点开头的指令后缀来表示的



...

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

  • 在做项目中有时会用到键盘事件,在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符





常用的按键修饰符

  • .enter =>    enter键
  • .tab => tab键
  • .delete (捕获“删除”和“退格”按键) =>  删除键
  • .esc => 取消键
  • .space =>  空格键
  • .up =>  上
  • .down =>  下
  • .left =>  左
  • .right =>  右

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名

    预先定义了keycode 116(即F5)的别名为f5,因此在文字输入框中按下F5,会触发prompt方法    

绑定style

 
绑定样式对象
\'    
内联样式

template

可以用template替换div(因为div是空的,不起作用)。这样控制台中不会显示div容器了。


//代替
   

组件

  • 组件 (Component) 是 Vue.js 最强大的功能之一
  • 组件可以扩展 HTML 元素,封装可重用的代

组件注册

全局注册

  • Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象
  • 全局组件注册后,任何vue实例都可以用

组件基础用

     

组件注意事项

  • 组件参数的data值必须是函数同时这个函数要求返回一个对象
  • 组件模板必须是单个根元素
  • 组件模板的内容可以是模板字符串
  
                                

局部注册

  • 只能在当前注册它的vue实例中使用
  
       

Vue 调试工具

Vue组件之间传值

父组件向子组件传值

  • 父组件发送的形式是以属性的形式绑定值到子组件身上。
  • 然后子组件用属性props接收
  • 在props中使用驼峰形式,模板中需要使用短横线的形式字符串形式的模板中没有这个限制
  
   
{{pmsg}}
                         
  

子组件向父组件传值

  • 子组件用$emit()触发事件
  • $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
  • 父组件用v-on 监听子组件的事件
 
   
{{pmsg}}
               
  
  

兄弟之间的传递

  • 兄弟之间传递数据需要借助于事件中心,通过事件中心传递数据
  • 提供事件中心 var hub = new Vue()
  • 传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据)
  • 接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
  • 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
 
   
父组件
   
         
         
  
  

组件插槽

组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力

匿名插槽

  
          有bug发生     有一个警告      
  

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号