[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"3759979":3},{"type_of":4,"id":5,"title":6,"description":7,"readable_publish_date":8,"slug":9,"path":10,"url":11,"comments_count":12,"public_reactions_count":12,"collection_id":13,"published_timestamp":14,"language":15,"subforem_id":16,"positive_reactions_count":12,"cover_image":17,"social_image":18,"canonical_url":19,"created_at":20,"edited_at":13,"crossposted_at":13,"published_at":14,"last_comment_at":14,"reading_time_minutes":21,"tag_list":22,"tags":23,"body_html":28,"body_markdown":29,"user":30},"article",3759979,"Vue v-bind to React: How does VuReact handle it?","VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In...","May 27","vue-v-bind-to-react-how-does-vureact-handle-it-456i","/smirk9581/vue-v-bind-to-react-how-does-vureact-handle-it-456i","https://dev.to/smirk9581/vue-v-bind-to-react-how-does-vureact-handle-it-456i",0,null,"2026-05-27T01:29:00Z","en",1,"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgkj7x7ay3abbhanydwa.png","https://media2.dev.to/dynamic/image/width=1200,height=627,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxgkj7x7ay3abbhanydwa.png","https://vureact.top/en/guide/semantic-comparison/template/v-bind.html","2026-05-27T00:31:02Z",4,"webdev, javascript, vue, react",[24,25,26,27],"webdev","javascript","vue","react","\u003Cp>\u003Ca href=\"https://vureact.top/en/guide/introduction.html\" target=\"_blank\" rel=\"noopener noreferrer\">VuReact\u003C/a> is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common \u003Ccode>v-bind\u003C/code>/\u003Ccode>:\u003C/code> directive is compiled into React code by VuReact.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"before-we-start\" href=\"#before-we-start\">\n  \u003C/a>\n  Before We Start\n\u003C/h2>\n\n\u003Cp>To keep the examples easy to read, this article follows two simple conventions:\u003C/p>\n\n\u003Col>\n\u003Cli>All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\u003C/li>\n\u003Cli>The discussion assumes you are already familiar with Vue 3's \u003Ccode>v-bind\u003C/code> directive usage.\u003C/li>\n\u003C/ol>\n\n\u003Ch2>\n  \u003Ca name=\"compilation-mapping\" href=\"#compilation-mapping\">\n  \u003C/a>\n  Compilation Mapping\n\u003C/h2>\n\n\u003Ch3>\n  \u003Ca name=\"vbind-basic-attribute-binding\" href=\"#vbind-basic-attribute-binding\">\n  \u003C/a>\n  v-bind / :: Basic attribute binding\n\u003C/h3>\n\n\u003Cp>\u003Ccode>v-bind\u003C/code> (shorthand \u003Ccode>:\u003C/code>) is Vue's directive for dynamically binding HTML attributes, component \u003Ccode>props\u003C/code>, \u003Ccode>class\u003C/code>, and \u003Ccode>style\u003C/code>.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><img\u003C/span> \u003Cspan class=\"na\">:src=\u003C/span>\u003Cspan class=\"s\">\"imageUrl\"\u003C/span> \u003Cspan class=\"na\">:class=\u003C/span>\u003Cspan class=\"s\">\"imageCls\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">img\u003C/span> \u003Cspan class=\"na\">src\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">imageUrl\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">imageCls\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, Vue's \u003Ccode>:src\u003C/code> and \u003Ccode>:class\u003C/code> directives are compiled into React's standard attribute syntax. VuReact adopts a \u003Cstrong>direct attribute compilation strategy\u003C/strong>, converting template directives into React's JSX attributes. This \u003Cstrong>fully preserves Vue's attribute binding semantics\u003C/strong> — dynamically binding variable values to element attributes.\u003C/p>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"dynamic-class-and-style-binding\" href=\"#dynamic-class-and-style-binding\">\n  \u003C/a>\n  Dynamic class and style binding\n\u003C/h3>\n\n\u003Cp>Vue supports complex \u003Ccode>class\u003C/code> and \u003Ccode>style\u003C/code> binding expressions. VuReact handles these complex scenarios through runtime helper functions.\u003C/p>\n\n\u003Ch4>\n  \u003Ca name=\"dynamic-class-binding\" href=\"#dynamic-class-binding\">\n  \u003C/a>\n  Dynamic class binding\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">:class=\u003C/span>\u003Cspan class=\"s\">\"['card', active && 'is-active', error ? 'has-error' : '']\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">dir\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">className\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">dir\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">cls\u003C/span>\u003Cspan class=\"p\">([\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">card\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">active\u003C/span> \u003Cspan class=\"o\">&&\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">is-active\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"nx\">error\u003C/span> \u003Cspan class=\"p\">?\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">has-error\u003C/span>\u003Cspan class=\"dl\">'\u003C/span> \u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"dl\">''\u003C/span>\u003Cspan class=\"p\">])\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Ch4>\n  \u003Ca name=\"dynamic-style-binding\" href=\"#dynamic-style-binding\">\n  \u003C/a>\n  Dynamic style binding\n\u003C/h4>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">:style=\u003C/span>\u003Cspan class=\"s\">\"{ color: textColor, fontSize: size + 'px', 'background-color': bgColor }\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">dir\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"na\">style\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">dir\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">style\u003C/span>\u003Cspan class=\"p\">({\u003C/span> \u003Cspan class=\"na\">color\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">textColor\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"na\">fontSize\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">size\u003C/span> \u003Cspan class=\"o\">+\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">px\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">,\u003C/span> \u003Cspan class=\"na\">backgroundColor\u003C/span>\u003Cspan class=\"p\">:\u003C/span> \u003Cspan class=\"nx\">bgColor\u003C/span> \u003Cspan class=\"p\">})\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the examples show, complex class and style bindings are compiled using the \u003Ca href=\"https://runtime.vureact.top/en/guide/utils/v-cls.html\" target=\"_blank\" rel=\"noopener noreferrer\">dir.cls()\u003C/a> and \u003Ca href=\"https://runtime.vureact.top/en/guide/utils/v-style.html\" target=\"_blank\" rel=\"noopener noreferrer\">dir.style()\u003C/a> helper functions. VuReact adopts a \u003Cstrong>complex binding runtime processing strategy\u003C/strong>, converting Vue's complex expressions into runtime function calls. This \u003Cstrong>fully preserves Vue's dynamic styling semantics\u003C/strong>.\u003C/p>\n\n\u003Cp>\u003Cstrong>How the runtime helper functions work\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cp>\u003Cstrong>\u003Ccode>dir.cls()\u003C/code>\u003C/strong>:\u003C/p>\n\n\u003Cul>\n\u003Cli>Handles multiple class formats including arrays, objects, and strings\u003C/li>\n\u003Cli>Automatically filters falsy values (\u003Ccode>false\u003C/code>, \u003Ccode>null\u003C/code>, \u003Ccode>undefined\u003C/code>, \u003Ccode>''\u003C/code>)\u003C/li>\n\u003Cli>Deduplicates repeated class names\u003C/li>\n\u003Cli>Generates the final className string\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>\u003Ccode>dir.style()\u003C/code>\u003C/strong>:\u003C/p>\n\n\u003Cul>\n\u003Cli>Handles object-format styles\u003C/li>\n\u003Cli>Automatically converts kebab-case to camelCase (\u003Ccode>background-color\u003C/code> → \u003Ccode>backgroundColor\u003C/code>)\u003C/li>\n\u003Cli>Handles values with units (automatically appends \u003Ccode>px\u003C/code>, etc.)\u003C/li>\n\u003Cli>Generates a React-compatible style object\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Compilation strategy details\u003C/strong>:\u003Cbr>\n\u003C/p>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"c1\">// Vue: :class=\"{ active: isActive, 'text-danger': hasError }\"\u003C/span>\n\u003Cspan class=\"c1\">// React: className={dir.cls({ active: isActive, 'text-danger': hasError })}\u003C/span>\n\n\u003Cspan class=\"c1\">// Vue: :class=\"[isActive ? 'active' : '', errorClass]\"\u003C/span>\n\u003Cspan class=\"c1\">// React: className={dir.cls([isActive ? 'active' : '', errorClass])}\u003C/span>\n\n\u003Cspan class=\"c1\">// Vue: :style=\"style\"\u003C/span>\n\u003Cspan class=\"c1\">// React: style={dir.style(style)}\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"parameterless-vbind-object-spreading\" href=\"#parameterless-vbind-object-spreading\">\n  \u003C/a>\n  Parameterless v-bind: Object spreading\n\u003C/h3>\n\n\u003Cp>Vue supports parameterless \u003Ccode>v-bind\u003C/code> for spreading an entire object as element attributes.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><Comp\u003C/span> \u003Cspan class=\"na\">v-bind=\u003C/span>\u003Cspan class=\"s\">\"props\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Click\u003Cspan class=\"nt\"></Comp>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"k\">import\u003C/span> \u003Cspan class=\"p\">{\u003C/span> \u003Cspan class=\"nx\">dir\u003C/span> \u003Cspan class=\"p\">}\u003C/span> \u003Cspan class=\"k\">from\u003C/span> \u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"s1\">@vureact/runtime-core\u003C/span>\u003Cspan class=\"dl\">'\u003C/span>\u003Cspan class=\"p\">;\u003C/span>\n\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nc\">Comp\u003C/span> \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">...\u003C/span>\u003Cspan class=\"nx\">dir\u003C/span>\u003Cspan class=\"p\">.\u003C/span>\u003Cspan class=\"nf\">keyless\u003C/span>\u003Cspan class=\"p\">(\u003C/span>\u003Cspan class=\"nx\">props\u003C/span>\u003Cspan class=\"p\">)\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Click\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nc\">Comp\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>As the example shows, parameterless \u003Ccode>v-bind\u003C/code> is compiled using the \u003Ca href=\"https://runtime.vureact.top/en/guide/utils/v-keyless.html\" target=\"_blank\" rel=\"noopener noreferrer\">dir.keyless()\u003C/a> helper function with the object spread syntax. VuReact adopts an \u003Cstrong>object spread compilation strategy\u003C/strong>, converting Vue's object binding into React's object spread. This \u003Cstrong>fully preserves Vue's object attribute binding semantics\u003C/strong>.\u003C/p>\n\n\u003Cp>\u003Cstrong>The role of the \u003Ccode>dir.keyless()\u003C/code> helper function\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Attribute conflict resolution\u003C/strong>: Handles conflicts between object properties and existing attributes\u003C/li>\n\u003Cli>\n\u003Cstrong>Special attribute conversion\u003C/strong>: Automatically converts \u003Ccode>class\u003C/code> → \u003Ccode>className\u003C/code>, \u003Ccode>for\u003C/code> → \u003Ccode>htmlFor\u003C/code>, etc.\u003C/li>\n\u003Cli>\n\u003Cstrong>Style object handling\u003C/strong>: Recognizes and correctly processes style objects\u003C/li>\n\u003Cli>\n\u003Cstrong>Event handling\u003C/strong>: Identifies and converts event attributes (\u003Ccode>@click\u003C/code> → \u003Ccode>onClick\u003C/code>)\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"boolean-attribute-binding\" href=\"#boolean-attribute-binding\">\n  \u003C/a>\n  Boolean attribute binding\n\u003C/h3>\n\n\u003Cp>Vue has special handling for boolean attributes, and VuReact preserves this semantics.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><button\u003C/span> \u003Cspan class=\"na\">:disabled=\u003C/span>\u003Cspan class=\"s\">\"isLoading\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Submit\u003Cspan class=\"nt\"></button>\u003C/span>\n\u003Cspan class=\"nt\"><input\u003C/span> \u003Cspan class=\"na\">:checked=\u003C/span>\u003Cspan class=\"s\">\"isChecked\"\u003C/span> \u003Cspan class=\"nt\">/>\u003C/span>\n\u003Cspan class=\"nt\"><option\u003C/span> \u003Cspan class=\"na\">:selected=\u003C/span>\u003Cspan class=\"s\">\"isSelected\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Option\u003Cspan class=\"nt\"></option>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">button\u003C/span> \u003Cspan class=\"na\">disabled\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">isLoading\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Submit\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">button\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">input\u003C/span> \u003Cspan class=\"na\">checked\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">isChecked\u003C/span>\u003Cspan class=\"si\">}\u003C/span> \u003Cspan class=\"p\">/>\u003C/span>\n\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">option\u003C/span> \u003Cspan class=\"na\">selected\u003C/span>\u003Cspan class=\"p\">=\u003C/span>\u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"nx\">isSelected\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Option\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">option\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"dynamic-attribute-name-binding\" href=\"#dynamic-attribute-name-binding\">\n  \u003C/a>\n  Dynamic attribute name binding\n\u003C/h3>\n\n\u003Cp>Vue supports using dynamic expressions as attribute names. While not recommended, VuReact handles it correctly.\u003C/p>\n\n\u003Cul>\n\u003Cli>Vue\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight html\">\u003Ccode>\u003Cspan class=\"nt\"><div\u003C/span> \u003Cspan class=\"na\">:[dynamicAttr]=\u003C/span>\u003Cspan class=\"s\">\"value\"\u003C/span>\u003Cspan class=\"nt\">>\u003C/span>Content\u003Cspan class=\"nt\"></div>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cul>\n\u003Cli>Compiled React\n\u003C/li>\n\u003C/ul>\n\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight jsx\">\u003Ccode>\u003Cspan class=\"p\"><\u003C/span>\u003Cspan class=\"nt\">div\u003C/span> \u003Cspan class=\"si\">{\u003C/span>\u003Cspan class=\"p\">...{\u003C/span> \u003Cspan class=\"p\">[\u003C/span>\u003Cspan class=\"nx\">dynamicAttr\u003C/span>\u003Cspan class=\"p\">]:\u003C/span> \u003Cspan class=\"nx\">value\u003C/span> \u003Cspan class=\"p\">}\u003C/span>\u003Cspan class=\"si\">}\u003C/span>\u003Cspan class=\"p\">>\u003C/span>Content\u003Cspan class=\"p\"></\u003C/span>\u003Cspan class=\"nt\">div\u003C/span>\u003Cspan class=\"p\">>\u003C/span>\n\u003C/code>\u003C/pre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\">\u003Ctitle>Enter fullscreen mode\u003C/title>\n    \u003Cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\">\u003C/path>\n\u003C/svg>\n\n    \u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\">\u003Ctitle>Exit fullscreen mode\u003C/title>\n    \u003Cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\">\u003C/path>\n\u003C/svg>\n\n\u003C/div>\n\u003C/div>\n\u003C/div>\n\n\n\n\u003Cp>\u003Cstrong>Compilation strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Computed property name\u003C/strong>: Uses the object computed property syntax \u003Ccode>{ [key]: value }\u003C/code>\n\u003C/li>\n\u003Cli>\n\u003Cstrong>Object spread\u003C/strong>: Applies to the element via the object spread syntax\u003C/li>\n\u003C/ol>\n\n\n\u003Chr>\n\n\u003Ch3>\n  \u003Ca name=\"compilation-strategy-summary\" href=\"#compilation-strategy-summary\">\n  \u003C/a>\n  Compilation strategy summary\n\u003C/h3>\n\n\u003Cp>VuReact's v-bind compilation strategy demonstrates a \u003Cstrong>complete attribute binding conversion capability\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>Basic attribute mapping\u003C/strong>: Precisely maps Vue attribute bindings to React JSX attributes\u003C/li>\n\u003Cli>\n\u003Cstrong>Complex style handling\u003C/strong>: Supports complex class and style bindings through runtime helper functions\u003C/li>\n\u003Cli>\n\u003Cstrong>Object spread support\u003C/strong>: Fully supports parameterless v-bind object spread semantics\u003C/li>\n\u003Cli>\n\u003Cstrong>Boolean attribute handling\u003C/strong>: Correctly handles the special behavior of boolean attributes\u003C/li>\n\u003Cli>\n\u003Cstrong>Dynamic attribute names\u003C/strong>: Supports dynamic expressions as attribute names\u003C/li>\n\u003Cli>\n\u003Cstrong>Component props conversion\u003C/strong>: Correctly handles props passing between components\u003C/li>\n\u003C/ol>\n\n\u003Cp>\u003Cstrong>Performance optimization strategy\u003C/strong>:\u003C/p>\n\n\u003Col>\n\u003Cli>\n\u003Cstrong>On-demand imports\u003C/strong>: The \u003Ccode>dir\u003C/code> helper is only imported when complex bindings are used\u003C/li>\n\u003Cli>\n\u003Cstrong>Cache optimization\u003C/strong>: Intelligently caches the processing results of identical expressions\u003C/li>\n\u003Cli>\n\u003Cstrong>Compile-time optimization\u003C/strong>: For simple expressions, generates inline logic directly\u003C/li>\n\u003C/ol>\n\n\u003Cp>VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite attribute binding logic. The compiled code preserves Vue's semantics and functionality while following React's attribute handling best practices, keeping the migrated application fully capable of UI presentation.\u003C/p>\n\n\u003Ch2>\n  \u003Ca name=\"related-links\" href=\"#related-links\">\n  \u003C/a>\n  Related Links\n\u003C/h2>\n\n\u003Cul>\n\u003Cli>Docs: \u003Ca href=\"https://vureact.top/en/guide/semantic-comparison/template/v-bind.html\" target=\"_blank\" rel=\"noopener noreferrer\">https://vureact.top/en/guide/semantic-comparison/template/v-bind.html\u003C/a>\n\u003C/li>\n\u003Cli>GitHub: \u003Ca href=\"https://github.com/vureact-js/core\" target=\"_blank\" rel=\"noopener noreferrer\">https://github.com/vureact-js/core\u003C/a>\n\u003C/li>\n\u003C/ul>\n\n","[VuReact](https://vureact.top/en/guide/introduction.html) is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common `v-bind`/`:` directive is compiled into React code by VuReact.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n2. The discussion assumes you are already familiar with Vue 3's `v-bind` directive usage.\n\n## Compilation Mapping\n\n### v-bind / :: Basic attribute binding\n\n`v-bind` (shorthand `:`) is Vue's directive for dynamically binding HTML attributes, component `props`, `class`, and `style`.\n\n- Vue\n\n```html\n\u003Cimg :src=\"imageUrl\" :class=\"imageCls\" />\n```\n\n- Compiled React\n\n```jsx\n\u003Cimg src={imageUrl} className={imageCls} />\n```\n\nAs the example shows, Vue's `:src` and `:class` directives are compiled into React's standard attribute syntax. VuReact adopts a **direct attribute compilation strategy**, converting template directives into React's JSX attributes. This **fully preserves Vue's attribute binding semantics** — dynamically binding variable values to element attributes.\n\n---\n\n### Dynamic class and style binding\n\nVue supports complex `class` and `style` binding expressions. VuReact handles these complex scenarios through runtime helper functions.\n\n#### Dynamic class binding\n\n- Vue\n\n```html\n\u003Cdiv :class=\"['card', active && 'is-active', error ? 'has-error' : '']\" />\n```\n\n- Compiled React\n\n```jsx\nimport { dir } from '@vureact/runtime-core';\n\n\u003Cdiv className={dir.cls(['card', active && 'is-active', error ? 'has-error' : ''])} />\n```\n\n#### Dynamic style binding\n\n- Vue\n\n```html\n\u003Cdiv :style=\"{ color: textColor, fontSize: size + 'px', 'background-color': bgColor }\" />\n```\n\n- Compiled React\n\n```jsx\nimport { dir } from '@vureact/runtime-core';\n\n\u003Cdiv style={dir.style({ color: textColor, fontSize: size + 'px', backgroundColor: bgColor })} />\n```\n\nAs the examples show, complex class and style bindings are compiled using the [dir.cls()](https://runtime.vureact.top/en/guide/utils/v-cls.html) and [dir.style()](https://runtime.vureact.top/en/guide/utils/v-style.html) helper functions. VuReact adopts a **complex binding runtime processing strategy**, converting Vue's complex expressions into runtime function calls. This **fully preserves Vue's dynamic styling semantics**.\n\n**How the runtime helper functions work**:\n\n1. **`dir.cls()`**:\n   - Handles multiple class formats including arrays, objects, and strings\n   - Automatically filters falsy values (`false`, `null`, `undefined`, `''`)\n   - Deduplicates repeated class names\n   - Generates the final className string\n\n2. **`dir.style()`**:\n   - Handles object-format styles\n   - Automatically converts kebab-case to camelCase (`background-color` → `backgroundColor`)\n   - Handles values with units (automatically appends `px`, etc.)\n   - Generates a React-compatible style object\n\n**Compilation strategy details**:\n\n```jsx\n// Vue: :class=\"{ active: isActive, 'text-danger': hasError }\"\n// React: className={dir.cls({ active: isActive, 'text-danger': hasError })}\n\n// Vue: :class=\"[isActive ? 'active' : '', errorClass]\"\n// React: className={dir.cls([isActive ? 'active' : '', errorClass])}\n\n// Vue: :style=\"style\"\n// React: style={dir.style(style)}\n```\n\n---\n\n### Parameterless v-bind: Object spreading\n\nVue supports parameterless `v-bind` for spreading an entire object as element attributes.\n\n- Vue\n\n```html\n\u003CComp v-bind=\"props\">Click\u003C/Comp>\n```\n\n- Compiled React\n\n```jsx\nimport { dir } from '@vureact/runtime-core';\n\n\u003CComp {...dir.keyless(props)}>Click\u003C/Comp>\n```\n\nAs the example shows, parameterless `v-bind` is compiled using the [dir.keyless()](https://runtime.vureact.top/en/guide/utils/v-keyless.html) helper function with the object spread syntax. VuReact adopts an **object spread compilation strategy**, converting Vue's object binding into React's object spread. This **fully preserves Vue's object attribute binding semantics**.\n\n**The role of the `dir.keyless()` helper function**:\n\n1. **Attribute conflict resolution**: Handles conflicts between object properties and existing attributes\n2. **Special attribute conversion**: Automatically converts `class` → `className`, `for` → `htmlFor`, etc.\n3. **Style object handling**: Recognizes and correctly processes style objects\n4. **Event handling**: Identifies and converts event attributes (`@click` → `onClick`)\n\n---\n\n### Boolean attribute binding\n\nVue has special handling for boolean attributes, and VuReact preserves this semantics.\n\n- Vue\n\n```html\n\u003Cbutton :disabled=\"isLoading\">Submit\u003C/button>\n\u003Cinput :checked=\"isChecked\" />\n\u003Coption :selected=\"isSelected\">Option\u003C/option>\n```\n\n- Compiled React\n\n```jsx\n\u003Cbutton disabled={isLoading}>Submit\u003C/button>\n\u003Cinput checked={isChecked} />\n\u003Coption selected={isSelected}>Option\u003C/option>\n```\n\n---\n\n### Dynamic attribute name binding\n\nVue supports using dynamic expressions as attribute names. While not recommended, VuReact handles it correctly.\n\n- Vue\n\n```html\n\u003Cdiv :[dynamicAttr]=\"value\">Content\u003C/div>\n```\n\n- Compiled React\n\n```jsx\n\u003Cdiv {...{ [dynamicAttr]: value }}>Content\u003C/div>\n```\n\n**Compilation strategy**:\n\n1. **Computed property name**: Uses the object computed property syntax `{ [key]: value }`\n2. **Object spread**: Applies to the element via the object spread syntax\n\n---\n\n### Compilation strategy summary\n\nVuReact's v-bind compilation strategy demonstrates a **complete attribute binding conversion capability**:\n\n1. **Basic attribute mapping**: Precisely maps Vue attribute bindings to React JSX attributes\n2. **Complex style handling**: Supports complex class and style bindings through runtime helper functions\n3. **Object spread support**: Fully supports parameterless v-bind object spread semantics\n4. **Boolean attribute handling**: Correctly handles the special behavior of boolean attributes\n5. **Dynamic attribute names**: Supports dynamic expressions as attribute names\n6. **Component props conversion**: Correctly handles props passing between components\n\n**Performance optimization strategy**:\n\n1. **On-demand imports**: The `dir` helper is only imported when complex bindings are used\n2. **Cache optimization**: Intelligently caches the processing results of identical expressions\n3. **Compile-time optimization**: For simple expressions, generates inline logic directly\n\nVuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite attribute binding logic. The compiled code preserves Vue's semantics and functionality while following React's attribute handling best practices, keeping the migrated application fully capable of UI presentation.\n\n## Related Links\n\n- Docs: \u003Chttps://vureact.top/en/guide/semantic-comparison/template/v-bind.html>\n- GitHub: \u003Chttps://github.com/vureact-js/core>\n",{"name":31,"username":32,"twitter_username":13,"github_username":32,"user_id":33,"website_url":34,"profile_image":35,"profile_image_90":36},"Ryan John","smirk9581",3937044,"https://github.com/smirk9581","https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png","https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3937044%2F4b72d2cd-9432-46d4-924e-332cd54382c4.png",1780059473233]