<!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() 重置的更多相关文章

  1. vue中组件的data为什么是一个函数

    1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...

  2. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  3. 在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket

    WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现 ...

  4. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  5. Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. Vue beaforeCreate时获取data中的数据

    异步获取即:通过    $this.$nextTick或者settimeout,这连dom都可以拿出来 beforeCreate() { this.$nextTick(function() { con ...

  7. vue中把props中的值赋值给data

    vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...

  8. vue中，怎么给data对象添加新的属性？（尼玛这面试题居然让我给碰上了。。。。）

    Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...

  9. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

随机推荐

  1. 快速熟悉 Oracle AWR 报告解读

    目录 AWR报告简介 AWR报告结构 基本信息 Report Summary Main Report RAC statistics Wait Event Statistics 参考资料 本文面向没有太 ...

  2. 《金融业人工智能实践 》（Hands-On Artificial Intelligence for Banking） 阅读指南 - 第5章

    术语中英互查: Morningstar Style Box - 晨星投资风格箱方法 (该翻译来自于晨星中国官网,权威得不能再权威了 https://cn.morningstar.com/help/da ...

  3. SpringCloud Alibaba+New搭建企业级开发框架（三）：创建New工程

    1.创建父工程:File > New > Project...,选择Maven,Create from archetype不要勾选,点击Next进入下一步,填写工程信息.   image. ...

  4. Android开发-AlertDialog，Progress，ProgressDialog，自定义layout

    AlertDialog 默认样式 单选样式 多选样式 自定义样式 效果图   AlertDialog效果图 class OnClick implements View.OnClickListener ...

  5. ①SpringCloud 实战：引入Eureka组件，完善服务治理

    简介 Netflix Eureka 是一款由 Netflix 开源的基于 REST 服务的注册中心,用于提供服务发现功能.Spring Cloud Eureka 是 Spring Cloud Netf ...

  6. 算法学习笔记：Tarjan算法

    在上一篇文章当中我们分享了强连通分量分解的一个经典算法Kosaraju算法,它的核心原理是通过将图翻转,以及两次递归来实现.今天介绍的算法名叫Tarjan,同样是一个很奇怪的名字,奇怪就对了,这也是以 ...

  7. nginx转发php文件到php-fpm服务器提示502错误

    实验将php文件转发给另一个php-fpm服务器处理的时候,出现了502错误: 检查了nginx错误日志,提示: 2019/08/25 17:54:56 [error] 4742#0: *35 rec ...

  8. 「CERC2017」Donut Drone

    题目链接 洛谷P4739 题目翻译: 你正在模拟无人机探索一个不稳定的环状行星的过程.技术上说,无人机正在穿过一个环形网格---一个在两维上都首尾环绕在一起的矩形网格.格子的行号从上到下依次编号为\( ...

  9. 近50种语言编写的“Hello, World”，你会几种？可不要贪杯哦~

    本文转自公众号CSDN(ID:CSDNnews)作者:Sylvain Saurel,译者:风车云马

  10. 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏（中）

    小伙伴们久等了,在上一篇<[开发板试用报告]用OLED板实现FlappyBird小游戏(上)>中,我们本着拿来主义的原则,成功的让小鸟在OLED屏幕上自由飞翔起来,下面我们将加入按钮交互功 ...