v-model和:区别

v-model和:model的区别如下：
1. v-model是用来在form表单中双向绑定数据的，或者在父子组件之间数据双向绑定；而:model是v-bind:model的简写，用于子组件中引用父组件中的数据。
2. v-model只能用于表单元素，例如input、select、textarea等；而:model可以用于任何元素。
3. v-model只能在Vue组件中使用；而:model可以在Vue组件和普通HTML标签中使用。

以下是v-model和:model的使用示例：

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

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

<!-- :model示例 -->
<template>
  <div>
    <child-component :model="message"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

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

<!-- 子组件示例 -->
<template>
  <div>
    <input type="text" :value="model" @input="$emit('update:model', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['model']
}
</script>