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

目录

• 事件修饰符
• 按键修饰符
• 自定义按键修饰符别名
• 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发生
    有一个警告
    
  

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