1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app">
  13.         <button @click="btnClick">click</button>
  14.         <button @click="btnReset">reset</button>
  15.         <p><input type="text" v-model="message"></p>
  16.         <p>{{message}}</p>
  17.     </div>
  18.     <script src="./vue.js"></script>
  19.     <script>
  20.         let vm = new Vue({
  21.             el: "#app",
  22.             data() {
  23.                 return {
  25.                     message: ''
  26.                 }
  27.             },
  28.             methods: {
  29.                 btnClick() {
  30.                     this.message = 'bbbbbbbbbb'
  31.                 },
  32.                 btnReset() {
  33.                     Object.assign(this.$data, this.$options.data.call(this))
  34.                 }
  35.             },
  36.         })
  37.     </script>
  38. </body>
  40. </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. ERP的协议管理的操作与设计--开源软件诞生27

    赤龙ERP协议与订单进阶讲解--第27篇 用日志记录"开源软件"的诞生 [进入地址 点亮星星]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/re ...

  2. UNIX系统编程：文件IO（I）

    1.标准C库中访问文件用的是文件指针FILE *(stdin,stdout,stderr):对于linux系统编程而言,所有对设备或文件的操作都是通过文件描述符进行的 2.当打开或者创建一个文件的时候 ...

  3. 基于FFmpeg的Dxva2硬解码及Direct3D显示（一）

    目录 前言 名词解释 代码实现逻辑 前言 关于视频软解码的资料网上比较多了,但是关于硬解可供参考的资料非常之有限,虽然总得来说软解和硬解的基本逻辑一样,但是实现细节上的差别还是比较多的.虽然目前功能已 ...

  4. Adaboost算法的一个简单实现——基于《统计学习方法(李航)》第八章

    最近阅读了李航的<统计学习方法(第二版)>,对AdaBoost算法进行了学习. 在第八章的8.1.3小节中,举了一个具体的算法计算实例.美中不足的是书上只给出了数值解,这里用代码将它实现一 ...

  5. My SQL的基本操作（总结）

    My SQL的基本操作(总结) 因为本人目前是学生,前一段时间因为一些原因没有按时更新博客,今天我来总结一下My SQL的基本操作. 一.下载与安装 windows版本MySQL下载地址: http: ...

  6. 状态模式(Established close)

    状态模式(Established close) 引子 铁扇公主:以前陪我看月亮的时候,叫人家小甜甜,现在新人胜旧人了,叫人家牛夫人! 定义 Allow an object to alter its b ...

  7. 莫小安 Linux下Redis的安装与配置

    转载自--Linux下Redis的安装与配置 redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了 memcached的不足,它 ...

  8. LeetCode 中等题解（4）

    40 组合总和 II Question 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates ...

  9. NO.A.0002——Git简史及安装教程/创建本地仓库/提交项目到本地仓库/误删还原

    一.Git简史及同类产品对比: 1.git简史:        同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linu ...

  10. Postman实用小技巧

    Postman使用小技巧 软件测试工程师 张江涛 废话就不多说了,直奔主题,这里的技巧就以对话方式来阐述吧. 问:公司的环境也太多了吧,本地.开发.测试以及生产环境,这么多环境,每次使用的时候都要来回 ...