VUE基础回顾2
1.响应式
vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式。对象的每个属性都会被替换为getter,setter方法。
有两种方式实现data对象的监听
(1)脏检查:通过存储这个对象副本,然后比较两者,但这种方法并不高效。
(2)使用Objectf.defineProperty(),以下是vue的基本思路
const storedData = {};
storedData.useId = data.useId
Object.defineProperty(data,'userId',{
get(){
return storedData.useId;
},
set(value){
console.log('user ID changed!');
storedData.useId = value;
},
configurable:true,
enumerable:true
})
深入了解可查阅vue官方文档。
如何动态添加响应式属性:
getter/setter方法实在初始化时添加的,只有已经存在的属性是响应式的,为对象直接添加新属性,不会使这个属性成为响应式的;
因为es5的限制,vue不能检测到对象的属性添加或删除,只有在data对象上的属性才能使他为响应式的。
(1)最简单的办法是在初始化时定义这个属性
(2)使用object.assign()来创建一个新的对象然后覆盖原有的对象,当需要一次性更新多个属性时,这是最有效的方法
const vm = new Vue({
data: {
formData: {
username: "四海潮生"
}
}
})
vm.formData = Object.assign({},vm.formData,{
name:'some user'
})
(3)vue官方提供的Vue.set(),组件内部this.$set;
两者区别:1.在vue的源码中两者都使用了set函数。区别在于vue.set()是将set函数绑定在vue的构造函数上,this.$set()是将set函数绑定在vue的原型上。
2.vue.set可是设置示例创建后添加的属性,this.$set只能设置实例创建后存在的属性。
设置数组的元素:
不能直接使用索引来设置数组的元素。
可以使用arr.splice()方法来移除旧元素,添加新元素。也可以使用vue.set(arr,2,'bob')
.splice()方法还可以设置数组的长度,但是只能缩短,不能增加。在原生JS中,可以设置长短,自动让空元素填充数组,这种方式不适用于data对象中的数组,因为vue不能检测到该操作对数组的任何更改。
2.双向数据绑定v-model
主要用于表单元素,如input,在input中输入值,绑定在data上的属性值也会随之更新,input也会接收data内的初始值
3.动态设置HTML v-html
v-html的值不管是什么内容都会被直接输出到页面上,不会转义。
慎用此指令,不要将用户输入或用户修改的内容置于v-html中,因为可能将自己暴露在xss的风险中,可能一不小心就允许用户在网站上执行恶意脚本
VUE基础回顾2的更多相关文章
- 自定义指令 VUE基础回顾7
vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue ...
- 一、VUE基础回顾1
1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制 ...
- VUE基础回顾6
1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法. <div ref = "box"></div> 在 ...
- 动画 VUE基础回顾8
过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true& ...
- vue基础回顾 router
vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- Vue基础之插值表达式的另一种用法!附加变量的监听!
Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
随机推荐
- Python 使用scapy 时报:ImportError: cannot import name 'NPCAP_PATH' 解决
解决办法:下载源码 https://github.com/secdev/scapy 下载完成后解压后里面有个scapy文件夹,把这个文件夹替换\Lib\site-packages\ 下的scapy 整 ...
- 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener
使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...
- pg数据库中时间查询的方式
方法一:select * from user_info where create_date>= '2015-07-01' and create_date < '2015-08-15'; 方 ...
- web项目脱敏白名单管理
写在前面 下午没事, 看一下同事写的脱敏白名单管理功能. 所谓的脱敏就是将页面中查询出的信息列表当中的身份证号及手机号等关键信息部分用*号代替.该功能主要思路是新增一个页面用于配置哪些页面以及页面中哪 ...
- python2与python3的区别齐全【整理】
本文链接:https://blog.csdn.net/pangzhaowen/article/details/80650478 展开 一.核心类差异1. Python3 对 Unicode 字符的原生 ...
- Linux(CentOS)安装JDK1.8
1.JDK的RPM包安装方式: https://www.cnblogs.com/hunttown/p/5450463.html 2.JDK的tar包安装方式: 首先,从SUN公司网站下载最新的JDK ...
- java学习摘抄笔记mybaits1
mybatis 第一天 mybatis的基础知识 课程安排: mybatis和springmvc通过订单商品 案例驱动 第一天:基础知识(重点,内容量多) 对原生态jdbc程序(单独使用jdbc开发) ...
- Component 'TABCTL32.OCX'错误
1.Component 'TABCTL32.OCX'错误的处理方法 错误:Component 'TABCTL32.OCX' or one of its dependencies not correct ...
- 【MongoDB学习之二】MongoDB数据库、文档、集合、元数据
环境 MongoDB 4.0 CentOS6.5_x64 一.连接语法格式: mongodb://[username:password@]host1[:port1][,host2[:port2],.. ...
- 【Spring Boot学习之十二】mybatis3 分页打印sql日志
环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 参考: mybatis手册 Mybatis的插件 PageHelper 分页查询使用方法MyBatis中Like语句使 ...