开篇
数据绑定
| 属性名 | 说明 |
|---|---|
| 单向绑定(v-bind) | 数据只能从data中流向页面。 |
| 双向绑定(v-model) | 数据不仅能从data流向页面，还可以从页面流向data |
备注：
1.双向绑定一般都用在表单类元素上（如：input,radio,select…)
2.v-model:value 可以简写为v-model，因为v-model默认就是收集value的值。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">
<!-- 普通写法 -->
单向数据绑定: <input type="text" v-bind:value="name" /><br>
双向数据绑定: <input type="text" v-model:value="name" /><br>
<!-- 简写 -->
单向数据绑定: <input type="text" :value="name" /><br>
双向数据绑定: <input type="text" v-model="name" /><br>
<h2 v-bind:x="name">你好</h2>
<!-- <h2 v-model:x="name">你好</h2> -->
<!-- 错误 因为v-model只能用于表单类元素（输入类元素） -->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el: '#root',
data: {
name: '张三',
}
})
</script>
</html>
页内效果
1、单向数据绑定
图内可以看到，单向数据绑定，在模板中的数据发生变化并不会引起vue实例中的数据变化
双向数据绑定
双向数据绑定中，模板内的值发生改变会映射回vue实例，导致vue实例中的数据发生变化，然后再将变化传回模板，从而影响其他使用已变化数据的变化
补充
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-model缩写
<!-- 完整语法 -->
<a v-model:value="name">...</a>
<!-- 缩写 -->
<a v-model="name">...</a>
感谢浏览，如有问题请及时指正，谢谢💗～～～