欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

3-1-12-Snabbdom 之模块

程序员文章站 2022-07-10 21:49:18
模块snabbdom 的核心库并不能处理元素的属性/样式/事件等,如果处理需要使用模块。常用模块官方提供的 6 个模块attributes设置 DOM 元素的属性,使用 setattribute()处理布尔类型的属性props和 attributes 模块相似,设置 DOM 元素的属性 element[attr] = calue不处理布尔类型的属性class切换类样式注意:给元素设置样式是通过 sel 选择器dataset设置 data-* 的自定义...

模块

snabbdom 的核心库并不能处理元素的属性/样式/事件等,如果处理需要使用模块。

常用模块

官方提供的 6 个模块

  • attributes

    • 设置 DOM 元素的属性,使用 setattribute()
    • 处理布尔类型的属性
  • props

    • 和 attributes 模块相似,设置 DOM 元素的属性 element[attr] = calue
    • 不处理布尔类型的属性
  • class

    • 切换类样式
    • 注意:给元素设置样式是通过 sel 选择器
  • dataset

    • 设置 data-* 的自定义属性
  • eventlisteners

    • 注册和移除事件
  • style

    • 设置行内样式,支持动画
    • delayed/remove/destroy

模块的使用

模块使用步骤

  • 导入需要的模块
  • init() 中注册模块
  • 使用 h() 函数创建 VNode 的时候,可以把第二个参数设置为对象,其他参数往后移
import { init, h } from "snabbdom"
// 1. 导入模块
import style from "snabbdom/modules/style"
import eventlistener from "snabbdom/modules/eventlisteners"
// 2. 注册模块
let patch = init([
  style,
  eventlistener
])
// 3. 使用 h() 函数的第二个参数传入模块需要的数据(对象)
let vnode = h("div#container", {
  style: {
    // 如果是两个单词的属性,需要使用驼峰式
    backgroundColoer: 'red'
  },
  on: {
    click: eventHandler
  }
}, [
  h("h1", "大标题"),
  h("p", "标题描述")
])

function eventHandler () {
  console.log("点击我了")
}

let app = document.querySelector("#app")

patch(app, vnode)

本文地址:https://blog.csdn.net/fangxuan1509/article/details/107315773