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的应用 ...
随机推荐
- vmware ubuntu16 启动蓝屏屏幕闪
vmware ubuntu16 启动蓝屏屏幕闪 虚拟机安装了ubuntu16 desktop,没有关闭自动更新: 结果关机虚拟机时出现等5秒更新,类似win10关机更新: 再开机发现就蓝屏了,多次重启 ...
- apache环境.htaccess设置301跳转及常用.htaccess技巧整理
apache环境.htaccess设置301跳转及常用.htaccess技巧整理 无论是Nginx,还是Apache都各自有优势,对于我们普通用户而言基本上也没有多大的区别.在虚拟主机环境中,基本上都 ...
- paxos(mysql)
https://web.stanford.edu/~ouster/cgi-bin/papers/OngaroPhD.pdf https://raft.github.io/raft.pdf 如何浅显易懂 ...
- fatal error: sys/videoio.h: No such file or directory
Determining if the include file sys/videoio.h exists failed with the following output:Change Dir: /h ...
- 转 Oracle 同一个字段的两值进行加减计算
https://www.cnblogs.com/hjianguo/p/6041617.html 如 病人ID 入院日期 出院日期 00001 2016 ...
- PMP 第6章错题总结
项目进度管理的步骤: 1.项目的商业价值指特定项目的成果能够为相关方带来的有形的或无形的效益. 其中有形的效益包括:股东权益.市场份额.货币资产 无形的效益包括:品牌认知度.商誉.战略一致性等2. ...
- C++内存管理1-64位系统运行32位软件会占用更多的内存吗?
随着大容量内存成为电脑平台常规化的配置,在配置组装机时很多的用户都会选择8GB甚至是16GB的容量规格内存使用在自己的机器上,如果要将这8GB甚至是16GB的内容在系统使用时能充分利用起来的话,你平台 ...
- Windows下启动、重启、停止nginx
在Windows下操作nginx,需要打开cmd 进入到nginx的安装目录下 1.启动nginx: start nginx 或 nginx.exe 2.停止nginx(stop是快速停止nginx, ...
- [ kvm ] 三种基础网络模型创建及分析
1. 前言 最近在模拟生产环境在做测试,本来准备用 vmware 直接来实现的,本着学以致用的道理,选择直接在linux 环境使用 kvm 来模拟测试,遇到的第一个问题就是,网络环境的模拟.这里对比v ...
- 【NPDP笔记】第一章 新产品开发战略
1.1 战略很重要 1.2 战略定义 使命/愿景/核心价值观:成为领导者 公司/经营战略:市场份额扩大10% 创新战略:强调技术,外部合作 职能战略:IT战略,人力资源战略 1.3明确组织方向 组织身 ...