一、单向数据绑定和双向数据
1.解释
单向数据绑定（v-bind）：数据只能从data流向页面。
双向数据绑定 （v-model）：数据不仅能从data流向页面，还可以从页面流向data。
表单类需要与用户交互的情况，大多数使用双向数据绑定也就是v-model指令
v-model：value可以简写为v-model
2.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 普通写法
单向数据绑定：<input type="text" v-bind:value="name"></br>
双向数据绑定：<input type="text" v-model:value="name"> -->
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"></br>
双向数据绑定：<input type="text" v-model="name">
</div>
</body>
<script type="text/javascript">
//创建vue实例
new Vue({
el: '#root', //el用于指定当前vue为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指定的容器使用，值我们暂时先写成一个对象
name: 'Felix',
}
})
</script>
</html>
3.具体分析
代码运行情况
我们按F12查看网页，点击这个地方
选择vue，需要提前在浏览器装好vue的插件，才会有这个选项
点击root
我们就可以进行值的修改了
我们修改data的值为“Felix123”，我们发现单向数据绑定和双向数据绑定输入框都发生了变化，说明无论是单向数据绑定还是双向数据绑定都能根据data去修改页面的值
我们再尝试去修改输入框，首先修改单向数据绑定输入框，修改为“Felix456”，我们发现双向数据绑定和data的值都没有发生改变，这说明单向数据绑定只有data到页面这一个方向的值绑定，数据只能从data流向页面
我们再尝试修改双向数据绑定的输入框的值，修改为“Felix789”，我们发现data和单向数据绑定输入框的值都发生了变化，首先双向数据绑定输入框的值发生改变，引起data值发生改变，说明双向绑定，数据能从data流向页面，也能从页面流向data；因为data发生了变化从而单向数据绑定输入框的值也发生了变化，再次说明了单向数据绑定，数据只能从data流向页面
4.总结
单向数据绑定（v-bind）：数据只能从data流向页面。
双向数据绑定 （v-model）：数据不仅能从data流向页面，还可以从页面流向data。
另外：
当使用 v-bind 时，可省略 v-bind，简写为 :value=“name” ，
当使用 v-model时，可省略 :value，简写为 v-model=“name” ，
<!-- 常规写法-->
单向数据绑定：<input type="text" v-bind:value="name"></br>
双向数据绑定：<input type="text" v-model:value="name">
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"></br>
双向数据绑定：<input type="text" v-model="name">
扫一扫
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
