当前位置： 移动技术网 > IT编程>开发语言>Java > 3-1-12-Snabbdom 之模块

3-1-12-Snabbdom 之模块

2020年07月14日  | 移动技术网IT编程  | 我要评论

模块

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网