Code： $('code').click(function () { console.log($(this).text()); }); New Code：（.container 是所在的div...$('.container').on("click", "code", function () { console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件...，并不知道其好处，这次知道了 话说，，，真的好久没碰前端了，忘差不多了，O(∩_∩)O~ 动态加载JS 和 CSS 在线浏览PDF之PDF.JS （附demo） 几个比较有意思的JS脚本 经典JS
定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。...规定要附加事件处理程序的一个或多个子元素。 event 必需。规定附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。 data 可选。规定传递到函数的额外数据。...规定当事件发生时运行的函数。 <!
图片Selenium 是一个自动化测试工具，可以用来模拟浏览器的操作，如点击、输入、滚动等。但是有时候，我们需要定位的页面元素并不是一开始就存在的，而是由 JavaScript 动态生成的。...除了上面的方法，还有一些其他的定位技巧可以用来定位 JavaScript 动态生成的页面元素，比如:1、使用 XPath 表达式from selenium import webdriverfrom selenium.webdriver.support.ui...然后，我们使用 execute_script() 方法执行 JavaScript 代码来动态生成一个文本框元素。...接下来，我们使用 XPath 表达式 "//input@id='dynamic_textbox'" 定位这个动态生成的文本框元素。...接下来，我们使用find_element_by_css_selector()方法和CSS选择器#dynamic-element定位页面上ID为dynamic-element的动态生成元素。
背景 在开发IM的项目过程中，经常会有出现一些需要计算DOM高度，然后超出若干行隐藏等需求。很多时候，需要计算高度的DOM元素都是动态生成的，我们无法在数据渲染前获取到它的高度。...但是，如果我们需要获取到这段在内存中未渲染的动态文本，也能够通过如下几个方法。...技术方案 根据前端的基本常识，在内存中未渲染的DOM元素是无法获取到高度的，因此我们有两个方向来解决这个难题： 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下的实现方案将根据上面所选择的技术方案来进行实现...缺点 此方案仍然存在一些问题，将新容器挂载到document元素上时，可能会引发DOM元素的重新渲染，极低概率会影响页面布局。同时，属性值等需要自己手动传入，而不是利用现成的容器，比较费时费力。...总结 获取动态元素的高度一直都是IM项目中的一个重要需求，自己在这个方面也踩了许多坑，因此写了这一篇博客来进行记录，同时其他人如果看到了也可以避免一些常见问题。
项目地址 可以根据数据动态生成可合并行列的表格。...文档 数据选项 options: { cols: 6, // 要生成的表格列数 rows: 7, // 要生成的表格行数 这个表是 7 * 6 data: [ // 表格数据，生成表格后将数据按顺序一一填充到表格...使用 在单文件组件中引用 npm i vue-mergeable-table import VueMergeableTable from 'vue-mergeable-table' Vue.use(VueMergeableTable...:options="options"/> 在HTML文件中直接引用 使用的是dist目录中的 vue-mergeable-table.js </div
在Vue中，为了让组件可以组合，我们使用Slot来混合父组件的内容与子组件自己的模板。这样就实现了Vue的内容分发。...Scoped Slot（作用域插槽）是在Vue 2.1引入的更进阶的功能，它是一种特殊类型的slot，用作使用一个（能够传递数据到）可重用模板替换已渲染元素。...Select组件一期 在开发我们的select组件时很自然就用上了scoped slot这一特性。我们需要遍历数据中的选项数组，渲染成界面上的下拉选项列表。...如果是比较复杂的允许自定义的list item，在组件里写死dom结构就行不通了，比如： 有了scoped slot实现很轻松： <v-select kind="popup" :options...在Vue的官方文档上有这么一句话： “ Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。
以上v-for是用于遍历的，添加在标签上，就会遍历生成当前标签的全部代码，其表达式中tag in tags表示在Vue中存在名为tags的数据，该数据应该是数组类型的，在遍历过程中，每个数组元素都使用...('v-select', VueSelect.VueSelect); let createQuestionApp = new Vue({ el: '#createQuestionApp',...4个选项。...应该生成列表项时，为每个标签数据指定id，以保证用户选中某些选项后，可以获取这些标签数据的id，最终才可以将这些id提交到服务器端！...： Vue.component('v-select', VueSelect.VueSelect); let createQuestionApp = new Vue({ el: '#createQuestionApp
最近一段时间打了一个大仗，现在总算消停点，才有时间来做个总结吧算是： 移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。...-----非故事分割线------------------------------------------------------------------———————— jq写了点击事件，是通过获取元素的类名被点击后执行对应方法...，但是研发套完模板，他会把所有的结构先清空，导致jq根本找不到那个元素，所以事件就不得执行了。...正规点的说：JS异步加载,JQ事件不被执行解决方法（百度的标题，hah） jquery中动态新增的元素节点无法触发事件问题（同上） 解决方法： ? ?...值得注意的是：亲测此方法无效，可能是我用的jq的版本太高了，1.9多，已经不支持这个方法了 第二个方法： ? 但是缺点是：给一个元素添加多个事件委托机制时，他就挂了。 王者方法：on ?
组件名：v-select 比较重要的一些属性： item-text：选项中用来展示的字段名，默认是text item-value：选项中用来作为value值的字段名，默认是value items：待选项的对象数组...sku特有属性放到最后一个面板 numerical：是否是数值类型，如果是，把单位补充在页面表单，不允许用户填写，并且要验证用户输入的数据格式 options：是否有可选项，如果有，则使用下拉选框来渲染...--否则，显示下拉选项--> <v-select v-else :label="param.k" v-model="param.v" :items="param.options...5.8.展示SKU列表 5.8.1.效果预览 当我们选定SKU的特有属性时，就会对应出不同排列组合的SKU。 举例： ?...我们还差头：headers 头部信息也是动态的，用户选择了一个属性，就会多出一个表头。与skus是关联的。
提问页面-显示问题标签的下拉列表 关于js代码： Vue.component('v-select', VueSelect.VueSelect); let createQuestionApp = new...（最多可以选择3个）"> 然后，在create.js中，在Vue对象的data中添加teachers和selectedTeacherIds这2个属性： data: { tags...代码： Vue.component('v-select', VueSelect.VueSelect); let createQuestionApp = new Vue({ el: '#createQuestionApp...发表问题-持久层 导入question及相关数据表（共3张表），通过代码生成器项目生成基础代码文件。...打开model包中新生成的实体类，在各实体类之前都添加注解： @Accessors(chain = true) 则后续创建实体类对象就，就可以使用链式语法更快捷的为属性赋值！
接口请求 二、注册逻辑功能实现 1.注册页面设计 2.接口请求 ---- 前言 1.业务流程说明 登录功能的业务流程主要有 1.在登录页面输入用户名和密码 2.调用后台接口进行验证 3.通过验证之后...1.登录页面输入用户名和密码进行登录 2.服务器验证通过之后生成该用户的token并返回 3.客户端存储该token 4.后续所有的请求都携带该token发送请求 5.服务器端验证token是否通过...4.前端框架设计 因为进到具体的业务，前端架构在此做个说明，主要以后端业务为主 前端框架主要引用了两个开源业务 1、Vuetify 3 Vuetify 老牌 Vue UI 组件库，它提供了丰富的常用组件...Vuetify 基于谷歌的Material Design 样式开发，无需写一行 CSS 就能生成相当整洁清爽的界面功能。...Vuetify 已经发布支持 Vue 3 的版本，如果正在考虑未来的迁移问题，可放心使用。
1.数组变异方法（修改原有数据） 在 Vue 中，直接修改对象属性的值无法触发响应式。...pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice...reverse() reverse() 将数组倒序，成功返回倒序后的数组 2.替换数组（生成新的数组） 不会改变原始数组，但总是返回一个新数组 filter filter() 方法创建一个新的数组...该方法不会改变现有的数组 slice slice() 方法可从已有的数组中返回选定的元素。...该方法并不会修改数组，而是返回一个子数组 3.动态数组响应式数据 让 触发视图重新更新一遍，数据动态起来 Vue.set(vm.items, indexOfItem, newValue) Vue
，由于数据是按需加载，所以我们首先就要明白如何实现虚拟列表，具体可以参考以前写的一篇文章了解虚拟列表背后原理，轻松实现虚拟列表 快速实现页面 我们是使用vue-cli2快速搭建了一个基本项目 我们可以非常清晰的看到右侧下拉测试...value="item.value" > 对应数据就是在created中直接生成了一组...="请选择" @visible-change="handleVisibleChange" v-select="{ ...selectAttrs, data: sourceData }"...使用第三方插件vue-virtual-scroll-list实现虚拟列表 本文实例源码code example[2] 个人比较推荐社区优秀成熟的第三方库去满足我们的业务，自己虽然手写了一个指令支持虚拟列表.../maicFir/lessonNote/tree/master/vue/04-select下拉框虚拟列表&拖拽/elem-select 最后，看完觉得有收获的，点个赞，在看，转发，收藏等于学会，欢迎关注
,另一方面就是单独抽离的配置项使得能够通过后台动态传递给前端,或者自己建一个配置项的js/ts文件(如果有规范的开发者文档还可以使用nodejs编写一个读取开发者文档一键写入配置项的脚本,进一步提升开发效率...,但是罗列了整体的实现方案,随后我根据文章中的思路设计了这个表单组件 设计大致分为以下几个部分 表单配置项设计 表单验证 表单请求 表单控件之间的联动 调用后端接口生成表单控件的选项 表单配置项设计 根据上面的表格组件的封装思路...调用后端接口生成表单控件的选项 在真实的业务需求中，部分下拉框，单选框的选项是通过拉取后端的接口生成的。放在表单组件中的话还是需要修改配置项，在页面组件中修改formItem。...介绍一款我自己写的工具库，可以和表格组件完美配合，读取开发者文档，一键生成组件的配置项，免除多字段输入的错误和重复劳动，有帮助的话希望各位赏个 star ~ excel-code-generator 参考资料...加快Vue项目的开发速度 再也不想写表单了
/componentA.vue"，然后再在components选项中定义组件元素。...Prop验证 参考 这里代码实例 可以为组件的prop指定验证要求，这会保证组件的正确使用，如未满足验证要求，vue会在浏览器中显示警告。...②.禁用特性继续 如果不想子组件的根元素继承特性，可以在组件选项中设置inheritAttrs: false。...5.动态组件与异步组件 用元素缓存动态组件的状态 在Vue 2.X 文档阅读笔记一 (基础)中的动态组件小节中简单介绍了动态组件的写法，这在需求做多标签tab切换时是非常有用的。...当然用ref也可以获取普通DOM元素，但vue推荐数据驱动，尽量少用类似jq的直接操作dom元素的模式。
最简单的定义局部注册组件方法是通过一个普通的JavaScript对象来定义组件，然后在components选项中定义该组件： // vue模板 // 定义局部注册组件 let ComponentA =.../componentA.vue"，然后再在components选项中定义组件元素。...Prop验证 参考 这里代码实例 可以为组件的prop指定验证要求，这会保证组件的正确使用，如未满足验证要求，vue会在浏览器中显示警告。...②.禁用特性继续 如果不想子组件的根元素继承特性，可以在组件选项中设置inheritAttrs: false。...4.动态组件与异步组件 用元素缓存动态组件的状态 在Vue 2.X 文档阅读笔记一 (基础)中的动态组件小节中简单介绍了动态组件的写法，这在需求做多标签tab切换时是非常有用的。
Vue思维导图目录 MVC与MVVM的区别 Vue基本代码结构 Vue指令 Vue组件 class和style动态绑定 computed计算属性 EventBus filter过滤器方法 Vue是一套构建用户界面的框架...const vm = new Vue({ el:'#app',//所有的挂载元素会被 Vue 生成的 DOM 替换 data:{ // this->window }, methods:{ // this...，如类型检测、自定义验证和设置默认值 watch:{ // this->vm}, computed:{}, render(){}, // 声明周期钩子函数 }) 当一个Vue实例被创建时，它将...Vue指令 ? 插入数据： 插值表达式相当于占位符，不会清空元素中的其他内容。直接写在标签中。会将html标签作为文本显示。 v-text会覆盖元素中原本的内容。写在开始标签中，以属性的形式存在。...v-html（innerHTML）会覆盖元素中原本的内容，会将数据解析成html标签。 ? 3. Vue组件 ?
可选参数 */ /* 或简单的使用字符串来生成的 "文本节点"。...11.vue mixins 合并策略 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。...当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。...Vue.extends()，用于继承一个组件的配置。 1.动态组件 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。...动态设置元素的ref并获取元素对象 第一，获取ref一定要注意是在dom元素生成之后，否则获取到的是undefined，或者报没有“getAtrribute”方法的错误，解决办法是使用$nextTick
实例Prop 验证----编辑Vue.js classclass 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。...，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。...Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。...Prop 验证 组件可以为 props 指定验证要求。 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。...== -1 } } } }) 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
Prop 实例 动态 Prop Prop 实例 Prop 实例 Prop 验证 ---- Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用...，所以对于复选框或者单选框的组件时，我们需要使用 model 选项，model 选项可以指定当前的事件类型和传入的 props。...Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。...Prop 验证 组件可以为 props 指定验证要求。 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。...== -1 } } } }) 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
