Paste_Image.png 在上一篇 零基础打造自己的 js 类库（1） 中，原本只是为了写个小案例，说明一下闭包，js对象的作用。...属性相关：对元素属性进行各种操作 5. 简易ui ： 额，目前只写了一个按钮 我利用零碎时间写了一个礼拜，没想到假模假式的也弄了不少方法了，当然，这些肯定是远远不够的。...var $box = $('.box').eq(0); console.log($box); Paste_Image.png 可见，返回的并不是一个dom对象，而是一个miniQuery对象，具体的原理在上一节中已经阐明...我们来引入css文件： var $box = $('.box').eq(0); $...附上目前的源代码： mui.css .linkbutton { padding: .4em .9em; /*em的好处就是随着父元素的字体大小而变化，当该元素的字体变化时，会自适应*/
前言 在报表数据处理中，Excel公式拥有强大而多样的功能，广泛应用于各个业务领域。无论是投资收益计算、财务报表编制还是保险收益估算，Excel公式都扮演着不可或缺的角色。.../App.css'; import { ThemeProvider } from '@emotion/react'; import { createTheme } from '@mui/material...添加API 在Application类上，添加属性 @RequestMapping("/api").，并添加 calcPersonTax API。...同时，我们还需要创建两个类，CalcParameter和CalcResult。...另外，本文中分享的代码并不是最符合实际工作中的要求，读者还可以从以下角度去优化自己的代码。 收入类型可以抽成枚举，这样维护和使用起来更容易。
当时的版本是基于gatsby以及MUI构建而成。 由于是基于Jamstack理念而构建的这个网站，网站是从零开始构建的，包括UI。...并没有使用一些博客类的网站生成工具，比如著名的hexo以及hugo等。...而React与Vue的这两个框架的一个最大区别在于，React是一个核心类库，而Vue是一整套解决方案。...前端的CSS的技术发展也非常灵活，除了原始的CSS以外，发展出了less,sass等带有一定编程能力的CSS框架。 上次使用的MUI，其实是React的一个UI框架，并不属于CSS层级的框架。...最开始也是一个前端的程序员朋友在一次聊天时，无意间谈及并推荐了这个CSS框架。tailwindcss其实与MUI，Ant Design并不是同一类的东西，它不是一个UI框架。
, Suspense来实现子组件的懒加载 memo让函数式组件有PureComponent的特性(浅比较) flexbox来布局 用了lodash的isEqual来深度比较对象,用于getDerivedStateFromProps..._90', nickname: '卡布奇诺', pos: 2, voice: '', text: '该词语多用于讽刺和揶揄调侃...例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。'...例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。'...; } .img-preview { max-width: 200px; } 复制代码 使用姿势 接受的props data, 格式是[Obj](数组对象); operate : 布尔值(是否显示操作区域
, Suspense来实现子组件的懒加载 memo让函数式组件有PureComponent的特性(浅比较) flexbox来布局 用了lodash的isEqual来深度比较对象,用于getDerivedStateFromProps..._90', nickname: '卡布奇诺', pos: 2, voice: '', text: '该词语多用于讽刺和揶揄调侃...例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。'...例如：（1）有人在网络上发表了不合乎相关法律法规或者破坏社会稳定和谐等消息而被警方捕；（2）在贴吧或论坛里拥有删帖权限的大小吧主，检查贴吧里是否存在灌水的帖子或跟帖，遇到就进行删除的行为。'...; } .img-preview { max-width: 200px; } 使用姿势 接受的props data, 格式是[Obj](数组对象); operate : 布尔值(是否显示操作区域)
HTML5+扩展了JavaScript 对象plus，使得js 可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等...obj，然后在js 里操作obj对象的方法属性就可以了。...mobileweb 的文件存放在web 服务器上，而移动App 的文件存放在手机本地，编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。...缺陷：毕竟不是app，不管怎样也没办法取代app的便捷和功能强大。...选择模版 这里选择mui项目，会自动引入mui的js和css，如下： 文件结构 默认有以下几个文件夹：css，fonts，js，如下： 简单开发 header 打开index.html后在body内输入
mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网。...DOM结构 关于mui页面的dom，你需要知道如下规则： 固定栏靠前 所谓的固定栏，也就是带有.mui-bar（类选择器）属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav...）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content...定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码： .mui-bar-nav ~ .mui-content {...跳转 当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用 [mui.openWindow
HTML5问世以后，前端加入了一个重要的功能，便是本地存储，本地存储可分为4类： Local Storage：总的存储量有所限制，并不能提供真正的检索API，数据的生命期比窗口或浏览器的生命期长，数据可被同源的每个窗口或者标签页共享...Web SQL Database：实际上未包含在HTML5规范中。和Indexed Database都是在客户端存储大量结构化数据的解决方案。...，该对象有以下属性: key:被修改的键。...) } 5.1、数据库初始化 IndexedDB保存的是对象，而不是使用表保存数据。...，而需要检索多个对象时候就需要使用游标。
在webpack.config.js中添加resolve属性： resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }...ES6中语法使用总结 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export 使用 import ** from **.../lib/mui/css/mui.min.css' 在webpack.config.js中添加新的loader规则： { test: /\....important; } 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类： // 创建路由对象 var router = new VueRouter...实现 tabbar 页签不同组件页面的切换 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性； 在入口文件中导入需要展示的组件，并创建路由对象： // 导入需要展示的组件
底部选项卡tab有两种实现方式，一种是用js另一种是原生的 一、js实现方式：首先先建1个首页和几个子页，最后合并而成 ? <!...--.mui-bar-nav~.mui-content这两个class之间的~什么意思？匹配 .mui-bar-nav 之后所有的 .mui-content（即同级的其他类或元素）。...Webview窗口对象 var self = plus.webview.currentWebview(); for (var i = 0; i < subpages.length...= Index) { sub.hide(); } //将webview对象填充到窗口
range input 的构成： 此外 range input 还包含各种属性，除了具有 input 元素所共享属性外，还包括 max、min、step、list 等四个属性。...不过，在 Firefox 中不是这样，因为它的大小不会受到 track 的影响，因为 track 和 thumb 是兄弟节点。...为了实现在不同浏览器下样式都一样的滑块，需要在各浏览器的伪类下设置统一的样式。...2%, #5dc1fb 100%) 0/ var(--sx) 100% no-repeat, $track-color; } // --val: 当前input的值 $thumb-w...: calc(.5*#{$thumb-w} + var(--ratio)*(100% - #{$thumb-w})); } 这里需要注意一点，由于 Chrome 和 Edge 填充区域的特点，track
", //可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容； callback.../css/mui.min.css" rel="stylesheet" /> <link href=".....data: getDefaultData(), methods: { resetData: function() { //Object.assign() 方法用于将所有可枚举<em>属性</em>的值从一个或多个源<em>对象</em>复制到目标<em>对象</em>...它将返回目标<em>对象</em>。 //语法 Object.assign(target, ...sources) //this.$data,实例<em>属性</em>与方法。.../<em>css</em>/<em>mui</em>.min.<em>css</em>" rel="stylesheet" /> <link href="..
，而不是使用短横线命名。...// ... el.style.item(0) === el.style[0]; // true CSS 类 接着，来看看更高级的结构——CSS类，它在检索和设置时具有字符串形式是.classname。...但是，就像使用.style.cssText属性一样，设置.className将要求咱们在字符串中包括给定元素的所有类，包括已更改和未更改的类。...当然，可以使用一些简单的字符串操作来完成这项工作，还有一种就是使用较新的.classList属性，这个属性，IE9 不支持它，而 IE10 和 IE11 仅部分支持它。...对象，用于设定此样式是用于显示器，打印机还是投影机等等）。
将 style 和 head 的 display 设置为 block ，并且将 style 的 contenteditable 属性设置为 true ，style 就显示出来了，直接在页面上一边敲样式，...这个函数对 svg 的元素做了兼容，如果元素的 className 属性存在，并且 className 属性存在 baseVal 时，为 svg 元素，如果是 svg 元素，取值和赋值都是通过 baseVal...这样在大多数情况下是可以的，但是碰到像 table 、li 等显示时 display 默认值不是 block 的元素，强硬将它们的 display 属性设置为 block ，可能会更改他们的默认行为。...不太明白为什么要用全局变量 classList 来接收，用局部变量不是更好点吗？ cls 保存当前类的字符串，使用函数 className 获得。...如果不传递参数，则将 className 属性置为空，也即删除所有样式类。
2、h5中新增的属性，如自定义属性data、类名className等；新增表单元素；拖拽Drag。 3、h5中新增的API、修改的API、废弃的API稍作了解（离线存储、audio、video）。...2.关于CSS 1、CSS选择器（三大特性）。 2、BFC机制。 3、盒模型。 4、CSS模块化开发（封装）；SCSS和LESS的使用。 5、屏幕适配以及页面自适应。 6、CSS3中新增的选择器。...5、set和map数据结构。 6、迭代器和生成器函数next和yield的理解。 7、proxy对象属性代理器：属性的读取（get）和设置（set）相关操作。...5、UI框架：Bootstrap、MUI、Element-ui等。 6、常用的插件整理；整理一个自己插件库，封装自己的方法库、组件库。 7、常用的工具熟练度。 8、PC端和移动端开发注意事项。...3、组件和功能模块的抽离、解耦、复用。 内功考察 1.面向对象的编程思想 1、类的抽象。 2、对象的封装、继承。 3、为了更好的去管理数据、分类数据，实现高内聚、低耦合。
} ES6中语法使用总结 使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export 使用 import ** from...** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块 使用箭头函数：(a, b)=> { return a-b; } .vue中的css样式...组件 注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用...Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发； 因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件； 从体验上来说， MUI和Bootstrap.../lib/mui/css/mui.min.css' 根据官方提供的文档和example，尝试使用相关的组件 在.vue组件中使用vue-resource 运行npm i vue-resource -S
二、CSS样式 1、如何获取和设置样式 1.1访问css的两种方式 常用方式：点语法 1 doms[0].style.color ='yellow' 2 键值对方式 3 doms[0].style['color...： var dom = document.getElementById("test"), style = window.getComputedStyle(dom , ":after"); /*如果不是伪类...获取的对象范围 getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style...属性中的CSS样式。...), 而element.style就是0。
基于MUI、H5+这一套技术开发APP，曾经写了几篇相关文章关注的人还真不少，以至于我总感觉现在开发H5比原生的更火热。今天就来分析下，算是以往的一个学习总结。...概述 mui实现方式依赖系统webview，控件大多是HTML5控件，通过DOM渲染； 对比单纯的webview加载页面多了一些优化，比如CSS动画、页面预加载、多页面显示隐藏模拟窗口切换，以至于在视觉上看起来不那么生硬...而且即使加载比如iOS的类文件等，加载系统本身的类库还可以，你如果加载自定义的类貌似不行。 经查询,如果加载自己的类必须离线打包，在线打包无法实现。...它不在是一个网页套壳应用，它的js根本不运行在webview里（所以也没有document等对象），也不受wkwebview的各种限制。...而如果使用nvue的话，视图层也不在webview里，和html5一点关系都没有。 曾经我也写过一个demo简单测试体验下，无论在安卓还是iOS上感觉还不错。
上面提到了对象是具有属性和功能，那我们如何使用对象的属性或功能呢？...2 设置样式 现在要对获取到的标签进行设置样式的操作，回顾之前学的HTML与CSS，给标签设置样式有几种方式？我们是不是使用CSS选择器、标签内联来控制标签的样式。...= '30px'; 2 通过控制类名进行样式的控制 标签也是对象，使用标签的className属性给标签添加类名； 注意：因为class是JS的保留字，不符合命名规范，所以类名属性是className...而不是class； 例如：eleObj.className = 'intro-ele'; 代码实例： <!...利用className属性给标签设置样式，CSS样式没有出现在标签内，只是给标签添加类名而已； ? 3 获取/设置标签的内容 现在可以利用JS来控制标签的样式，能否利用JS控制标签的内容？
本文内容概要： 1 使用className属性设置标签的样式 2 使用style对象设置标签的样式 3 使用cssText属性设置标签的样式 4 课程小结 5 课后作业 1 使用className属性设置标签的样式...代码分析： 使用id名获取网页的标签，然后再使用className属性给标签添加类名wrap； 因为class是JS的保留字，不符合命名规范，所以类名属性是className而不是class； 到目前为止相信大家已经掌握了使用...className属性给标签添加类名。...代码分析： 类名是一个字符串，只需要使用字符串的连接就能够实现这个功能；通过className属性获取已经存在的类名，然后通过 += 操作符连接新的类名； 添加类名main的时候，为了防止变成这样'wrapmain...属性名转换成小驼峰（也可以通过正则、字符串来处理），然后把它当做对象的属性和属性值，最后对象当做函数的实参传入到函数里面； 代码12~14行利用for in语句循环遍历对象的属性和属性值；代码eleObj.style
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
云直播
实时音视频
