👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

0.官方文档

1.事件绑定

1.1vue的事件绑定v-on

Vue.js 提供了非常方便的事件绑定机制，允许你监听 DOM 事件并在触发时执行一些 JavaScript 代码。Vue 通过 v-on 指令来监听 DOM 事件，并可以缩写为 @ 符号。v-on 指令后面可以跟随要监听的事件名（无需 on 前缀），并可以接收一个方法名作为参数，该方法会在事件触发时执行。如果你既需要访问事件对象，又需要传递额外的参数，可以通过 $event 特殊变量来访问原生 DOM 事件。

javascript 复制代码

<template>  
  <div>  
    <!-- 访问事件对象并传递额外参数 -->  
    <button @click="handleClick('Hello Vue!', $event)">点击我</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    handleClick(message, event) {  
      alert(message); // 显示 "Hello Vue!"  
      console.log(event); // 访问原生 DOM 事件对象  
    }  
  }  
}  
</script>

访问原生 DOM 事件，在某些情况下，你可能需要阻止事件的默认行为。例如，在表单提交时，你可能希望阻止页面刷新并使用Ajax来提交数据。

1.2react的事件绑定

在React中，事件绑定是通过在JSX元素上设置事件处理器（event handlers）来实现的。这些事件处理器本质上是JavaScript函数，它们在特定事件（如点击、鼠标移入、键盘按键等）发生时被调用。React使用了一种称为"驼峰命名法"（camelCase）的命名约定来指定事件处理器，这与HTML中的命名方式（如onclick）有所不同。

javascript 复制代码

function MyComponent(props) {  
  // 假设这是从props中传递过来的一个值  
  const userId = props.userId;  
  
  function handleClick(userId, event) {  
    console.log(`用户ID为${userId}的按钮被点击了！`, event);  
  }  
  
  // 使用箭头函数来传递userId  
  return <button onClick={(event) => handleClick(userId, event)}>点击我</button>;  
}

在这个例子中，props是传递的参数，event是原生DOM事件对象

2.属性绑定

2.1vue的属性绑定v-bind

Vue中的属性绑定是Vue.js框架提供的一种机制，它允许开发者将Vue实例中的数据动态地绑定到HTML元素的属性上。这种机制通过Vue的模板语法实现，使得数据的更新能够自动反映到DOM上，从而实现了数据的双向绑定和视图的自动更新。

Vue中属性绑定的基本语法是使用v-bind指令，但在实际开发中，由于v-bind的使用非常频繁，Vue允许使用简写语法:来代替v-bind。

这个属性绑定是单向的，绑定的使data中的数据，跟随这data中数据的变化而变化如果绑定样式的话就是根据样式属性变化而变化，不能从html修改而改变data的数据，就是不适用于表单填值

javascript 复制代码

<!-- 使用v-bind指令 -->  
<div v-bind:id="dynamicId">测试</div>  
  
<!-- 使用简写语法 -->  
<div :id="dynamicId">测试</div>

Vue对class和style的绑定提供了特殊的支持，允许开发者以对象或数组的形式来动态地绑定它们。这样子的话就可以动态样式，比如说那个动态选中，也可以具有多个样式

javascript 复制代码

<div :class="{ active: isActive }">测试</div>
<div :class="[activeClass, errorClass]">测试</div>

Vue的属性绑定功能非常强大，广泛应用于各种场景，如：

根据用户权限动态显示或隐藏页面元素。

根据用户输入动态改变表单元素的属性（如disabled、readonly等）。

根据组件的状态动态改变元素的样式（通过class或style绑定）。

2.2react的属性绑定

React中的属性绑定是React框架的核心特性之一，它允许开发者将组件的状态（state）和属性（props）动态地绑定到组件的模板（JSX）上，从而实现数据的实时更新和视图的自动渲染。

绑定基本属性在React中，你可以通过大括号{}将JavaScript表达式嵌入到JSX中，从而实现属性的绑定。例如，绑定一个字符串到元素的title属性：

javascript 复制代码

class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = {  
      title: "提示文字"  
    };  
  }  
  
  render() {  
    return <div title={this.state.title}>鼠标悬停查看提示</div>;  
  }  
}

在这个例子中，title属性的值被绑定到了组件的state中的title属性上。当state中的title发生变化时，视图也会自动更新。

绑定类名（className）和样式（style）在React中，HTML的class属性需要被改写为className，而内联样式（inline styles）则需要通过对象字面量的形式来绑定。例如：

javascript 复制代码

class App extends React.Component {  
  render() {  
    return (  
      <div className="red-text" style={{ color: 'red' }}>这是红色的文字</div>  
    );  
  }  
}

在这个例子中，className被绑定到了一个静态的类名red-text上（实际上，这个类名应该在CSS中定义），而style属性则通过对象字面量的形式绑定了一个内联样式，将文字颜色设置为红色。

3.双向数据绑定

3.1vue的双向数据绑定 v-model

Vue.js 的双向数据绑定是其核心特性之一，它允许开发者在视图（View）和模型（Model）之间建立一种动态的、自动的同步关系。当模型的数据发生变化时，视图会自动更新以反映这些变化；同样地，当用户在视图上进行操作时（如输入文本），模型的数据也会自动更新以反映这些操作。这种双向绑定极大地简化了数据的同步工作，使得开发者可以更加专注于业务逻辑的实现。

Vue.js 实现双向数据绑定的机制主要依赖于以下几个核心概念：

1.响应式系统：Vue.js 使用一个响应式系统来跟踪数据的变化。当 Vue 实例被创建时，它会遍历 data 选项中的属性，并使用 Object.defineProperty（在 Vue 3 中使用 Proxy）将它们转换为 getter/setter。这样，Vue 就能追踪到这些属性的访问和修改，并在需要时更新视图。

2.模板引擎：Vue.js 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。模板中的指令（如 v-model、v-bind、v-on 等）用于实现数据的绑定和事件的监听。

3.虚拟 DOM：Vue.js 使用虚拟 DOM 来优化 DOM 的更新。当数据发生变化时，Vue.js 会先更新虚拟 DOM，然后通过高效的算法比较新旧虚拟 DOM 的差异，最后只将差异部分应用到实际的 DOM 上，从而避免不必要的 DOM 操作，提高性能。

4.v-model 指令：v-model 是 Vue.js 中用于实现表单输入和应用状态之间双向数据绑定的指令。它本质上是 v-bind:value 和 v-on:input 的语法糖。在表单输入元素上使用 v-model 时，Vue 会自动监听输入事件，并更新绑定的数据。

javascript 复制代码

<template>  
  <div>  
    <input v-model="message" placeholder="编辑我">  
    <p>Message is: {{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: ''  
    }  
  }  
}  
</script>

在这个例子中，当用户在输入框中输入文本时，message 数据的值会自动更新，同时页面上显示的消息也会实时更新以反映这个变化。

3.2react的双向数据绑定

React 本身并不直接提供类似于 Vue.js 中的 v-model 那样的双向数据绑定指令。React 遵循的是一种更为显式和函数式的数据流模式，其中数据通常是通过 props 从父组件流向子组件，而状态（state）的更新则是通过事件处理器来触发的。然而，你可以通过组合使用 state 和事件处理函数来实现双向数据绑定的效果。在 React 中实现双向数据绑定通常涉及以下几个步骤：

在组件的 state 中维护输入值：首先，你需要在组件的 state 中创建一个属性来存储输入字段的值。

使用受控组件：然后，你可以使用所谓的"受控组件"来将输入字段的值绑定到 state 中的那个属性上。受控组件的 value 属性是由 React 组件的 state 控制的，而不是由 DOM 本身控制的。

为输入字段添加事件处理器：为了更新 state 中的值以反映用户输入的变化，你需要为输入字段添加一个事件处理器（如 onChange），并在事件处理器中更新 state。

javascript 复制代码

import React, { useState } from 'react';  
  
function MyComponent() {  
  // 使用 useState 钩子来在组件中创建和管理 state  
  const [inputValue, setInputValue] = useState('');  
  
  // 定义一个事件处理器，用于在用户输入时更新 state  
  const handleInputChange = (event) => {  
    setInputValue(event.target.value);  
  };  
  
  return (  
    <div>  
      {/* 使用 value 属性将 input 元素的值绑定到 state，并为 input 元素添加 onChange 事件处理器 */}  
      <input type="text" value={inputValue} onChange={handleInputChange} />  
      <p>你输入的内容是：{inputValue}</p>  
    </div>  
  );  
}  
  
export default MyComponent;

在这个例子中，input 元素的值被绑定到了 inputValue 这个 state 属性上。当用户在输入框中输入文本时，onChange 事件会被触发，并调用 handleInputChange 事件处理器。handleInputChange 函数接收一个事件对象作为参数，并使用 event.target.value 来获取用户输入的新值，然后调用 setInputValue 函数来更新 inputValue state 的值。由于 React 的响应式渲染机制，当 inputValue state 更新时，input 元素的值会自动更新以反映新的 state 值，从而实现了双向数据绑定的

vue和react的事件绑定，属性绑定，双向数据绑定

0.官方文档

1.事件绑定

1.1vue的事件绑定v-on

1.2react的事件绑定

2.属性绑定

2.1vue的属性绑定v-bind

2.2react的属性绑定

3.双向数据绑定

3.1vue的双向数据绑定 v-model

3.2react的双向数据绑定