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 ...
随机推荐
- JS函数命名规范
语法规范: 任何合法的javascript标识符都可以作为函数的名称. 约定俗成的内容:(非ECMAScript语法,但是为了便于开发者理解和识别,约定的函数命名规范.) 命名方法: 小驼峰式命名法 ...
- linux后台开发常用调试工具
一.编译阶段 nm 获取二进制文件包含的符号信息 strings 获取二进制文件包含的字符串常量 strip ...
- 使用GitHub API上传文件及GitHub做图床
本文介绍GitHub API基础及上传文件到仓库API,并应用API将GitHub作为图床 GitHub API官方页面 GitHub API版本 当前版本为v3,官方推荐在请求头中显示添加版本标识. ...
- tensorflow的tfrecord操作代码与数据协议规范
tensorflow的数据集可以说是非常重要的部分,我认为人工智能就是数据加算法,数据没处理好哪来的算法? 对此tensorflow有一个专门管理数据集的方式tfrecord·在训练数据时提取图片与标 ...
- spring 2.5 基础知识和与其他框架的集成
spring环境搭建: 一:导入spring2.5所需的包,在classpath目录下建一个名为"beans.xml"模板文件: <?xml version="1. ...
- JVM初识
先来看一张图 首先jvm是什么? jvm是java运行环境的一部分,是一种以软件模式虚拟出来的一个计算机系统. 如上图所示,JVM 主要分为三个子系统:类加载器.运行时数据区和执行引擎. 类加载器子系 ...
- 信息论-Turbo码学习
1.Turbo码: 信道编码的初期:分组码实现编码,缺点有二:只有当码字全部接收才可以开始译码,需要精确的帧同步时延大,增益损失多 解决方案:卷积码:充分利用前一时刻和后一时刻的码组,延时小,缺点:计 ...
- Python_爬虫_Scrapy设置代理
0.检测IP是否可用 # -*- coding: UTF-8 -*- from urllib import request if __name__ == "__main__": # ...
- GreenDao增删改查
3.GreenDao增删改查 (1)插入 常用API //这是最简单的插入语句,新增一行数据,返回值为行号 public long insert(T entity) //传递一个数组,新增多行数据 p ...
- Spring扩展之一：ApplicationContextInitializer
1.介绍 用于Spring容器ConfigurableApplicationContext在刷新之前初始化Spring的回调接口. 通常在需要对应用程序上下文进行一些编程初始化的Web应用程序中使用. ...