【转】vue中如何实现数据的双向绑定
转载地址:https://www.cnblogs.com/webspace/p/8625143.html
目录
vue中如何实现数据的双向绑定
vue中的指令
v-cloak:
v-model(表单元素设置了之后会忽略掉value,checked,selected)
v-text:代替 {{}} 渲染成文本(不会识别html标签)可以防止网速卡慢时{{}}出现在页面上
v-html:把html字符渲染成html
v-once:只绑定一次(不能写成v-once=”msg”)
v-bind:动态地绑定一个或多个特性
v-for:遍历数组、对象、字符串、数字
条件渲染:v-if v-else-if v-else与v-show
v-show
v-on:监听 DOM 事件(v-on:click可缩写为@click)
自定义指令
vue中的修饰符
表单修饰符
事件修饰符
表单元素双向数据绑定(双向同步)
单选框
复选框
下拉框
Vue中的Class样式与style样式动态绑定(动态的优先级高于原来的)
根据hash实现单页面开发
vue中如何实现数据的双向绑定
实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变)
由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可
let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let input1 = document.getElementById("box2");//视图 //对某一个对象使用了Object.defineProperty方法之后就要写对应的get和set方法了,不然无法像操作普通对象一样访问或者设置它的属性 //此方法不兼容IE8及以下 Object.defineProperty(obj,"name",{configurable:true,//属性是否可删除writable:false,//属性是否可修改enumerable:false,//属性是否可枚举get(){//获取obj的属性名对应的属性值时会调用该方法/*2*/ return temp['name'];},set(val){//设置obj的属性名对应的属性值时会调用此方法//实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变)//由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可/*1、*/ temp.name=val;//实现数据变化视图改变input1.value=val;} }); //为了初始化的时候让视图中(文本框中)有值:出现obj.name说明要访问这个属性就会用到defineProperty中的get方法 input1.value=obj.name; //实现视图改变数据跟着改变 input1.addEventListener("input",function(){obj.name = this.value;//当值变化时会调用set方法 },false);
vue中的指令
dom元素的行间属性,vue提供了内置的指令,必须以v-开头,后面的值均为变量
v-cloak:
消除页面刚加载时会看到{{}}闪一下的效果,可加给最外层的根元素;
//需要添加对应的css样式[v-cloak]{display: none;}
v-model(表单元素设置了之后会忽略掉value,checked,selected)
让表单元素和数据实现双向绑定(映射关系)
<input type="text" v-model="msg">
v-text:代替 {{}} 渲染成文本(不会识别html标签)可以防止网速卡慢时{{}}出现在页面上
{{}} 中的值都会解析成文本内容;
{{msg}}等价于<div v-text="msg"><!--此处不能再写内容,防止出现闪的效果--></div>
v-html:把html字符渲染成html
<div v-html="msg"></div>
v-once:只绑定一次(不能写成v-once=”msg”)
<div v-once>{{msg}}</div>
v-bind:动态地绑定一个或多个特性
// 绑定一个属性 <img v-bind:src="data:imageSrc"> //可缩写为如下形式,此时:src后面的值就可以是变量、表达式、赋值运算、计算、三元运算符(尽量少写逻辑运算) <img :src="data:imageSrc">//此时imageSrc就代表一个变量
v-for:遍历数组、对象、字符串、数字
解决了循环问题,更高效,会在原有的基础上进行修改,会复用原有的结构,不会修改所有DOM
要循环创建哪一个标签就在那一个标签上加v-for,后面的循环最好用in,用of有时会报错循环数组或对象使用v-for指令<div v-for="(val,index) in msg">{{val,index}}//msg为数组时,val为数组中的每一项,index为索引</div> <div v-for="(value,key,index) in msg">{{key}}={{value}}{{index}};//msg为对象时,key为对象中的每个属性名,value为属性值,index为索引</div>
条件渲染:v-if v-else-if v-else与v-show
v-if v-else-if v-else:条件满足才渲染v-if所在标签以及标签内的内容;(操作的是DOM结构)
- 设置条件判断的DOM元素必须是连续的
- 操作的是DOM元素
- key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
- 支持 template 标签
- 频繁的显示和隐藏用v-if会很浪费性能(操作的是DOM结构),此时要用v-show(操作的是CSS样式)
<div id="app">
<button @click="flag=!flag">请点击</button>
//template标签是vue提供给我们的没有任何实际意义,用来包裹元素用的(v-show不支持template标签)
<template v-if="flag">
<label>登录</label>
<input type="text" key="1">//key 管理复用的元素 若不想复用DOM元素,只需要给相应的DOM元素增加不同的key值
</template>
<template v-else>
<label>注册</label>
<input type="text" key="2">
</template>
</div>
let vm=new Vue({
el:'#app',
data:{
flag:true
}
});
v-show
条件满足才让v-show所在标签以及标签内的内容显示(操作的是元素的css样式),不支持 template 标签
<input type="text" v-show="flag">//flag为true时,input框才显示
v-on:监听 DOM 事件(v-on:click可缩写为@click)
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码(在
methods
对象中定义的方法,而且methods中的方法名不能和data中的变量名一样)
<div v-on:click ="fn1('zhaosi,$event')">{{msg}}</div><div @click ="fn1('zhaosi,$event')">{{msg}}</div>//上面的简写 方法后面可加()可不加。不加的话默认会传入事件对象e,加()代表要传参数,如果要用事件对象,则需要传$event
自定义指令
可通过在vue实例的directives:{}属性中赋予自定义指令意义
<div id="app"><button v-color="flag">变色</button></div>let vm=new Vue({el:'#app',data:{flag:true},directives:{//在这里赋予对应自定义指令意义//可直接写对应的指令不用写v-color(el,val){//el和val都是默认给的:el指的是指令所绑定的DOM元素,val是一个对象,里面存储的是有关指令的信息,可用val.value获取到指令绑定的变量(或者表达式)所代表的值,这里就是flag所代表的值 'red'el.style.background=val.value;}}});
vue中的修饰符
表单修饰符
v-model.number
:将用户的输入值转为数值类型v-model.lazy
:在表单触发change事件时更新数据,而非触发input事件时更新数据v-model.trim
:自动过滤用户输入的首尾空白字符事件修饰符
@click.stop
:阻止点击事件的传播(往上传播和往下传播都会被阻止)@submit.prevent
:阻止点击提交按钮时的默认行为(阻止事件的默认行为)@click.capture
:点击的时候让事件在捕获阶段执行;@click.once
:只在第一次点击的时候让绑定的事件执行;@click.self
:只有点击的事件源是自己的时候触发事件;(判断事件源)
表单元素双向数据绑定(双向同步)
使用v-model属性可让input中的内容和数据实现双向同步,但是使用了v-model属性之后,input的value、checked、select属性都会失效
<div id="app"><input type="text" v-model="msg"> </div> <script src="vue.js"></script> <script>let vm=new Vue({el:'#app',//vue的属性和方法对哪个DOM根元素起作用(对它的后代元素也起作用)//数据如果data中属性的值是一个数组,如果想改变数组中内容,只能使用原生的会修改原数组的方法进行修改,普通的 数组[索引]=值 不行;data:{//写在data中的属性都会挂载到当前实例上msg:'zhufeng'}});console.log(vm.msg);//'zhufeng' </script>
单选框
对于单选框和复选框来说,加了v-mdel属性后,初始设置的value属性不会失效;
<div id="app"><input type="radio" v-model="msg" value="男">男<input type="radio" v-model="msg" value="女">女{{msg}}</div>let app3=new Vue({el:'#app',data:{msg:'男'//默认选中的项,值与value的值对应,点击女的时候msg就会动态改为女}});
复选框
单个复选框:
<div id="app">//复选框中加了v-model后value依然可用<input type="checkbox" v-model="msg"></div>let app3=new Vue({el:'#app',data:{//如果是复选框且只有一个的时候,会把msg的值转化为布尔值,如果为true,代表选中msg:false//为false时代表默认不选中}});
多个复选框,需要绑定到同一个数组,而且要给input设置初始value值,为了在后面选中的时候获取到对应的选中框的值
<div id="app">//复选框中加了v-model后value依然可用<input type="checkbox" v-model="msg" value="吃饭">吃饭<input type="checkbox" v-model="msg" value="睡觉">睡觉<input type="checkbox" v-model="msg" value="敲代码">敲代码{{msg}}</div>new Vue({el: '#app',data: {msg: [] //此处的msg需要是一个数组}})
下拉框
<div id="app">//加了multiple后就变为多选框,用ctrl+左键点击多选,msg也要换为一个数组<select v-model="msg" multiple>//加了disabled时候用户就不能选中此项了//option中的value是给写代码的人看的<option value="0" disabled>请选择地区</option><option value="1">北京</option><option value="2">上海</option><option value="3">浙江</option></select>{{msg}}//如果option的value属性不写,则取的是option中的内容</div>let app3=new Vue({el:'#app',data:{msg:'0'//默认选中的某一项,值与每一个option的value值对应}});
Vue中的Class样式与style样式动态绑定(动态的优先级高于原来的)
:class=”{}”或者:class=”[]:
通过:class=”{}”或者:class=”[]来动态的绑定class样式,与原来的class样式不冲突。
有两种方式:
1、对象的方式绑定
2、数组的方式绑定
<div id="app"> <!--以对象的方式动态绑定class样式:当flag为true时,z样式生效。y样式不生效--><div class="x" :class="{z:flag,y:false}">我的世界</div> <!--以数组的方式动态绑定class样式:y,z两个样式都会生效--><div class="x" :class="[y,z]">我的世界</div></div>let vm=new Vue({el:'#app',data:{flag:true}});
:style=”{}”或者:style=”[]”:绑定行内的样式
通过上述的方式来动态绑定行内的样式
<div id="app">//第一种是对象的方式<div :style="{backgroundColor:'red',color:'pink'}">我是谁</div> //第二种是数组的方式<div :style="[str1,str2]">我的世界</div></div>let vm=new Vue({el:'#app',data:{str1:{backgroundColor:'blue'},str2:{color:'yellow'}}});
根据hash实现单页面开发
通过hash记录跳转的路径(可以产生历史管理)
浏览器自带的历史管理方法history(history.pushState(),push到哪里就跳转到哪里),可能会导致404错误(因为用户可能会随意输入路径)
开发时使用hash的方式,上线的时候使用history的方式
[使用hash存储]
//存储:存储的时候要把存储的对象转换成字符串localStorage.setItem('todo',JSON.stringify(obj)); //获取:获取的时候要把字符串转换成对象 JSON.parse(localStorage.getItem('todo'));
作者:壹笑倾人城
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
【转】vue中如何实现数据的双向绑定相关推荐
- 【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
- Vue中如何进行数据可视化大屏展示
Vue中如何进行数据可视化大屏展示 在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环.通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策.在Vue ...
- 高德地图 Vue 中 加载 数据可视化 Loca 的方式
高德地图 Vue 中 加载 数据可视化 Loca 的方式 今天想用 Loca 试试如何的,结果怎么都加载不上,我的代码是这样的 AMapLoader.load({key: "这个就不展示了& ...
- Vue专题(一)聊一聊双向绑定
双向绑定(响应式) 了解Vue中如何实现数据的响应式系统,从而达到数据驱动视图. 一.数据驱动视图? 大胆的一句话概括:视图因为它依赖的数据的变化二变化,即: UI = render(state) s ...
- vue3数据的双向绑定
vue3关于数据的双向绑定 一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
- React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
- AngularJS数据的双向绑定
数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controlle ...
- 【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定 一.通过自定义事件 二.通过v-model 三.通过.sync修饰符 四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
- Vue中实现父子组件的数据的双向绑定(vue.sync的用法)
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的 问题描述: 问题场景就是子组件传递数据给父 ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
最新文章
- ROS之py文件权限
- Biztalk 2006 adapter的开发比2004容易的多
- vCenter Server Appliance 5.5忘记root密码
- MyEclipse 2017(英文版)安装教程
- HotSpot的-XshowSettings标志的简单性和价值
- lintcode433 岛屿的个数
- 每日站立会议个人博客二
- Delphi String的散漫记录,真是知识无数,陷阱无数(转)
- 东软是如何看待“人与资产”管理的转型
- iptv管理系统php制作,云水日记-双子星IPTV管理系统搭建教程
- Qt软件的发展历史及优势特点
- 基于Ingress实现灰度发布(金丝雀发布)和蓝绿发布
- 嵌入式linux:通过qemu模拟mini2440开发环境
- 职场的技术人如何做好一个公众号?
- survival | 生存分析(5):加速失效时间模型(Accelerated Failure Time Model)
- 【BZOJ1014】【JSOI2008】火星人prefix Splay处理区间,hash+dichotomy(二分)check出解
- 我的家用户外监控摄像头的选购和安装记录
- Deepin15.8系统下安装QorIQ Linux SDK v2.0 yocto成功完美运行的随笔
- 浅析微服务架构应该在什么时候采用
- 如何快速将pdf转换成excel