vue数据绑定的几种方式

<div id="app">
  {{ message }}
</div>

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
});
app.mount('#app');

<img v-bind:src="imageSrc">

const app = Vue.createApp({
  data() {
    return {
      imageSrc: 'path/to/image.jpg'
    }
  }
});
app.mount('#app');

<div v-bind:class="{ active: isActive }"></div>

const app = Vue.createApp({
  data() {
    return {
      isActive: true
    }
  }
});
app.mount('#app');

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

const app = Vue.createApp({
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
});
app.mount('#app');

<button v-on:click="increment">Increment</button>

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});
app.mount('#app');

<input v-model="message">

const app = Vue.createApp({
  data() {
    return {
      message: ''
    }
  }
});
app.mount('#app');