moui.js in for javascript es5+es6 专业数据绑定+双向数据思维

最新推荐文章于 2024-05-19 20:49:14 发布

gzwebsj

最新推荐文章于 2024-05-19 20:49:14 发布

阅读量265

点赞数 1

分类专栏： JavaScript 文章标签： javascript js 数据双向数据绑定 moui

本文链接：https://blog.csdn.net/gzwebsj/article/details/99734793

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能介绍：

1.能够快速把数据绑定在一起，利用了json格式去定义数据的类型和属性，满足大部分项目的需要。

2.能够在dom层级上，自定义任何静态标签，只需手动解析和绑定需要的数据。

3.废话不想说太多了，灵活性、兼容性、调试性、优化性、优越性。

我不是程序员，爱好写javascript的人，哈！

使用说明：

1.如何用此数据绑定呢？

在body中添加id“moui”，使得数据绑定在dom层上。丢失此id，无法使用！

<body id=”moui”></body>

2.在页面中任何一处地方加上您的数据，如何加呢？

2.1例子：在<header>此时你在这，加入自己的定义的布局，布局里加上id和“{{数据}}”</header> 代码如下

<header>
    <div id="nav">
        <p>{{title}}</p>
    </div>
</header>

2.2 解析方式：

app ：

固定参数两个 el ：DOM层输入您的元素id | data：你需要绑定的数据

代码如下：

app({
    el: "nav",
    data: {
        title: '标题',
    },
});

app.m.js 下载

GitHub ： https://github.com/qq252454/moui

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

gzwebsj

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

图片上传：base64转file

sunluyi的博客

03-10

11万+

<template> <div class="mine"> <img :src="base64" > </div> </template> <script> export default { data() { return { base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASgAAAEpCAYAAAAgW7+8AAAAAXNSR0IArs4c

Modbus通讯协议

Healer19的博客

06-18

2664

1、Modbus协议简介 Modbus协议是一种已广泛应用于当今工业控制领域的通用通讯协议。通过此协议，控制器相互之间、或控制器经由网络（如以太网）可以和其它设备之间进行通信。 Modbus协议使用的是主从通讯技术，即由主设备主动查询和操作从设备。一般将主控设备方所使用的协议称为Modbus Master，从设备方使用的协议称为Modbus Slave。典型的主设备包括工控机和工业控制器等；典型的从设备如PLC可编程控制器等。 Modbus通讯物理接口可以选用串口（...

参与评论您还未登录，请先登录后发表或查看评论

最全大学专业JS数据

05-28

用户前端包括APP，WEB，小程序等，实现用户专业选取，包含国内主要学科！

双向数据绑定原理ES6

abcquan123的博客

08-31

257

双向数据绑定原理ES6 结合上一篇的原理用ES6的语法再次实现了双向数据绑定，比上一篇更加精简，同时还增加了一层数据代理，代码与代理进行交互，而不是直接访问目标对象有注释，注释不多的地方，上一篇绝对有，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

ES6语法实现数据的双向绑定

做技术，坚持才是最重要的，一时的热情只是暂时的进步

10-13

441

废话不多说，直接上代码，代码有备注！！！方式一：利用 defineProperty 方法 <div><input type="text" placeholder="请输入数据" /></div>  <div class="item-box"></div> <button>重置</button> <script> let btn = document.queryS

29.ES6：表单输入绑定（双向数据绑定）

m0_63953077的博客

10-08

253

ES6：表单输入绑定（双向数据绑定）

使用ES6实现MVVM的双向绑定

CSU_Zipple的博客

07-14

1151

实现Vue数据双向绑定的一些心得创建项目本文github地址：https://github.com/csuZipple/Vue_study 由于项目采用ES6语法进行开发，我们需要构建一个基于webpack的项目 1. npm init -y 2. npm install -D webpack webpack-command 然后创建代码结构,添加webp...

微信小程序CSS组件库moUI-master.zip

09-25

微信小程序CSS组件库moUI是一款专为微信小程序开发设计的前端资源库，它提供了一系列预设的、可复用的CSS样式组件，帮助开发者快速构建美观且功能丰富的用户界面。moUI-master.zip压缩包包含了该组件库的核心源代码...

canvas 制作时钟效果

热门推荐

百九

04-19

2万+

表当前浏览器不支持canvas，请更换浏览器后再试！ digit.js //点阵模型 digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,

ES6基本的语法(六) 实现双向绑定（ES5 写法）

StevenTang957的博客

02-05

311

实现双向绑定（ES5 写法）什么是双向绑定object.defineProperty描述符介绍存取描述符简单的模拟一下双向绑定数组双向绑定什么是双向绑定首先来说一下单向绑定，单向绑定就是把 Model 绑定到 View，当我们用 JS 代码更新 Model 时，View 就会自动更新。有单向绑定，就有双向绑定。如果用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。 object.defineProperty Object.defineProperty 是 ES5 中双向绑定

JS 实现双向数据绑定

qq_40126542的博客

04-11

140

纯js实现双向数据绑定

在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。

09-12

177

对于投票页的选择与取消类似于外卖订单中的选择与取消，本demo没有用到MVC框架，纯js完成。由于数据量过大所以需要完成一个模糊搜索的功能进行选择与取消，所以引入了一个插件（dataTables) 。弹窗的效果直接用了该项目框架里的组件，也可以根据自己的喜好使用弹窗。或者自己写也可以，我是为了省事，哈哈。接下来直接附上源码：点击下载源码效果图：我的个人博客,有空来坐坐 ...

es6 javascript 函数绑定

现在学习也不晚

11-30

2895

箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以 ES7 提出了 “ 函数绑定 ” （ function bind ）运算符，用来取代call、apply、bind调用。虽然该语法还是 ES7 的一个提案，但是 Babel 转码器已经支持。函数绑定运算符是并排的两个双冒号（ :: ），双冒号左边是一个对象，...

nodejs轻量级微服务框架

最新发布

循环博客

05-19

1756

nodejs轻量级微服务框架

项目构建教程：PHP在线音乐解析，免费详细分享过程《三》

循环博客

07-15

786

前端代码：朕奉上，哈哈var app = angular.module('yadamusic',['ng','ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/#/index',{controller:"indexController"}) }) app.controller('ind...

javascript实现数据双向绑定

君子-如兰的博客

12-29

745

Object.defineProperties()方法一次设置或修改多个属性。这个方法接受两个对象参数：第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应。

es6双向数据绑定

weixin_33979203的博客

03-01

525

代码如下 <div id="test"> <input type="text" v-model="name"> name:{{name}} age:{{age}} </div> <script> let el = document.getElementById...

javascript实现数据双向绑定的三种方式

漫长学习路

12-20

9065

前端数据的双向绑定方法前端的视图层和数据层有时需要实现双向绑定(two-way-binding)，例如mvvm框架，数据驱动视图，视图状态机等，研究了几个目前主流的数据双向绑定框架，总结了下。目前实现数据双向绑定主要有以下三种。github演示例子1、手动绑定比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或se

数据动态绑定的简单实现——基于ES5对象的getter/setter机制

weixin_30799995的博客

07-23

142

https://zhuanlan.zhihu.com/p/25003235?refer=e-mill%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A 在双向绑定的简单实现——基于“脏检测”中，我们使用“脏检测”的机制，实现了一个简单的双向绑定计数器。尽管逻辑比较清晰简单，性能也还可以，但每次都遍历DOM节点，也是会有一些性能浪费的。ES5提供了Object.de...

es6 浅度复制解决单层级双向绑定问题

qq_38761664的博客

05-12

710

当我们利用v-bind：来绑定属性向子组件传递对象的时候，有时候我们需要子组件改变的时候不改变父组件的值，一般可以利用JSON.stringify(JSON.parse(jsonstr))将传递来的对象赋值到子组件自己的data，这样做的原理是对传过来的值重新赋予一个空间，从而解决双向绑定。，但是es6有一个深度赋值的方法也可以解决这个问题,let obj= Object.assign({}, ...