vue v-model与:model

在Vue中，v-model和:model都是用于实现双向数据绑定的指令，但它们有一些区别。

v-model是v-model:value的缩写形式，通常用于表单元素上。它可以实现子组件到父组件的双向数据绑定，即数据不仅能从data流向页面，还可以从页面流向data。v-model默认收集的是表单元素的value值，所以在使用v-model时，不需要显式地指定value属性。

而:model指令是用于绑定数据到组件的属性上，可以用于非表单元素。它可以实现父组件到子组件的双向数据绑定。使用:model时，需要显式地指定要绑定的属性。

下面是一个使用v-model和:model的示例：

1. 使用v-model实现双向数据绑定（表单元素）：

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

2. 使用:model实现双向数据绑定（非表单元素）：

<template>
  <div>
    <custom-component :model="message"></custom-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import CustomComponent from './CustomComponent.vue';

export default {
  components: {
    CustomComponent
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上述示例中，第一个示例使用v-model实现了一个文本框的双向数据绑定，用户在文本框中输入的值会实时更新到data中的message属性，并且message属性的值也会实时显示在页面上。

第二个示例中，使用了自定义组件CustomComponent，并通过:model将message属性绑定到了该组件的model属性上，实现了父组件到子组件的双向数据绑定。