搜索到
8
篇与
前端
的结果
-
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}} -
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（销毁后） 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
-
-
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 ); }
-
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
-
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 } } ] }, 这时就可以在菜单栏看到自己增加的菜单项了。 文章来源：博客园作者：冰乐
-
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; } 作品来自于网络收集、侵权立删
-
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那些事儿来源：头条科技著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
