- 在博文《Vue进阶（九十一）：自定义指令》中讲解了Vue自定义指令（局部、全局）的创建方法，及指令相关的钩子函数。此篇博文在此基础上实现vue自定义拖动指令。 1. 定义全局拖拽指令： 定义全局指令，需要在main.js中写入vue.directive('drag',{});即可。但是一般会现在项目新建一个drag.js文件，在js文件内部实现拖拽逻辑，最后在dom... 在博文《Vue进阶（九十一）：自定义指令》中讲解了Vue自定义指令（局部、全局）的创建方法，及指令相关的钩子函数。此篇博文在此基础上实现vue自定义拖动指令。 1. 定义全局拖拽指令： 定义全局指令，需要在main.js中写入vue.directive('drag',{});即可。但是一般会现在项目新建一个drag.js文件，在js文件内部实现拖拽逻辑，最后在dom...
- this指向组件的实例，$el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。 <template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div> </templ... this指向组件的实例，$el用于获取Vue实例挂载的DOM元素，在mounted生命周期中才有效，之前的钩子函数内无效。如下代码所示，Vue脚手架中，$el指向当前组件template模板中的根标签。 <template> <div id="root"> <h1 @click="fn()"> Lorem, ipsum </h1> </div> </templ...
- 在前期博文《Vue进阶（幺陆肆）：vue自定义拖动指令》讲解了Vue如何自定义拖拽指令，以上方法只是简单实现了元素的基本拖拽，在视图可视化编辑功能中，不仅需要对页面元素进行拖拽，而且还需要实现页面元素可编辑。 在开源项目（esview）基础上已经实现了页面元素属性可编辑，开源项目（vue-drag-resize）基础上实现了页面元素可拖拽功能，现需要对以上2个开源项目... 在前期博文《Vue进阶（幺陆肆）：vue自定义拖动指令》讲解了Vue如何自定义拖拽指令，以上方法只是简单实现了元素的基本拖拽，在视图可视化编辑功能中，不仅需要对页面元素进行拖拽，而且还需要实现页面元素可编辑。 在开源项目（esview）基础上已经实现了页面元素属性可编辑，开源项目（vue-drag-resize）基础上实现了页面元素可拖拽功能，现需要对以上2个开源项目...
- Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你需要 JavaScript 的完全编程能力。这时你可以用渲染函数render，它比模板更接... Render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你需要 JavaScript 的完全编程能力。这时你可以用渲染函数render，它比模板更接...
- 在应用Vue进行项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。 Form必须要有ref属性Form必须绑定：... 在应用Vue进行项目开发过程中，应用this.$refs[name].resetFields();实现表单搜索元素重置时发现失效。经检查发现是form-item绑定的属性prop与包裹元素el-input绑定值不一致造成的。现梳理有关应用this.$refs[name].resetFields();重置表单方法的注意事项。 Form必须要有ref属性Form必须绑定：...
- Vue+iVIew项目开发过程中，需要实现页面根据html格式的字符串，在页面中解析的效果。 例如 let htmlStr='<div style="font-size=16px">我是小标题</div>' 页面中显示效果如下： 我是小标题 主要是在render()函数中实现,示例代码如下： { title: "标题", ke... Vue+iVIew项目开发过程中，需要实现页面根据html格式的字符串，在页面中解析的效果。 例如 let htmlStr='<div style="font-size=16px">我是小标题</div>' 页面中显示效果如下： 我是小标题 主要是在render()函数中实现,示例代码如下： { title: "标题", ke...
- “window.location.href”、"location.href"是本页面跳转. “parent.location.href” 是上一层页面跳转. “top.location.href” 是最外层的页面跳转. 举例说明： 如果A,B,C,D都是html，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写 "windo... “window.location.href”、"location.href"是本页面跳转. “parent.location.href” 是上一层页面跳转. “top.location.href” 是最外层的页面跳转. 举例说明： 如果A,B,C,D都是html，D是C的iframe，C是B的iframe，B是A的iframe，如果D中js这样写 "windo...
- 绝对路径：是从盘符开始的路径，形如 C:\windows\system32\cmd.exe 所谓的绝对路径就是完整的路径。 相对路径：是从当前路径开始的路径，假如当前路径为C:\windows 要描述上述路径，只需输入 system32\cmd.exe 实际上，严格的相对路径写法应为 .\system32\cmd.exe 其中，.表示当前路径，在通道情况下可以省略，只有... 绝对路径：是从盘符开始的路径，形如 C:\windows\system32\cmd.exe 所谓的绝对路径就是完整的路径。 相对路径：是从当前路径开始的路径，假如当前路径为C:\windows 要描述上述路径，只需输入 system32\cmd.exe 实际上，严格的相对路径写法应为 .\system32\cmd.exe 其中，.表示当前路径，在通道情况下可以省略，只有...
- vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 一般项目创建好后会有三个文件：index.html、main.js、app.vue index.html ：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染加载。main.js：相当于ja... vue项目启动后调用顺序: index.html → main.js → app.vue → index.js → components/组件 一般项目创建好后会有三个文件：index.html、main.js、app.vue index.html ：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染加载。main.js：相当于ja...
- 在Vue项目中，使用ElementUI显示表格数据时，如果某一个列数值长度超过列宽，会默认换行，造成显示不友好。 翻阅Element-UI文档，可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。 注：show-overflow-tooltip属性需要谨慎使用，如果一个页面多列使用，会影响页面加载速度。因为show... 在Vue项目中，使用ElementUI显示表格数据时，如果某一个列数值长度超过列宽，会默认换行，造成显示不友好。 翻阅Element-UI文档，可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。 注：show-overflow-tooltip属性需要谨慎使用，如果一个页面多列使用，会影响页面加载速度。因为show...
- Vue进阶（幺贰叁）：v-for实现一行展示n个元素 需求背景 在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 需求分析 可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 解决方案 经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下： <el-row v... Vue进阶（幺贰叁）：v-for实现一行展示n个元素 需求背景 在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 需求分析 可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 解决方案 经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下： <el-row v...
- 应用场景 在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。 方式一 在main.js 中添加代码： router.afterEach((to, from, next) => { window.scrollTo(0, 0) }) 123 方式二 如... 应用场景 在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法。 方式一 在main.js 中添加代码： router.afterEach((to, from, next) => { window.scrollTo(0, 0) }) 123 方式二 如...
- 在前端应用中，窗口间的通信用的地方还是挺多的，比如弹出qq登录认证窗。 postMessage语法 window.postMessage(msg,targetOrigin) 1 注意postMessage要通过window对象调用！因为这里的window不只是当前window，大部分使用postMessage的时候，都不是本页面的window，而是其他网页的win... 在前端应用中，窗口间的通信用的地方还是挺多的，比如弹出qq登录认证窗。 postMessage语法 window.postMessage(msg,targetOrigin) 1 注意postMessage要通过window对象调用！因为这里的window不只是当前window，大部分使用postMessage的时候，都不是本页面的window，而是其他网页的win...
- config配置的目的是为了服务webpack的配置，给不同的编译条件提供配置。当我们需要和后台分离部署的时候，必须配置config/index.js。 用vue-cli 自动构建的目录里面会包含以下代码（环境变量及其基本变量的配置）。 var path = require('path') module.exports = { build: { index: p... config配置的目的是为了服务webpack的配置，给不同的编译条件提供配置。当我们需要和后台分离部署的时候，必须配置config/index.js。 用vue-cli 自动构建的目录里面会包含以下代码（环境变量及其基本变量的配置）。 var path = require('path') module.exports = { build: { index: p...
- <component>元素是vue 里面的一个内置组件。 在<component>里面使用 :is，可以实现动态组件的效果。 示例解析 下面例子创建一个包含多个子组件的 vue 实例。 vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bc... <component>元素是vue 里面的一个内置组件。 在<component>里面使用 :is，可以实现动态组件的效果。 示例解析 下面例子创建一个包含多个子组件的 vue 实例。 vue代码部分：新建 vue 实例 “app”，这个实例的 components 里面，有3个组件，这些组件都有各自的模板。分别是 acomp，bc...
上滑加载中
推荐直播
-
星闪应用开发技术课程（群）建设思路与设想2025/05/22 周四 19:00-21:00
葛非 华为开发者布道师
华中师范大学计算机学院副教授-葛非老师将深入讲解星闪核心技术及其支撑技术，并讨论如何将这些技术融入到通信工程、计算机科学与技术、软件工程等专业的课程内容中，旨在推动高等教育领域星闪鸿蒙生态的有序发展。
回顾中
热门标签