由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。 这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。 所以理论上有2种方法解决： 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞，而且没啥资料，放弃。2 的话比较可行。 部分禁止 pjax 打开 publi...
config/config.default.js exports.io = {init: {},namespace: {/: { //对应router.js里的 of(/)connectionMiddleware: [ auth ], //对应io/middleware/authpacketMiddleware: [ filter ],},},}; config/plugin.js exports.io = {enable: true,package: egg-socket.io, }; router.jsio.of(/).route(chat, io.controller.chat.index);io.of(/).route(message, io.controller.chat.message);io.of(/).route(user:online, io.control...
1.组件是什么 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织； 1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#a...
实例 当输入域失去焦点 (blur) 时改变其颜色： $("input").blur(function(){$("input").css("background-color","#D6D6FF"); }); <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){$("input").focus(function(){$("input").css("background-color","#FFFFCC");});$("input").blur(function(){$("input").css("background-color","#...
JS中我们可以根据需求新建新的对象解决问题的同时，也有一些常用的内置对象供我们使用，我们称之为API，本篇文章只是对数组部分进行了练习。 例一：伪数组，不能修改长短的数组（所以没办法清零），可以修改元素，代码实现如下： <script> fn(1,2);fn(1,2,3,4,5,6);fn(1,2,4,5,7,9,4);function fn(a,b){arguments[0]=0;console.log(arguments);arguments.push(1);console.log(arguments instanceof Array);console.log(arguments.l...
首先安装better-scroll npm i better-scroll -S goods页面模板 <template><div class="goods"><div class="menu-wrapper" ref="menuWrapper"><ul><li v-for="item in goods" class="menu-item"><span class="text border-1px"><span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span></li></ul></div><div class="foods-wrapper" ref="foodsWrapper"><ul><li v-for="item in goods" ><...
Vue —$set 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性 data () {return {student: {name: ,sex: }} } mounted () { // ——钩子函数，实例挂载之后this.student.age = 24 }原因是：受 ES5 ...
提前申明 注意：自己对vue脚手架的理解和认识，很多东西和理解都是形象上的手法，并不专业和官方 webpack 一种项目构建工具，可以将css和js压缩成一个文件。此外，可以提供测试用服务器。使用webpack时，可以配置一些默认扩展名 和 路径别名 来在项目文件里直接使用 导入和导出 使用export命令可以将一个JS对象导出，其他JS文件可以使用import 对象名 from 路径的形式导入这个对象来使用，但是在导入时，必须知道导入导出对象的名字...
在每个节点添加 id 和 pid， id 表示当前节点编号，pid 表示父节点编号 第一步：在页面显示菜单位置，添加 ul设置 class=”ztree” 第二步：开启简单数据格式支持 第三步：编写树形菜单数据 第四步：生成树形菜单 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ztree树形菜单的使用</title><!-- 导入jquery核心类库 --><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!-- 导入easyui类库 -->...
1.路径：http://localhost:8081/#/test?name=1 <router-link :to="{path:/test,query: {name: id}}">跳转</router-link>(id是参数) 使用：this.$route.query.id 2.路径：http://localhost:8081/#/test/1 <router-link :to="/test/+id">跳转</router-link>(id是参数) 路由：使用：this.$route.params.id（这个id给上图路由的配置有关） this.$route是一个数组，里面包含路由的所有信息 注意：router-link中链接如果是‘/开始就是从根...
分享说明： 项目需要树状视图形式展示后台返回的数据;并实现点击节点将节点信息添加到右侧的ul中;待后续提交获取使用;选择了能够实现异步加载节点信息的zTree插件,事实也证明这个插件足够强大,能够满足几乎所有需求;刚接触时看了很多人的分享,结合官方api文档,终于实现了功能,现将我学习的总结也分享出去. 效果介绍;除了zTree默认的效果;使用api增加了一些实用的操作;包括手风琴效果;点击父节点展开效果;点击节点文字关联复选框效果...
前几天主要看了express，今天开始接触ejs，jade还是不想看了，O(∩_∩)O哈哈~ var express = require("express"); var ejs = require(ejs); //var fs = require("fs"); //var bodyParser = require(body-parser);var app = express();app.engine(html, ejs.renderFile);app.set("view engine", "html"); app.use(function(req, res, next) {res.locals.userinfo = {userid : 123,username : "ladeng"};next(); });app.get("/", fun...
本篇文章总结下require.js使用方法。 1.为什么使用require.js? 使用之前，我的页面的js是这样的 <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script> <script type="text/javascript" src="/js/plugins/layer/layer.min.js"></script> <script src="/Scripts/co...
工作中需要将一个左边的设计好的控件，拖拽到右边的面板中，同时保持右边面板中的控件自由排序，这时候就需要及支持拖拽又支持排序的操作了， Demo截图：从左边控件拖到右边区域代码段： <script type="text/javascript">$(function () {$("#box_wrap1,#box_wrap2").sortable({connectWith: ".box_wrap",helper: "clone",cursor: "move",//移动时候鼠标样式opacity: 0.5, //拖拽过程中透明度placeholder: "box-holdplace",//占位符...
e-smart-zoom-jquery.js插件，下载地址及示例：https://github.com/e-smartdev/smartJQueryZoom 插件描述：通过将鼠标悬停在图片上，滚动鼠标滚轮即可实现图片的放大或者缩小效果。 smartZoom使用 举个栗子，上代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>joannau</title><style>* {padding: 0;margin: 0;}.imgCon {width: 800px;height: 500px;margin: 40px auto;border: 2px solid #000;}.imgD...