v-bind

只能实现Vue单项数据绑定

<div id="databaind">
单项数据绑定:<input :value="name" type="text">
</div><script type="text/javascript">new Vue({el:'#databaind',data:{name:'zijun',age:18,url:'https://www.baidu.com',}});</script>

比如说如果我更改input里面的值，input里面的值更改成功了

在控制台打印是这个样子

document.querySelector('input').value
'zijundada'

但是在Vue开发者工具里面我们可以看到，name的属性并没有发生改变，

这就是v-bind的特点，只能实现单项数据绑定

v-model

v-model可以实现数据的双向绑定

双项数据绑定:<input v-model:value="name" type="text"><script type="text/javascript">new Vue({el:'#databaind',data:{name:'xiaojun',age:18,url:'https://www.baidu.com',}});</script>

在控制台打印是这个样子

document.querySelector('input').value
'xiaojun1213'

我们更改input里面的值，在vue开发者工具可以看到，name的值也跟着开始进行变化了

错误案例：

<h1 v-model:name="age">hello</h1><script type="text/javascript">new Vue({el:'#databaind',data:{name:'xiaojun',age:18,url:'https://www.baidu.com',}});</script>

上述代码会导致控制台报错

v-model只能应用在表单类元素（输入类元素）上 ,或者这个元素要有value值

总结

v-bind：数据只能从data里面拿取并且渲染到页面

v-model：只要更改数据，data里面的值也会跟着进行变化

v-model:value可以简写为v-model，因为v-model默认收集的就是value值.

Vue学习笔记-Vue数据绑定相关推荐

Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
Vue学习笔记--Vue双向绑定实现原理
我们知道Vue可以实现数据双向绑定,Angular和Vue都是采用的MVVM 模式,意思就是当M(模型层)层数据进行修改时,VM层会监测到变化,并且通知V(视图层)层进行相应的修改,反之修改V层则会通 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...
Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...

Vue学习笔记-Vue数据绑定

v-bind

v-model

错误案例：

总结

Vue学习笔记-Vue数据绑定相关推荐

最新文章

热门文章