vue 中 this.$options.data() 重置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="btnClick">click</button>
<button @click="btnReset">reset</button>
<p><input type="text" v-model="message"></p>
<p>{{message}}</p>
</div>
<script src="./vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
message: ''
}
},
methods: {
btnClick() {
this.message = 'bbbbbbbbbb'
},
btnReset() {
Object.assign(this.$data, this.$options.data.call(this))
}
},
})
</script>
</body>
</html>
注意：这里的data是一个函数，而不是对象
vue 中 this.$options.data() 重置的更多相关文章
- vue中组件的data为什么是一个函数
1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
- 在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket
WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现 ...
- Vue中data重置问题
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...
- Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- Vue beaforeCreate时获取data中的数据
异步获取即:通过 $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...
- vue中把props中的值赋值给data
vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...
- vue中，怎么给data对象添加新的属性？（尼玛这面试题居然让我给碰上了。。。。）
Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
随机推荐
- Nagios 告警配置太复杂？CA简单实现Nagios自定义多功能告警
Nagios 是一个插件式的监控系统,可以监控服务的运行状态和网络信息等,并能监视所指定的本地或远程主机参数以及服务,同时提供异常告警通知功能等.Nagios 支持客户端的数据采集,通过编写客户端插件 ...
- 安装 node-sass4.x 遇到的问题及解决方案
今天在维护一个基于 vue-cli 创建的旧项目,在安装依赖时会报错,具体信息如下: gyp ERR! stack Error: spawn C:\Program Files (x86)\Micros ...
- gdb 调试 报 stepping until--- has no line number information
gdb 经常用 ,但今天使用gdb 调试的时候, break 打断点, 结果也没有打出 哪一行的信息,就只是提示一个具体地址. 使用单步调试 结果爆出 stepping until exit from ...
- nginx&http 第三章 ngx HTTP 请求的 11 个处理阶段
nginx 将一个 HTTP 请求分为 11 个处理阶段,这样做让每一个 HTTP 模块可以仅仅专注于完成一个独立.简单的功能,而一个请求的完整处理过程可以由多个 HTTP 模块共同合作完成将一次 H ...
- 第一章epoll
IO多路复用之epoll总结 1.基本知识 epoll是在2.6内核中提出的,是之前的select和poll的增强版本.相对于select和poll来说,epoll更加灵活,没有描述符限制.epoll ...
- 有名管道FIFO进程间数据传输实例
紧接着上面一个博客的简单介绍,下面进行一个没有血缘关系的进程间通信的实例,实现文件拷贝传输. 有两个进程,一个主要是fifow进程:读文件Makefile内容,写入管道;另一个进程fifor:读管道内 ...
- powershell过杀软工具-xencrypt
在红队攻击中,绕杀软是一个比较常见的技术.对于绕过杀软的方法,有基于黑白名单的,有基于shellloader的,也有基于加密与混淆的.最近在发现了这样一款过杀软的工具,推荐给有缘人,嘻嘻 ...
- [i春秋]“百度杯”CTF比赛 十月场-Hash
前言 涉及知识点:反序列化.代码执行.命令执行 题目来自:i春秋 hash 如果i春秋题目有问题可以登录榆林学院信息安全协会CTF平台使用 或者利用本文章提供的源码自主复现 [i春秋]"百 ...
- 在Camtasia中对录制视频进行转换编辑
在我们的日常学习生活中,课件是我们经常需要接触的东西,一份精美的课件会让我们的学习生活看起来不那么的枯燥,学习也就不会索然无味.当精美的课件加上老师的谆谆教导,学习便会变成一件非常简单的事情.将课件制 ...
- 记 · ElemetnUI + Vue v-if 视图切换踩过的那些坑
使用EleUI 做一个用户登录窗口,需要用v-if 动态切换三个表单:手机登录.账密登录和密码找回.其中需要实现一个重置表单的功能,但其间出了一些小bug.密码找回表单中有三个表单项,手机登录和账密登 ...