vue数据双向绑定是什么意思（vue数据双向绑定）
导读：5.Vue数据双向绑定 5.1.什么是双向数据绑定...
5.Vue数据双向绑定
5.1.什么是双向数据绑定Vue.js 是一个 MVVM 框架 ，即数据双向绑定 ，即当数据发生变化的时候 ，视图也就发生变化 ，当视图发生变化的时候 ，数据也会跟着同步变化 。这也算是 Vue.js 的精髓之处了 。
值得注意的是 ，我们所说的数据双向绑定 ，一定是对于 UI 控件来说的 ，非 UI 控件不会涉及到数据双向绑定 。单向数据绑定是使用状态管理工具的前提 。如果我们使用 vuex ，那么数据流也是单项的 ，这时就会和双向数据绑定有冲突 。
5.2 怎么实现双向数据绑定 v-model v-model 指令可以在表单及元素上创建双向数据绑定 。它会根据控件类型自动选取正确的方法来更新元素 。它负责监听用户的输入事件以更新数据 ，并对一些极端场景进行一些特殊处理 。 注意：v-model 会忽略所有表单元素的 value 、checked 、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源 。你应该通过 JavaScript 在组件的 data 选项中声明初始值!测试案例：
用非v-model方式的时候 ，是不能双向绑定的
<div id="app"> <input type="text" :value="msg" /> <div>{{msg}}</div> </div> <script> var app = new Vue({ el:#app, data:{ msg:"hello" } }); </script>改为v-model方式绑定：
<div id="app"> <input type="text" v-model="msg" /> <div>{{msg}}</div> </div> <script> var app = new Vue({ el:#app, data:{ msg:"hello" } }); </script>案例2：
<div id="app"> <select v-model="selected"> <option value="">--请选择--</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="武汉">武汉</option> </select> <p>{{selected}}</p> </div> <script> var v= new Vue({ el:"#app", data:{selected: } }); </script>案例3：
<div id="app"> <input type="checkbox" id="jack" value="吃饭" v-model="checkedValues"> <label for="jack">吃饭</label> <input type="checkbox" id="john" value="睡觉" v-model="checkedValues"> <label for="john">睡觉</label> <input type="checkbox" id="mike" value="打豆豆" v-model="checkedValues"> <label for="mike">打豆豆</label> <div>选中的值: </div> <ul> <li v-for="item in checkedValues" >{{item}}</li> </ul> </div> <script type="text/javascript"> var v = new Vue({ el: #app, data: { checkedValues:[] } }); </script>6.Vue事件绑定
v-on v-on:事件名 = “方法名 ” 简写方式： @事件名 = “方法名 ” 事件名有哪些： click|keydown|keyup|mouseover|mouseout|自定义事件名测试案例1：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <input type="button" value="-" v-on:click="sub" /> <input type="text" v-model="num" /> <input type="button" value="+" @click="plus" /> </div> <script> var v=new Vue({ el:"#app", data:{ num:1 }, methods:{ sub:function(){ if(this.num>0) this.num-=1; }, plus:function(){ this.num=parseInt(this.num)+1; } } }) </script> </body> </html>v-on： 可以简化为@
<div id="app"> <input type="button" value="-" @click="sub" /> <input type="text" v-model="count" /> <input type="button" value="+" @click="plus" /> </div>测试案例2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> 输入分数 ，按回车 ，显示等级 <div id="app"> <div>等级:{{level}}</div> <input type="text" v-on:keyup.enter="show" v-model="score" /> </div> <script type="text/javascript"> var app = new Vue({ el: #app, data: { level: , score: }, methods: { show: function () { if(this.score>=0 && this.score<60) this.level="D"; else if(this.score<80) this.level="C"; else if(this.score<90) this.level="B"; else this.level="A"; } } }) </script> </body> </html>测试结果：
7.综合案例
根据前面学习的vue的基础语法和事件绑定 ，实现一下商品的查询 ，添加 ，删除功能 。测试案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <div style="text-align: center;" > <div > <h3 >商品操作页面</h3> </div> <div style="text-align:center"> 序号：<input type="text" v-model="id"/> 名称：<input type="text" v-model="name"/> 价格：<input type="text" v-model="price"/> <input type="button" value="添加" @click="add()"/><br/> 搜索：<input type="text" v-model="searchKey"/> </div> </div> <table style="width: 800px; margin-left: auto; margin-right: auto;" border="1"> <header> <tr> <td>序号</td> <td>名称</td> <td>价格</td> <td>操作</td> </tr> </header> <tbody> <tr v-for="item in search(searchKey)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <!-- .prevent阻止事件的默认行为 ，这里是阻止超链接默认的跳转功能--> <td><a href="" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript"> var vm = new Vue({ el : "#app", data:{ id:, name:, searchKey:, list:[ {id:1,name:T恤,price:100}, {id:2,name:西装,price:500}, {id:3,name:连衣裙,price:200}, {id:4,name:衬衫,price:150} ] }, methods:{ add(){ //将表单中的数据组装为一个商品对象 var good = { id:this.id, name:this.name, price:this.price }; //存入list中 this.list.push(good); //将表单数据清空 this.id = this.name = this.price=; }, del(id){ //遍历查询 var index = this.list.findIndex( item => { if(id == item.id){ return true; } }); this.list.splice(index,1);//JavaScript中的splice(index,i)方法：从已知数组的index下标开始 ，删除i个元素 }, search(searchKey){ //filter() 方法创建一个新的数组 ，新数组中的元素是数组中符合条件的所有元素组合而成 return this.list.filter(item => { if(item.name.includes(searchKey)){ return item; } }); } } }) </script> </body> </html>测试结果：
8.Template 标签
template的作用是模板占位符 ，可帮助我们包裹元素 ，但在循环过程当中 ，template不会被渲染到页面上比如：
<div v-for="value in user">{{value}}</div>这个循环是做在div上面的 ，如果需要循环的内容很多 ，比如span标签也要做这个循环
<div v-for="value in user">{{value}}</div> <span v-for="value in user">{{value}}</span>则需要把循环提出来,但这样会多一个div标签
<div v-for="value in user"> <div>{{value}}</div> <span>{{value}}</span> </div>如果不想多一个标签 ，可以用template ，template不会渲染到页面上
<template v-for="value in user"> <div>{{value}}</div> <span>{{value}}</span> </template>另外 ，template可以用到制作模板 。
方法1：直接在vue对象中定义
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--这里会显示template里的内容--> <div id="app"> </div> <script> var v = new Vue({ el:"#app", data:{ msg:"daimenglaoshi" }, template:"<div>{{msg}}</div>"//模板中只能有一个根元素 }); </script> </body> </html>方法2：写在template标签里
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--这里会显示template标签里的内容--> <div id="app"></div> <!--此处template标签必须在vue绑定的元素外面定义 ，并且在页面中不显示下面的template标签中的内容--> <template id="temp"> <div>{{msg}}<div> </template> <script> let vm = new Vue({ el:"#app", data:{ msg:"daimenglaoshi" }, //通过该属性可以将自定义的template属性中的内容全部替换app的内容 ，并且会覆盖里面原有的内容 ，并且在查看dom结构时没有template标签 template:"#temp" }); </script> </body> </html>方法3：写在script标签里
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"></div> <script type="x-template" id="temp"> <div>{{msg}}</div> </script> <script> var v = new Vue({ el:"#app", data:{ msg:"daimenglaoshi" }, template:"#temp"//模板中只能有一个根元素 }); </script> </body> </html>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！