Q-JS:JS 逻辑 → QML 对照表

类型JSQML 对应说明
事件处理element.onclick = fnonClicked: fn点击
事件处理element.addEventListener('click', fn)onClicked: fn事件监听
事件处理element.onmouseoverHoverHandler { onHoveredChanged: }悬停
事件处理element.onchangeonTextChanged / onCheckedChanged / onCurrentIndexChanged值变化
事件处理element.oninputonTextEdited(仅手动输入时触发)手动输入
事件处理element.onfocusonActiveFocusChanged聚焦
事件处理element.onbluronActiveFocusChanged: if (!activeFocus) ...失焦
事件处理element.onscrollFlickable.onContentYChanged滚动
事件处理window.onkeydownKeys.onPressed / Shortcut { sequence: "..." }键盘
事件处理window.onresizeonWidthChanged / onHeightChanged尺寸变化
事件处理window.setTimeout(fn, 1000)Timer { interval: 1000; onTriggered: fn }延时一次
事件处理window.setInterval(fn, 1000)Timer { interval: 1000; repeat: true; onTriggered: fn }循环定时
事件处理new Promise(resolve => ...)无原生对应,用 Qt.callLater() 或信号 + 状态机异步
DOM 操作document.getElementById('id')id: xxx 直接引用获取元素
DOM 操作document.querySelector('.cls')无直接对应(QML 无 CSS 选择器)CSS 选择器
DOM 操作element.classList.add('active')states: [ State { name: "active" } ]添加类
DOM 操作element.classList.remove('active')state: ""移除类
DOM 操作element.style.property = 'value'element.property = value修改样式
DOM 操作element.innerHTML = '...'Text { text: "..." }修改内容
DOM 操作element.setAttribute('data-x', val)property var dataX: val设置属性
DOM 操作element.appendChild(child)children: [ child ] 或动态创建添加子节点
DOM 操作element.removeChild(child)child.destroy()删除子节点
DOM 操作element.cloneNode()Qt.createQmlObject()克隆节点
DOM 操作createElement('div')Qt.createQmlObject('import QtQuick; Rectangle {}', parent)创建元素
DOM 操作element.addEventListener('event', fn)signal.connect(fn)绑定事件
DOM 操作element.removeEventListener('event', fn)signal.disconnect(fn)解绑事件
数据与逻辑变量声明 let x = 10property int x: 10变量
数据与逻辑常量 const PI = 3.14readonly property double pi: 3.14常量
数据与逻辑函数 function add(a, b) { return a + b; }function add(a, b) { return a + b; }函数
数据与逻辑箭头函数 (x) => x * 2直接支持 JS 箭头函数箭头函数
数据与逻辑对象 { name: 'Alice', age: 30 }QtObject { property string name: "Alice"; property int age: 30 }对象
数据与逻辑数组 [1, 2, 3][1, 2, 3](QML 中直接使用 JS 数组)数组
数据与逻辑JSON.parse() / JSON.stringify()直接可用(QML 内嵌 JS 引擎)JSON
数据与逻辑console.log()console.log() 直接可用日志
数据与逻辑Math.random()Math.random() 直接可用数学
数据与逻辑Date.now()Date.now() 直接可用时间
数据与逻辑模板字符串 `Hello ${name}`"Hello " + name(QML 中不支持模板字符串)字符串拼接
数据与逻辑import / exportimport "utils.js" as Utils模块导入

框架对标(Vue → 原生 JS → QML)

Vue 概念剥掉框架后落在原生 JS,再映射到 QML。独立于上方大表。

框架概念 (Vue)原生 JSQML 对应
模板插值el.textContent = titletext: title 属性绑定
v-bind:class="{ active: isActive }"el.classList.toggle('active', isActive)state: isActive ? "active" : ""
v-bind:style="{ color: 'red' }"el.style.color = 'red'color: "red" 直接属性
v-if="cond"if (cond) appendChild(el); else el.remove()visible: cond
v-show="cond"el.style.display = cond ? '' : 'none'opacity: cond ? 1.0 : 0.0
v-for="item in list"for (const item of list) createElement(item)Repeater { model: list }
v-model="input"input.value + input.addEventListener('input', ...)TextField { text: input; onTextChanged: input = text }
computedJS getter get fullName() { return ... }属性绑定表达式
watchObject.defineProperty setter / addEventListener('change', fn)on<Property>Changed 信号处理器
props: ['title']函数参数 / 对象属性property string title
emit('update', val)el.dispatchEvent(new CustomEvent('update', { detail: val }))signal update(val) + onUpdate: ...
<slot>原生 <slot>(Web Component)/ innerHTMLdefault property alias children
provide / inject全局对象 / 模块作用域变量Qt.binding() 或全局单例
nextTick(fn)requestAnimationFrame(fn)Qt.callLater(fn)
this.$refs.myRefdocument.getElementById('myRef')id: myRef 直接引用
this.$router.push('/home')history.pushState({}, '', '/home')stackView.push("HomePage.qml")
this.$store.state.count全局 window.store 对象单例 QtObject 全局状态