问题1:拖拽是啥时候更新了被拖拽的列表的？update中是可以获取到的 好像change事件中也是可以更新的但是，具体不清楚，待更新问题2: 是否可以只根据列表中的某个按钮或是元素来进行拖拽？主要是通过handle=‘.className’来指定可拖拽的元素。 在被拖拽的元素上添加class = ‘className’原文：https://www.cnblogs.com/panjingshuang/p/12819433.html
添加easyExcle依赖 <!--导出excel--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>1.1.2-beta5</version></dependency>// 或者!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.8</version></dependency> 1.首先是vue前端，写好导出方法// 导出设备维修表 outputWord () {this.$axios.post(‘/fac...
我们在用vue-cli打包的时候，往往会出现包比较大的情况，webpack4已经帮我们进行了分包的处理，那我们也可以再进行gzip压缩打包，减小包的体积1.需要用到的插件：npm i -D compression-webpack-plugint特别注意，有的版本会出现”TypeError: Cannot read property ‘tapPromise‘ of undefined“这样的错误，建议安装5.0.0的版本2.修改vue.config.jsconst CompressionPlugin = require("compression-webpack-plugin"); module.expo...
请看goNews()方法 1 <template>2 <!-- 所有的内容要被根节点包含起来 -->3 <div id="home"> 4 我是首页组件5 6 7 <button @click="goNews()">通过js跳转到新闻页面</button>8 9 </div> 10 </template> 111213 <script> 14 export default{ 15 data(){ 16return { 17 msg:‘我是一个home组件‘ 1819 } 20 }, 21 methods:{ 2223 ...
第一步：brew install nodejs（MAC机子下） Windows直接官网下载对应版本node.js第二步：获取nodejs模块安装目录访问权限（Windows系统忽略）sudo chmod -R 777 /usr/local/lib/node_modules/第三步：npm install -g cnpm --registry= https://registry.npm.taobao.org（安装淘宝镜像/或者使用自己公司代理）第四步：安装webpackcnpm install webpack -g（全局安装打包机）第五步：安装vue脚手架npm install vue-cli -g第六步：在...
<template><div><Child1 /><Child2 /></div> </template> <template><div @click="child1Click">child1</div> </template> // child1 {data() {return {}},methods: {child1Click() {this.bus.$emit(‘changeChildValue‘) // 触发changeChildValue事件}} } <template><div >{{value}}</div> </template> // child2 {data() {return {value: ‘1‘}},created() {this.changeValue();},methods: {changeValue() {this.bus.$on(‘cha...
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装...3.安装全局vue-cli脚手架,用于帮助搭建所需的模板框架在cmd里 1)输入：cnpm install -g vue-cli，回车，等待安装... 2).输入：vue，回车，若出现vue信息说明表示成功4.创建项目在cmd里输入：vue...
1、什么是vue生命周期？答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。2、vue生命周期的作用是什么？答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3、vue生命周期总共有几个阶段？答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后4、第...
当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码：第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由{path: ‘/Login‘,name: ‘Login‘,component: Login}, {path: ‘/BackupWizard‘,name: ‘BackupWizard‘,component: BackupWizard,meta: {req...
首先是在普通文档（也就是单个html文件中进行测试，能够正常执行） 普通情况下的结果，拼接的结果能够正常渲染并且控制台有输出； 但是在vue环境之下就会出错，点击事件并没有反应，js部分： for (const i in _sourcesName) {let liHtml = "";for (const j in _sourcesName[i]) {liHtml += ‘<li class="dataLi">‘;liHtml +=‘<p>‘ +_sourcesName[i][j] +‘(‘ +_sourcesRoundNum[i][j] +‘)‘ +‘</p>‘;liHtml ...
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"><span>{{count}}</span><button @click="inc">+</button></div><script>var app =new Vue({ // 1. data () { // return {count: 0} // },// 2.data: {// count: 0// }, ...
p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 } span.s1 { font: 14.0px "Helvetica Neue" }1.删除数组索引//在数组中删除一项标准做法是用 Array.splice(index,1) del( index ) { this.arr.splice(index,1) } //Vue.js2.2.0+版本中 可以直接使用Vue.delete del ( index ) { this.$delete ( this.arr , index ) }p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue...
<div ref="wrapper">Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn, 20) ...
vue-cli 3.x 安装：npm install -g @vue/clivue-cli 3.x 常用命令vue-cli 3.x 常用命令命令含义vue --help原文：https://www.cnblogs.com/cag2050/p/9198428.html
<li class="search-item" v-for="(item, index) in searches" :key="index" @click="selectItem(item)">selectItem (item) {this.$emit(‘select‘, item)},search组件里面调用：<search-list:searches="searchHistory"@select="addSearchValue"></search-list>删除一条的实现search-list中向外部传一个事件。deleteOne (item) {this.$emit(‘deleteOne‘, item)}search组件监听这个事件：<search-list:searches="searchHistory"@s...