<!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. 工具博客转载-ftrace

    https://linux.cn/article-9273-1.html https://lwn.net/Articles/365835/ Documentation/trace/events.txt ...

  2. 【译】Arc 在 Rust 中是如何工作的

    原文标题:How Arc works in Rust 原文链接:https://medium.com/@DylanKerler1/how-arc-works-in-rust-b06192acd0a6 ...

  3. Nacos 多环境配置

    本文探讨Nacos作为配置中心,如何实现不同环境(开发.测试.灰度.正式)的配置管理问题 就像Maven用groupId.artifactId.version三者来定位jar包在仓库中的位置一样,Na ...

  4. linux 更改mysql 数据存储目录

    https://www.cnblogs.com/hellangels333/p/8376177.html  参考位博主的文章,稍做改动 1.检查mysql数据库存放目录 mysql -u root - ...

  5. loadrunner 生成随机参数 Radom相关

    我也是刚开始进入测试行业,不过比较幸运的我之前做过开发,所以对代码比较熟悉,对loadrunner没有进行过系统的学习,也是通过自己的摸索慢慢的积累知识. 今天遇到项目中要我做一个压力测试,其中一些参 ...

  6. CentOS 6.10 安装mysql

    1.检查是否安装有mysql rpm -qa | grep mysql 使用yum remove 包  的方式删除干净 2.下载yum Repository wget -c  http://dev.m ...

  7. vue在移动端使用alloyfinger手势库操作图片拖拽、缩放

    最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放, ...

  8. 掌握这些springboot的配置方式，让你工作效率翻个倍!

    springboot的多种配置方式 java配置主要靠java类和一些注解,比较常用的注解有: @Configuration :声明一个类作为配置类,代替xml文件 @Bean :声明在方法上,将方法 ...

  9. 思维导图软件iMindMap怎么使用

    人人都说,思维导图记忆法实用.可是,我们应该如何使用思维导图呢?又该如何从思维小白摇身一变成为逻辑大神呢?俗话说,心急吃不了热豆腐,让我们一步一步来,慢慢接触使用思维导图吧. 小编作为"过来 ...

  10. 14.java设计模式之命令模式

    基本需求: 一套智能家电,有照明灯.风扇.冰箱.洗衣机,我们只要在手机上安装app就可以控制对这些家电工作 这些智能家电来自不同的厂家,我们不想针对每一种家电都安装一个App分别控制,我们希望只要一个 ...