之前在网上看到《蓝色拼图》这款小游戏，作者是用jquery写的。下面通过本文给大家分享基于vue.js编写蓝色拼图小游戏，一起看看实现代码吧Later equals never！说干就干。首先理解游戏的规则：第一关为1*1的方块，第二关为2*2以此类推该图为第三关3*3的方块。点击一个小方块，该方块和它相邻的方块的的颜色会从黄色变为蓝色，全部变为蓝色就过关了。现在规则清楚了，开动吧！/*style*/ .game_bg{ background: #333; width: 600px; h...
前言 上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景：： 通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次； 如果对防抖函数原理有疑惑，请点击链接跳转到关于防抖函数讲解的博文：https://www.gxlcms.com/ar...
首先新建vue工程，一般我们不会特殊处理路由，但当项目页面越来越多，路由配置也会越来越大，路由文件就会变得不好维护 import Vue from vue import Router from vue-router import HelloWorld from @/components/HelloWorld import Home from @/components/Home import Test1 from ./test1.router.js import Test2 from @/components/children/Test2 import Test3 from @/components/children/Test3Vue.use(Router)export default...
1、递归组件-简单树形控件预览及问题 在编写树形组件时遇到的问题：组件如何才能递归调用？递归组件点击事件如何传递？2、树形控件基本结构及样式<template><ul class="vue-tree"><li class="tree-item"><div class="tree-content"><!--节点内容--><div class="expand-arrow"></div><!--展开或收缩节点按钮--><div class="tree-label">小学</div><!--节点文本内容--></div><ul class="sub-tree"><!--子节点--><li class="tree-ite...
前言vue开发手机端悬浮按钮实现，可以拖拽，滚动的时候收到里边，不影响视线 github地址 使用，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架 vue-h5-template 后续将发布各种商城组件组件，让商城简单高效开发 线上体验 使用将 src/components文件夹下的s-icons组件放到你的组件目录下 使用组件 // template <template><div> <float-icons padding="10 10 60 10" class="icons-warp"...
直接通过element-ui自带的上传组件结合js即可，代码如下： HTML： <el-upload class="upload-demo" :action="actionUrl" :show-file-list="false" :on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><button class="ce-button not-hover primary"><i class="ce-icon_upload"></i><span>重新上传</span></button></el-upload> js：beforeAvatarUpload(file) {var fileName = file.name || var ext = file...
说一种没人发的，利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。 一、main.js文件 import Vue from vue import App from ./App import router from ./router import store from ./store import mixin from ./utils/mixin Vue.prototype.$bus = new Vue() //进行全局混入 Vue.mixin(mixin) new Vue({store,router,...
本篇我们将构建商品控件与购物车联动。 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构，以及数据，事件的绑定，与判断逻辑的书写。 <template><div class="goods"><div class="menu-wrapper" ref="menuScroll"><ul><!--专场--><li class="menu-item" :class="{current:currentIndex===0}" @click="selectMenu(0)"><p class="text"><img :src="container.tag_icon" v-if="container.tag_icon" class="ic...
vue+django实现一对一聊天和消息推送的功能。主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。考虑到存储量的问题，我并没有把聊天信息存入数据库，服务端的作用相当于一个中转站。我只讲述实现功能的结构性代码，具体的实现还请大家看源代码。 前端聊天界面前端消息提醒界面后端代码 效果展示实现过程 后端 首先，我们需要先定义websocket的两条连接路径。ws/chat/xxx/（xxx指代聊天组）这条路径是...
Vue 使用计时器实现跑马灯效果，代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="../Vue/vue.js"></script><link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="external nofollow" rel="stylesheet"><title>跑马灯</title><style type="text/css...
先给大家介绍下vue发送websocket请求和http post请求 直接上代码： pdf.vue <script>import SockJS from sockjs-client;import Stomp from stompjs;import qs from "qs"export default {name: "pdf",data() {return {newsData: [],tagGuid_mx: "",tagGuid_4AA_Ia: "",tagGuid_4AA_P: "",tagGuid_4AA_Q: "", 49 tagGuid_1AA_6_Ib: "",tagGuid_1AA_6_Ic: "",tagGuid_pdfwd: "",tagGuid_pdfsd: "",stompClient: ,timer: ,visi...
Vue中实现拖放排序，啥也不说，贴上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul { min-height: 100px; width: 200px; margin: 20px auto; background: #eee; } li { min-height: 2em; margin-top: 10px; background: #abcded; } / 组件过渡类 / .drog-move { transition: transform 1s; } </style> <body> <div id="app"> <transition-group name="drog" tag...
写这个文章主要是记录下用法，官网已经说的很详细了npm install vue-datepicker --savehtml代码<myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeoption" :limit="limit"></myDatepicker> js代码<script> import myDatepicker from vue-datepicker export default {name: PillDetail,components:{myDatepicker},data () {return {startTime: { ...
编程式跳转的实现代码，如下所示： <template><ul class = "prolist"><!-- //产品 --><!-- :to = "/detail/item.id" --><!-- 声明式跳转 :to = "{ name: detail,params: { id: item.id } }" --><!-- <router-link :to = "{ name: detail,params: { id: item.id } }" tag = "li" class = "proitem" v-for="(item,index) of iss" :key=index><div class = "itemimg"><img :src="item.images.small" :alt="item.alt"></div><div class...
vue的面包屑导航组件 用来将其放到navbar中； Breadcrumb/index.vue <template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group><el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path" v-if="item.meta.title"><span v-if=item.redirect==="noredirect"||index==levelList.length-1 class="no-redirect">{{item.meta.title}}</span><router-link v-else :to="item.redirect||item.p...