首页 > 其他分享 >vue 响应性代码demo

vue 响应性代码demo

时间:2024-04-13 10:11:55浏览次数:18  
标签:function vue demo runFun 响应 window .__ user fun

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <input type="text" inputmode="email" accesskey="b" tabindex="1"> -->
  <h3 id="firstname"></h3>
  <h3 id="lastname"></h3>
  <h3 id="age"></h3>
  <script>
    let user = {
      name: '大海一',
      age: 12
    }
    function getFristName() {
      document.getElementById('firstname').innerText = user.name[0]
    }
    function getLastName() {
      document.getElementById('lastname').innerText = user.name.slice(1)
    }
    function getAge() {
      document.getElementById('age').innerText = user.age
    }
    function observe(obj) {
      for (let key in obj) {
        let initVal = obj[key]
        let keyFuns = []
        Object.defineProperty(obj, key, {
          get() {
            if (window.__fun && !keyFuns.includes(window.__fun)) {
              keyFuns.push(window.__fun)
            }
            return initVal
          },
          set(val) {
            initVal = val
            keyFuns.forEach(fun => fun())
          }
        })
      }
    }
    observe(user)
    function runFun(fun) {
      window.__fun = fun
      fun()
      window.__fun = null
    }
    runFun(getFristName)
    runFun(getLastName)
    runFun(getAge)
  </script>
</body>

</html>

 

标签:function,vue,demo,runFun,响应,window,.__,user,fun
From: https://www.cnblogs.com/howhy/p/18132534

相关文章

  • node笔记1:vue+node+mongodb+studio 3T创建登录模块
    1.创建node项目:expressnodenpmipackage.json修改如下代码,便于每次修改代码都可以刷新页面:"scripts":{"start":"node-dev./bin/www"}2.如果配合node设置反向代理;3.添加mongoose模块提供数据库信息:npmimongoose--save4.以登录功能模块为例,项目文件如下:model......
  • VUE2.0版本学习笔记
    VUE2.0版本学习笔记脚手架安装npminstall-g@vue/clivuecreatevue2-practice#选择2.0版本如果执行中遇到错误,yarn的错误certificatehasexpired则执行yarncachecleanyarnconfigsetstrict-sslfalsecdvue2-practicenpmrunserve#初学者建议安装vsco......
  • Springboot2+vue2整合项目
    前端https://blog.csdn.net/m0_37613503/article/details/128961447数据库1.用户表CREATETABLE`x_user`(`id`int(11)NOTNULLAUTO_INCREMENT,`username`varchar(50)NOTNULL,`password`varchar(100)DEFAULTNULL,`email`varchar(50)DEFAULTNULL,`......
  • vue+element ui el-form 阻止表单输入框按回车刷新页面
    表单只有一个元素的时候,回车会触发页面刷新,加上下面这个属性可以解决这个问题@submit.native.prevent给某个el-input添加回车键监听@keyup.enter.native="onSearch"<el-form:model="filters"@submit.native.prevent><el-form-item>......
  • vue tsx 原生属性报错解决方案
    当前依赖├──@vitejs/[email protected]├──@vitejs/[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]├──[email protected]└──[email protected]方法0官方方法,修改tsconfig.json,截止写文章时,这个......
  • 清除vue默认样式
    1:引入reset.scss/***ENGINE*v0.2|20150615*License:none(publicdomain)*/*,*:after,*:before{box-sizing:border-box;outline:none;}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr......
  • vue一键复制
    vue一键复制copyToClipboard(textToCopy){//navigatorclipboard需要https等安全上下文if(navigator.clipboard&&window.isSecureContext){//navigatorclipboard向剪贴板写文本returnnavigator.clipboard.writeText(textToCopy);......
  • 设置vue项目运行后,自行打开浏览器。src起别名
    1:设置vue项目运行后,自行打开浏览器找到package.json配置文件 2:src起别名,这样就可以直接找到文件路径,不需要../../的这些繁琐操作。意思直接使用@符号就代表src目录1):在vite.config.ts修改import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//引入n......
  • 02 Vue3核心语法
    选项式APIOptionsAPI和组合式APICompositionAPIVue2的API设计是Options(配置)风格的,就是选项式APIVue3的API设计是Composition(组合)风格的,就是组合式API选项式API的弊端Options类型的API,数据、方法、计算属性等,是分散在:data、methods、computed中的,若想新增或者修改一个需......
  • npm创建vue项目
    使用npm创建vite项目1:npmcreatevite 2:输入项目名称,例如我的项目名称为:whipip 3:选择你要创建项目的类型,我要创建vue项目,就选择Vue 4:选择你要使用的脚本语言 5,即创建完毕 6:安装相关依赖npmi 7:运行项目:npmrundev 8:查看项目 ......