首页
友情链接
推荐
知行首页
About Me
Search
1
解决 Failed to *** : Access denied
164 阅读
2
欢迎光临知行博客
128 阅读
3
Mac上好用的计算器推荐
104 阅读
4
博主大爱的全能神器,简直不要太给力~~~
96 阅读
5
安装UEditor for Typecho丰富Typecho编辑器功能
89 阅读
日常随笔
学习日记
生活感悟
美文赏析
数码科技
编程开发
前端
Andriod
iOS
人工智能
数据库
程序开发
设计&素材
图片素材
软件工具
代码素材
其他素材
设计文章
图库天下
风景
人文
数码&科技
其他
旅行摄影
音乐人生
作品
赏析
海报
感悟
登录
/
注册
Search
雨歌
累计撰写
55
篇文章
累计收到
3
条评论
首页
栏目
日常随笔
学习日记
生活感悟
美文赏析
数码科技
编程开发
前端
Andriod
iOS
人工智能
数据库
程序开发
设计&素材
图片素材
软件工具
代码素材
其他素材
设计文章
图库天下
风景
人文
数码&科技
其他
旅行摄影
音乐人生
作品
赏析
海报
感悟
页面
友情链接
推荐
知行首页
About Me
搜索到
8
篇与
前端
的结果
2021-10-13
vue绑定元素属性中插入带变量的参数解决办法
第一种方法:<a :href="value.goodsId"></a>第二种方法:v-bind:属性="'字符串'+vue变量+'字符串'"<a :href="value.goodsId"></a>当点击a标签跳转到商品详情页的时候,需要获取到点击的商品的goodsId,所以要在a标签的href上传入goodsId的参数,但是直接<a :href="value.goodsId"></a>或者<a :href="value.goodsId"></a>都是错误的,那么怎么才能正确传入想传的参数呢,这就需要使用 methods<div id="app"> <a :href="getGoodsHref(value.id )"></a></div>new Vue({el: '#app',data: {},methods:{getGoodsHref:function(val){return 'http://baidu.com?goodsId='+val}}
2021年10月13日
32 阅读
0 评论
0 点赞
2021-10-13
Vue的生命周期
Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。 created ( 创建后 ) 实例已经创建完成之后被调用,在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,el没有。 然而,挂在阶段还没有开始, $el属性目前不可见,这是一个常用的生命周期,因为你可以调用methods中的方法,改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上,,获取computed中的计算属性等等,通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的,因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个方法发请求,建议在组件路由钩子beforeRouteEnter中完成 beforeMount 挂在开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化,注意此时还没有挂在html到页面上。 mounted 挂在完成,也就是模板中的HTML渲染到HTML页面中,此时一般可以做一些ajax操作,mounted只会执行一次。 beforeUpdate 在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程 updated(更新后) 在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用 beforeDestroy(销毁前) 在实例销毁之前调用,实例仍然完全可用, 这一步还可以用this来获取实例, 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件 destroyed(销毁后) 在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用
2021年10月13日
22 阅读
0 评论
0 点赞
2021-10-13
免终端开发vue应用
暂无简介
2021年10月13日
39 阅读
0 评论
0 点赞
2021-10-13
vue项目下的导入和导出
本篇博文主要记录我们在写项目的时候经常需要用到导入和导出。 导入 首先定义一个模态弹窗,一般情况下会使用一个input(设置opacity:0)覆盖在显示的按钮上面 <!-- 3.导入 --> <Modal title="批量导入" v-model="importVisual" width="450px" class="page-open-question-import"> <div class="import-btn"> <input class="upload-input" @change="fileChange($event)" name="files" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> <Button type="primary" ghost style="margin-left:40px" icon="ios-cloud-upload-outline" >点击上传Excel文件</Button> <span class="file-name" v-show="fileName" :title="fileName">{{fileName}}</span> </div> <div class="import-text"> <span>文件小于10M,内容需符合模板规范</span> <span>导入文档前请先添加好相应的类目</span> </div> <div class="import-example" @click="download"> <Icon type="ios-cloud-download-outline" />下载规范模板 </div> <div slot="footer"> <Button @click="importVisual=false">取消</Button> <Button type="primary" @click="importOk">确定</Button> </div> </Modal> 通过type='file'的输入框获取到文件信息,一般情况下的导入接口使用的是formdata信息 // 导入选择文件 fileChange (el) { this.importFile = el.target.files[0]; this.fileName = this.importFile.name; }, // 确定导入 importOk () { let param = new FormData(); param.append('file', this.importFile); importData(param, { kgId: this.kgId }).then(res => { // 导入成功后操作 ...... this.importVisual = false; this.$Message.success('导入成功!') }) }, 导出 get 请求 一般情况下,我们可以直接使用window.open()的方法来导出后端提供的get请求; // 根据参数导出数据 downloadModel () { window.open( `${httpConfig.baseURL}/kg/dataset/data/template/${this.datasetId}` ); } post 请求 有的接口因为传参比较多,会需要使用post请求,那么上面的方法就不合适,通用的请求会出现乱码,大多数情况下我们会使用表单提交的方法 创建form表单请求的方法 // 导出文件 formSubmit (param, url) { var $form = document.getElementById('exportForm'); if (!$form) { $form = document.createElement('form'); $form.setAttribute('id', 'exportForm'); $form.setAttribute('method', 'post'); $form.style.display = 'none'; document.getElementById('exportParent').appendChild($form); } $form.setAttribute('action', url); // 记得要把token信息带上 let token = this.$cookies.get('access_token'); param.access_token = token; for (var obj in param) { var input = document.createElement('input'); input.type = 'hidden'; input.name = obj; input.value = param[obj]; $form.appendChild(input); } $form.submit(); } 导出的方法中使用 // 确认导出 exportOk () { // 根据label获取id ...... // 请求导出 this.formSubmit( { kgId: this.kgId, status: this.status, categoryIds: this.categoryIds.join('|') }, this.exportUrl ); }
2021年10月13日
63 阅读
0 评论
0 点赞
2021-10-09
vue-quill-editor富文本编辑器使用
vue-quill-editor github地址:https://github.com/surmon-china/vue-quill-editor 官方文档地址:https://www.npmjs.com/package/vue-quill-editor vue项目中,npm安装依赖 npm install vue-quill-editor --save 两种引用方法,全局引用和局部引用 全局引用,项目入口文件中(main.js)注册 import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor) 局部引用,在需调用的vue页面中声明 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor } } 完成上述步骤之后即可使用 附上局部引用代码,关于事件和参数可查阅文档,这里不一一说明。 <template> <div> <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" style="height:600px;"></quill-editor> </div> </template> <script> import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor'; export default { data(){ return{ content: '', editorOption: { placeholder: '编辑文章内容' }, } }, components: { quillEditor }, methods:{ onEditorChange({ editor, html, text }) { this.content = html; }, } } </script> vue-quill-editor
2021年10月09日
84 阅读
0 评论
0 点赞
2021-10-01
Vue+ElementUI的后台管理框架
新开发的一个后台管理系统。在框架上,领导要用AdminLTE这套模板。这个其实很简单,把该引入的样式和js文件引入就可以了。这里就不多赘述了。有兴趣的可以参考:https://www.jianshu.com/p/e80b1f5001eb,或者可以参考官网:https://adminlte.io/ 效果图,如下: AdminLTE这个模板,还是很方便的。有兴趣的大家可以自行去琢磨。我只是把这个模板内嵌到新系统中去,也就没多去研究了。 AdminLTE这个就告一段落。下面来说说今天的主题,Vue+ElementUI的后台管理框架。 Vue+ElementUI的后台管理框架 首先我们要先了解,什么是Vue?Vue官网:https://cn.vuejs.org/ Vue官网中对Vue的解释: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 那什么是ElementUI? 据听说是饿了么公司开发的一套UI组件,具体的我也不太清楚,这是ElementUI中文官网:https://element.eleme.cn/#/zh-CN 在官方文档上,ElementUI给出了其设计原则: 1、一致 Consistency 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念; 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。 2、反馈Feedback 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作; 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。 3、效率Efficiency 简化流程:设计简洁直观的操作流程 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策 帮助用户识别:界面简单直白,让用户快速之别而非回忆,减少用户记忆负担。 4、可控Controllability 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策; 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。 这些都在官网上有介绍。 vue-element-admin 是一个后台前端解决方案 既然这个是基于Vue+ElementUI开发的,所以Vue的一些前端准备还是需要的,可以在之前的随笔中去查看,点击这里 中文官方帮助文档https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/ vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。 这个项目的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。 安装Git和下载Demo 到这个地址 https://git-scm.com/download/win去下载并且安装Git 下载好Git之后,就可以从Git上拉去代码了 git clone https://github.com/PanJiaChen/vue-element-admin.git 或者,直接在Git上下载压缩包也是可以的https://github.com/PanJiaChen/vue-element-admin.git 下载下来,项目的目录结构就是这个样子 安装依赖: npm install 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org 首先要确保自己电脑上又安装了Node.js的环境。可以自行去官网上去下载。 本地开发,启动项目 vue cli 2 是 npm run dev cli 3 是npm run serve 如果前面步骤都正确,就可以看到如下界面: 登录进去就可以看到如下界面:这个界面还是挺漂亮的 路由和配置左侧菜单 什么是路由呢?可以参照下官方的解释:https://router.vuejs.org/zh/guide/#html 路由允许我们通过不同的 URL 访问不同的内容。该 URL 可以是我们自己设置的,在项目中并没有这样的文件夹,这种功能就是路由. 路由的本质是hash值! vue 中的路由设置分为四步曲 : 定 : 定义路由组件 配 : 配置路由 实 : 实例化路由 挂 : 挂载路由 用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。 路由放在src->router->index.js中,还有一个views文件夹,当然是放这些页面的啦~ 首先,我们要了解一些这个项目中配置路由时提供了哪些配置项 //当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面,或者如一些编辑页面/edit/1 hidden: true // (默认 false) //当设置 noRedirect 的时候该路由在面包屑导航中不可被点击 redirect: 'noRedirect' //当你一个路由下面的 children 声明的路由大于1个时,自动会变成嵌套的模式--如组件页面 //只有一个时,会将那个子路由当做根路由显示在侧边栏--如引导页面 //若你想不管路由下面的 children 声明的个数都显示你的根路由 //你可以设置 alwaysShow: true,这样它就会忽略之前定义的规则,一直显示根路由 alwaysShow: true name: 'router-name' //设定路由的名字,一定要填写不然使用<keep-alive>时会出现各种问题 meta: { roles: ['admin', 'editor'] //设置该路由进入的权限,支持多个权限叠加 title: 'title' //设置该路由在侧边栏和面包屑中展示的名字 icon: 'svg-name' //设置该路由的图标 noCache: true //如果设置为true,则不会被 <keep-alive> 缓存(默认 false) breadcrumb: false // 如果设置为false,则不会在breadcrumb面包屑中显示 } 所以,我们只需要在路由中对应的位置加上自己的菜单选项就可以了 { path: '/bingle', component: Layout, redirect: '/bingle/index', name: 'bingle', meta: { title: 'BingleTestMainMenu', icon: 'example' }, children: [ { path: 'bingle', component: () => import('@/views/dashboard/index'), name: 'bingle', meta: { title: 'BingleSubmenu1', icon: 'guide', noCache: true,affix: true } }, { path: 'bingle1', component: () => import('@/views/dashboard/index'), name: 'bingle2', meta: { title: 'BingleSubmenu2', icon: 'guide', noCache: true,affix: true } } ] }, 这时就可以在菜单栏看到自己增加的菜单项了。 文章来源:博客园作者:冰乐
2021年10月01日
29 阅读
0 评论
0 点赞
2021-09-30
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏👇🏻👇🏻👇🏻👇🏻 HTML5+CSS精彩网页特效实战分享 Html+Css+JavaScript期末大作业网页模板 都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的小游戏网页制作,画面精明,非常适合初学者学习使用。 网页截图展示 首页展示: 选择昆虫: 效果展示: 有密集恐惧症的别玩哟、游戏永远不会停止 一直玩 项目源码结构: 图片和js以及css等基础文件代码实现 主要源码展示: index.html:引入图片和css文件以及js <!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>insect-catch-game</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="tab-container" class="tab-container"> <div class="tab-item active" data-value="en">en</div> <div class="tab-item" data-value="zh">zh</div> </div> <div class="screen"> <h1 id="firstTitle">Catch The Insect</h1> <button id="play" class="btn play">Play Game</button> </div> <div class="screen"> <h2 id="secondTitle">What is your "favorite" insect?</h2> <ul id="inspect-list" class="inspect-list"> <li> <div class="choose-btn"> <p>Fly</p> <img src="img/fly_PNG3946.png" alt="fly"> </div> </li> <li> <div class="choose-btn"> <p>mosquito</p> <img src="img/mosquito_PNG18175.png" alt="mosquito" /> </div> </li> <li> <div class="choose-btn"> <p>spider</p> <img src="img/spider_PNG12.png" alt="spider" /> </div> </li> <li> <div class="choose-btn"> <p>roach</p> <img src="img/roach_PNG12163.png" alt="roach" /> </div> </li> </ul> </div> <div class="screen game-container" id="game-container"> <h3 id="time" class="time">Time:<span>00:00</span></h3> <h3 class="score" id="score">Score:<span>0</span></h3> <h5 id="message" class="message"> Tell you a bad news, will you be angry? <br> Actually you are playing a game that never ends!! <button class="btn continue-btn" id="continue">Continue Play</button> <button class="btn restart-btn" id="restart">Restart Play</button> </h5> </div> </body> <script src="./data.js"></script> <script src="./script.js"></script> </html> 部分style.css样式布局 @import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { color: #fff; text-align: center; font-family: 'Press Start 2P', sans-serif; overflow: hidden; background: linear-gradient(135deg, #9cc8e9 10%, #0b6be0 90%); min-height: 100vh; } .screen { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vw; height: 100vh; transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .screen.hidden { margin-top: -100vh; } .screen h1, .screen h2 { letter-spacing: 2px; margin-bottom: 1rem; line-height: 1.5; } .screen .btn { background: linear-gradient(135deg, #dfe0e2 10%, #f6f7f7 90%); outline: none; border-radius: 8px; padding: .8rem 4rem; color: #2396ef; display: inline-block; border: 1px solid transparent; letter-spacing: 2px; cursor: pointer; font-size: 18px; } .screen .btn.play { margin-top: 1rem; } 作品来自于网络收集、侵权立删
2021年09月30日
83 阅读
0 评论
0 点赞
2021-09-30
13个超实用的Vue PC端框架
今天给大家推荐13个超实用的Vue PC端框架,希望能够对大家有所帮助 1. Element Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 2. iView 一套基于 Vue.js 的高质量UI 组件库 3. vue-element-admin vue-element-admin是基于 Vue2.0,配合使用 Element UI 组件库的一个前端管理后台集成解决方案。它使用了最新的前端技术栈,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。 4. Vue Material 通过Vue Material和Vue 2.0建立精美的app应用 5. VueStrap 基于 Vue.js 构建的 Bootstrap 组件。该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。所以不需要 jQuery 和 Bootstrap 的 JavaScript 文件,唯一需要依赖的是: Vue.js (要求版本为 ^0.12,基于 0.12.10 版本做的测试)Bootstrap CSS (需要版本为 3.x.x, 基于 3.3.5 版本做的测试)。 VueStrap 不依赖某个非常精确的 Bootstrap 版本。 VueStrap 6. Keen UI 由Vue编写的基本UI组件的轻量级集合,并受Material Design的启发。 Keen UI 7. Radon UI 一个帮助你快速开发产品的Vue组件库,简洁好用,效率高,让你摆脱各种定制化的烦恼。 Radon UI 8. N3-components N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。致力于构建良好的Vue开发者生态圈,提供良好的开发体验。 N3-components 9. Muse-UI 基于 Vue 2.0 优雅的 Material Design UI 组件库 Muse-UI 10. Vue Antd 这里是 Ant Design 的 Vue 实现,开发和服务于企业级后台产品。 Vue Antd 11. Vuetify Vuetify是一个渐进式的框架,试图推动前端开发发展到一个新的水平。Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。 Vuetify 12. Buefy Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件,它提供了即装即用的轻量级组件。 Buefy 13. Vue Beauty 基于 ant design 的漂亮的 vue 组件库;vue-beauty 是一套基于 vue.js 和 ant-design样式 的PC端 UI 组件库,旨在帮助开发者提升产品体验和开发效率、降低维护成本。 作者:python那些事儿来源:头条科技著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2021年09月30日
41 阅读
0 评论
0 点赞