Not much to say, let me show you a small case first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model -->
<input type="text" v-model:value="ModelMessage">{
{ModelMessage}}<br><br>
<!-- v-bind -->
<input type="text" v-bind:value="BindMessage">{
{BindMessage}}<br><br>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
ModelMessage:"你好,我是Model",
BindMessage:"你好,我是Bind",
}
})
</script>
</body>
</html>
Example picture
From this example, we can see that v-model is a two-way binding element. When the value of input is manually changed, ModelMessage will also dynamically change; but v-bind is a single-line binding element, that is, when When manually changing the value of the input box, the value of BindMessage in Vue will not change.
The effect of v-model can be achieved through v-bind and v-on.
<input type="text" v-model:value="ModelMessage">{
{ModelMessage}}<br><br>
Equivalent to
<input type="text" v-bind:value="BindMessage" @input="BindMessage=$event.target.value">{
{BindOnMessage}}<br><br>
In other words, the essence behind v-model is to include two operations,
1. v-bind binds a value attribute;
2. v-on instruction binds v-on event to the current element