<!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. 一：JavaWeb

    1.javaWeb技术体系 2.HTMl 超文本标记语言 (超文本的意思就是除了可以包含文字之外,还可以包含图片链接音乐视频等...) 2.1 HTML网页的组成  (结构:HTML 表现:CSS 行 ...

  2. 使用Ganglia监控系统监控集群(debian)

    ganglia是一个集群监控软件,底层使用RRDTool获得数据. Ganglia分为ganglia-monitor和gmetad两部分,前者运行在集群每个节点上(被监控机器)收集RRDTool产生的 ...

  3. C语言设计模式（应用）

    #ifndef QUEUE_H #define QUEUE_H #define QUEUE_SIZE 10 typedef struct queue { int buffer[QUEUE_SIZE]; ...

  4. MathType怎么写分段函数？

    分段函数是数学里面特有的一种函数,它是对于自变量x的不同的取值范围,有着不同的解析式的函数.它的特点就是有一个大括号,然后有至少2个函数解析式,写这样的函数离不开专业的公式编辑器,下面就来学习具体编辑 ...

  5. Vegas常见问题解答，如何处理预览卡顿

    制作视频并不是简单的拼拼凑凑,很多时候我们都需要给视频加上一些视频特效或转场等效果,如果只是图片素材的话,还不会出现卡顿的现象,但是当你给视频添加了效果后,在预览窗口看到的就是非常卡顿了.除了本身计算 ...

  6. tcp连接的三次握手

    为什么tcp连接需要三次握手才能建立连接 主要是为了初始化sequence number的初始值,通信的双方要互相通知双方的sequence number,这个要作为以后数据通信的序号,保证以后不会因 ...

  7. jenkins.war的配置

    目录 1.进入root用户-------切换到home下的用户-----然后查看lsx下的文件 2.移动jenkins.war 3.找到刚才移动的文件 4.启动tomcat 5.在浏览器登录 6.进入 ...

  8. Java基础教程——字符流

    字符流 字节流服务文本文件时,可能出现中文乱码.因为一个中文字符可能占用多个字节. 针对于非英语系的国家和地区,提供了一套方便读写方式--字符流. java.io.Reader java.io.Wri ...

  9. css实现元素环形旋转

    元素中心旋转效果记录 先上代码 //css代码 .header{   -webkit-animation:rotateImg 1s linear infinite;   /*rotateImg对应下方 ...

  10. sqli-labs-master less05 前 知识点学习

    1. left()函数: left(a,b)从左侧截取a的前b位,正确则返回1,错误则返回0 例: select left(database(),1)='s'   结果返回1 先查询数据库 datab ...