ES4 (pop push unshift shift slice revert sort) indexOf lastIndexOf contact slice
`; //``是 es6 的模板字符串 遇到变量用 ${} 取值
})
includes 查找是否存在
返回的是 Boolean
Let arr=[1,2,3,4,5]
arr.includes(6) //false
FInd 找到具体的某一项
arr.find(function(item,index){ }) //为 true ，停止循环返回当前 item ；找不到返回 undefined
Some 找 true，找到 true 后停止返回 true
Every 找 false，找到 false 后停止返回 false
arr.some(function(item,index){ }) arr.every(function(item,index){ })
Reduce 收敛函数，四个参数，返回迭代后的结果
prev,next,index,item 分别指前一个（即当前值）、下一个、索引、原数组
Let arr=[1,2,3,4,5]
arr.reduce(function(prev,next,index,item){
Console.Log(arguments)
//return prev+next //求和，且会作为下一次的 prev ， prev 是上一次循环的 return 值
})
1 2 1 [12345]
Undefined 3 2 [12345]
而对于数组里存放的是对象的话
Let objArr=[{count:1},{count:2},{count:3}]
Let sum1=objArr.reduce(function(prev,next,index,item){
return prev.count+next.count //此时需要 return 对象，返回下一次循环会报错
})
Sum1=NAN
此时需要给数组添加一个初始值 0，
Let objArr=[0,{count:1},{count:2},{count:3}] 使用修改为
objArr.reduce(function(prev,next,index,item){
return prev+next.count //此时可保证正确累加
})
或者不改数组，而是在方法添加第二个参数（第一个参数为 function）
objArr.reduce(function(prev,next,index,item){
return prev+next.count //此时可保证正确累加
}， 0 )
二维数组变成一维数组
Let arr=[[1,2,3],[4,5,6],[7,8,9]]
Arr.reduce(function(prev,next){
Return prev.concat(next);
})
或者
[].concat.apply([],arr)
字符串
charCodeAt方法返回一个整数，代表指定位置字符的 Unicode 编码。
fromCharCode方法从一些 Unicode 字符串中返回一个字符串。
charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
slice方法返回字符串的片段。
substring方法返回位于 String 对象中指定位置的子字符串。
indexOf方法放回 String 对象内第一次出现子字符串位置。如果没有找到子字符串，则返回 -1 。
search方法返回与正则表达式查找内容匹配的第一个字符串的位置。 Match
concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接。
将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
toLowerCase ,t oUpperCase所有字母都被转换为 小、 大写字母。
Startwith endwith repeat replace trim “sss”.padstart(5,”ss”) padend 补全字符串
箭头函数
不具备 this和 arguments
自己没有则向上寻找 this
如何更改 this指向？ call apply bind ;var self=this; 箭头函数
如何确定 this是谁？ 看谁调用的 . 前面是谁 this 就是谁
Let a= b => b=1
-去掉 function 关键字
-若只有一个参数可以省略小括号
-小括号与大括号之间有箭头
-若没有大括号则直接是返回值
-有大括号需要用 return
例子： Let a=b=> c => b+c; //高阶函数 嵌套函数
闭包：单独的作用域，不销毁的作用域，当执行后返回的结果必须是引用数据类型，被外界变量接受，此时这个函数不会销毁，模块化（私有化）
//典型闭包
var t=function test(){
var a=1; return function(){console.log(a++)}
}();
//简写函数
arr.forEach(item=> console.log(item))
在 Vue中不经常使用箭头函数
2、Vue介绍
读音类似于 view 是一套构建用户界面的渐进式框架
框架 vue 拥有完整的解决方案 , 写好后别人调用
库 jquery 我们进行调用 工具
渐进增强 保证低版本支持，高版本效果增强
Vue全家桶 vuejs + vue-router + vuex + axios
渐进式的理解 (全家桶 )
声明式渲染（无需关心如何实现）
组建系统
客户端路由
大规模状态管理
构建工具（ vue-cli） 全套完整的方案
Vue的两个核心点
响应的数据变化
当数据发生改变 --视图自动更新
组合的视图组件
Ui页面映射为组件树
划分组件可维护可复用可测试
MVC 单向
MVVM模式 双向绑定
Model数据 view 视图 viewmodel 视图模型
View viewmodel model
DOM DOM Listeners Data Bindings plain js objects
vue
Object.defineProperty(es5) 没有替代方案 不支持 ie8 以下
Vue安装
1、cdn 直接使用网址
2、npm node package manager
npm init
初始化会产生一个 package.json的文件来描述项目的依赖，项目名不能有大写 特殊字符 中文，而且不要和安装的包重名
npm init -y 全部取默认值，项目名为文件夹名
npm install vue install可简写为 -i
Package.json dependencies 会记录已安装依赖 npm install 会安装这些内容
Node_moudules 安装的代码 dist 代表目的地，即编译好的内容
Let vm = new Vue({ //vm == viewModel
el:”#app”， //告诉 vue 能管理哪个部分，不能挂载到 html body
data:{ //data中的数据会被 vm 代理
msg:”hello” //可以通过 vm.msg 取到对应内容
}
}); //Object.defineProperty
{{msg}} //moustache 小胡子语法 赋值 取值 三元 逻辑运算用（ computed ）
v-model双向绑定
v-mode会将 msg 的值赋予输入框 输入框的值改变了会影响数据
表单元素更改来影响数据（通过 vue指令 directive v- 开头）
一般的表单元素 input checkbox textarea radio select vue忽略 selected checked
Es5的原生方法
Let obj={}
Let temp={}
Object.defineProperty(obj,’name’,{
Configurable:true, //是否可删除 delete obj.name
Wirtable:false, //是否可重新赋值
Enumerable:false, //是否可枚举，能循环出来与否
Value:1 //值
})
Object.defineProperty(obj,’name’,{
get(){
return temp[“name”];
},
set(val){
temp[“name”]=val;
input.value=val; //重新赋值给文本框，双向绑定
}
})
Input.value=obj.name; //页面加载时，调用 get 方法
Input.addeventlistener(‘input’,function(){ //等待输入框变化
obj.name=this.value; //当时变化时调用 set 方法
})
Css放上面 先渲 dom
Js放下边 不影响展示
基础指令
v-model 双向绑定
v-text 显示文本 等价 {{}} ，此时渲染会显示出 {{}} 需要在标签中加样式 [v-cloak]{display:none}
v-once 只绑定一次，当数据再发生变化也不会导致页面刷新，加在标签中
v-html 当作 html 渲染
Vue会循环 data 中的数据（数据劫持） 依次添加 proxysetter 和 proxygetter
响应式数据
改对象
1、使用变量时，先要在 data中初始化，否则新加的元素不会导致页面刷新
2、vm.$set() //此方法可以给对象添加响应式的数据变化 vm.$set(vm.a, ’school’,1);
3、替换原对象 vm.a={school： 5}
改数组
去改变数组中的某一项是监控不到的，因为数组内的元素加不上 getter和 setter
//错误写法 vm.arr[0]=100 vm.arr.lenth-=2
//变异方法 pop push shift unshift sort reserve slice 都可以操作原数组，因此可变化
或者 vm.arr=vm.arr.map(item=>item*3) //filter map
v-for 解决循环问题 更高效 复用原有结构 以前拼接 innerHTML
v-for=”(item,index) in arr” v-for=”c in ‘aaaa’” v-for=”c in 10” v-for=”(value,key,index) in obj”
此时会传递默认值 event
v-on 绑定事件 //v-on:click= ”fn” 简写为 @符号 @click= ”fn”
放到 methods， methods 与 data 命名不能冲突， methods 中的 this 指向实例
fn（ event ）此时若 @click= ”fn”，则会自动带过来 event
fn(event,test) 此时若 @click= ”fn($event,123)” 需要手动传入 event参数
@keyup.enter=”fn” 代表只有按回车才执行 类似写法 @keyup.13 @keyup.ctrl.a
二 npm install vue axios bootstrap(响应式布局 )
Checkbox
只有一个复选框的时候，会把值转化为 Boolean类型，如果 true 代表选中
多个复选框的时候，要增加 value属性，数据类型用数组，会将选中的 value 值放到数组中
test[] 全选中 test 为 [1,2,3]
Select
//取得 value 的值，若 option 无 value 属性，则取显示的值
请选择
1
2
3
传统方式：监听 onchange事件， this.value 值为选中 option 的 value
data:{
a:””
}
//多项选择 a 变成数组类型
Radio
男 以前用 name 属性
女
sex为选中的 radio 的 value 值
Axios 基于 promise
//专门发送 ajax 的方法
created(){ //数据初始化后会调用 this 指向 vm 实例，钩子函数
axios.get(‘./carts.json’).then((res)=>{
this.pro=res.data; //data为真实的数据
},(err)=>{
})
}
发请求可以封装为方法放到 methods方法中，然后在 created 中调用
Promise 解决回调问题的
//回调函数 将后续处理逻辑传入当前要做的事，事情处理好以后调用此函数
Function buy(callback){
setTimeout(()=>{
Let a=’123’;
Callback(a);
},100);
}
Promise 三个状态 成功态 失败态 等待 // 定义时即会执行
//resolve 代表转向成功 reject 代表转向失败 均是函数
//promise的实例就有一个 then 方法，两个参数
var pro=new Promise((resovle,reject)=>{
console.log(1)
setTimeout(()=>{
let a=’123’;
resovle(a);
},100);
});
console.log(2);
pro.then((res)=>{console.log(res)},(err)=>{})
封装原生 ajax请求
function ajax({url=’xxx’,type=’get’,dataType=’json’}){
Return new promise({resolve,reject}=>{
Let xhr=new XMLHttpRequest();
Xhr.open(type,url,true); //最后参数为是否异步
Xhr.responseType=dataType;
Xhr.οnlοad=function(){ //xhr.readstate==200;xhr.status=4
If(xhr.status==200){
Resolve(xhr.response);
}
}
Xhr.onError=function(err){
Reject(err);
}
Xhr.send();
})
}
ajax({url:’./aaa’}).then((res)=>{},(err)=>{})
Fetch代替 Ajax
Async await 基于 promise
Bootstrap 栅格化布局 默认 12 列 其他框架会 8 、 24
常见样式 基本样式 + 增强样式
Default 灰色 success 绿色 danger 红 warning 警告 info 浅蓝
Vue的 ui 框架 iview mintui elementui
购物车 表格标题
动态绑定数据 在属性里使用需要用 v-bind或： v-bind:id= ”data”
//.number将输入框值变成数字类型 .lazy 当输入框失去焦点更新数据
toFiexed(2)两位小数
过滤器 原数据不变，只是改变显示的效果 |为管道符
{{a.price*a.count|toFiexed(2)}}
Filters:{//可以有好多的自定义过滤器
toFiexed(input， param1){ // 这里的 this 是 window,input 为值
Return “$”+input
}
}
两个对象比较，比较的是地址，因此可以比较是否相等
点击 checkbox时，用 change 事件
Sum() 数据一变化就会重新调用此函数 算出最新的结果 不会缓存上一次结果
Computed 也会放到实例上
Computed:{
Checkall:{
Get(){
Return this.pros.every(p=>p.isSelected)
},
Set(val){
This.pros.forEach(p=>p.isSelected=val)
}
},
Sum(){ } //只有 get 可写成函数模式，且会被缓存
}
V-if v-show if操作的是 dom show 操作的是样式
如果 if不通过内部指令不会再执行
只有 dom从显示到隐藏 或者隐藏到显示 才能使用 vue 的动画
//Vue自定义标签 （组件）
动画
Opacity： 0 1 1 0
V-enter v-enter-to v-leave v-leave
V-enter-active v-leave-active
V-enter V-enter-active v-leave-active
.v-enter{opacity:0;}
.v-enter-active{transition:1s linear;}
.v-leave-active{opacity:0;transition:1s linear}
name默认为 v
.test-enter{opacity:0;}
.test-enter-active{transition:1s linear;}
.test-leave-active{opacity:0;transition:1s linear}
animate.css 动画库 --save 会记录到 package.json 的依赖库
transition适用单个元素 transition -group 适用多个元素
V-for 默认会复用原有的 dom 元素，要加 :key 且 key 不同用以区分不同元素
三 修饰符 .number .lazy
按键修饰符 .enter.ctrl.keycode
事件 修饰符用于处理细节问题
@事件 .stop 停止事件传播 stoppropagation cancelBubblel=true
@事件 .capture 事件为捕获 div.addeventlisenter( ‘click’,fn,true(捕获 ))
@事件 .capture.stop 先捕获后停止
@事件 .prevent 阻止默认行为 preventDefault returnvalue=true
@事件 .once 事件只执行一次 Jquery once
@事件 .self 只有事件源是自己才会触发
e.srcElement&&e.target===”” 判断事件源绑定 事件
局部过滤器
el:”#app”,
Filters:{
My(data){ return “data”+123}
}
})
全局过滤器，要放到页面的顶部
Vue.filter(“my”,(data)=>{ })
Computed不支持异步
Watch 只有值变化的时候才会触发 支持异步，其他情况更善于使用 computed
New vue({
Watch:{
a(newval,oldval){
If(newval.length<3) ....
}
}
})
Vm.$watch(‘a’,(newval,oldval)=>{})
V-if v-else
transtion
是 vue提供的无实际意义包裹元素的标签 v-show 不起效
默认情况下，切换 dom时 Vue 会复用元素，如果不复用需要加 :key
class=”a b c” style=”background:’color’”
第一种是对象 第二种是数组
:class绑定的样式和 class 绑定的不冲突 style 使用与 class 雷同
1 {classname:isActive,classname2:isSuccess}
2 data:{class1:x,class2:y} :class[class1,class2]
3 混用 :class[class1,class2,{z:false}]
实现单页开发的方式
通过 hash记录跳转的路径 可以产生历史管理
浏览器自带的历史管理的方法 history （ history.push ）
History.pushState(“”,””,”/me”) 可能会导致 404 错误
开发时使用 hash方式 上线都话会使用 history 的方式
自定义指令
directives:{
color(el,bindings){ //el指代是 button 按钮
el.style.background=bindings.value
}，
Drag(el){
}
},
data:{
flag:’red’
}
拖拽
El.οnmοusedοwn=function(e){
Var x=e.pagex-el.offsetLeft;
Var y=e.pageY-el.offsetTop;
document.οnmοusemοve=function(e){
El.style.left=e.pageX-x+”px”;
El.style.Top=e.pageY-y+”px”;
}
document.οnmοuseup=function(){
document.οnmοusemοve=document.οnmοuseup=null;
}
e.preventDefault();
}
Watch 默认值监控一层的数据变化，深度监控
Watch:{
Todos:{
Handler(){ //默认写出函数，就相当于写了个 handler
}，
deep:true
}
}
四 Window.location.hash
Vue的生命周期
New vue
Init events &&lifecycle 初始化事件和实例的父子关系
beforecreate 此方法一般用不到
Init injections&reactivity 注册数据 进行双向绑定
Created 执行 ajax ，获取数据，初始化操作
是否有 el属性或者有没有 vm.$mount(el) 有编译的元素
是否有 “template ”，有则替换掉 elhtml 元素，否则把 el 的 outhtml 做模板
Beforemount
创建 vm.$el替换掉 el ，用编译好的数据替换掉模板
Mounted 真实 dom 渲染完毕，可以操作 dom
当 data发生变化
Beforeupdate //一般用 watch
虚拟 dom会重新渲染
updated
beforeDestroy //可以清除定时器或者清楚事件绑定
移除掉 watch components等
destroyed
// vm.$data vm上的数据
//this.$watch 监控
//vm.$el当前 el 元素
// vm.$set 后加的属性实现响应式变化
// vm.$option vm上的所有属性
//vm.$refs 获取真实的 dom 元素 v-for 才能获取多个 ’div’>
//vm.$nextTick 异步方法，等待 dom 渲染完获取元素
数据改变会渲染 dom,因为是异步的，若要获取 dom 需要使用 nextTick
This.nextTick(()=>{
This.$refs.wrap
})
组件化开发
页面级组件
1一个页面是一个组件 2 将可复用的部分抽离出来 基础组建
一个自定义标签 vue就会把他看成一个组件
全局组件
一般插件的时候全局组件多一些
声明一次在任何地方使用
1组件名不要带大写 多个单词用 -
2只要组件名和定义名相同是可以的 ( 首字母可大写 )
3 html采用 - 隔开命名， vue 中使用驼峰命名
Vue.component(‘name’,{ //一个对象可以看成一个组件
template:’
123
’ //
只能有一个根元素
data(){ //组件中数据必须是函数类型 返回一个实例作为组件的函数
return {}
}
})
局部组件 必要属于某个 vue实例
使用三部曲 1创建组件 2 注册组件 3 使用组件
组件是相互独立的 不能直接跨作用域 实例也是一个组件 组件拥有生命周期
如果组件共用数据 会导致同时更新 (独立性 ) ，因此 data 需要使用 return
Let aa={
template:’
123
’
}
Components:{
aa
}
层级间的消息传递 父到子 属性传递 props 子到父 事件传递 $emit
中间既不触发也不传递的为 v-bing=’ @attrs ’ v-on= ’ @listenners ’
当前组件的属性 =父级的值，给儿子加一个 m 属性，属性对应的数据是属于父亲的
Let vm=new Vue({
Compenents:{
Child:{
Props:[‘m’], //对象可添加校验
Template:’
儿子 {{m}}
’
}
}
})
Props:{
m:{ //不与 data 中相同 , 只是校验提示警告，不会阻断程序
type:[String,Boolean,Number,Array,Function] //校验属性类型
default:100 //可以赋默认值
required:true //此属性必传，但是不能和 default 同用
Validator(val){//第一个参数是当前值，返回值通过， false 不通过
Return val>300 //自定义校验器
}
}
}
发布订阅 //emit on
Vm.$on vm.$once vm.$off vm.$emit
Function Girl(){ this._events={} }
Girl.prototype.on=function(eventName,callback){
If(this.events[eventName]){
this.events[eventName].push(callback)
}else{
this.events[eventName]=[callback]
}
}
Girl.prototype.emit=function(eventName,...args){
//[].splice.call(argument,1)
If(this.events[eventName]){
this.events[eventName].forEach(fn=>fn(...args)); //fn.apply(this,args)
}
}
父亲绑定一些事件，儿子触发这个事件，将参数传递过去 单项数据流
Var vm=new Vue({
data:{
Money:100;
},
Methods:{
changeMoney(val){
This.money=val;
}
},
Components:{
Children:{
Props:[“m”],
Template： ”
钱： {{m}}”change”>加钱
”,
Methods:{
Change(){
This.$emit(“click-mes”,200);
}
}
}
}
})
组件就是自定义标签 全小写 或加横杠
驼峰命名会转化为短横线命名
Props:[‘myMessage’]
Sync 简写 不用
this.money=val”>
模态框 弹出层
居中 Top:50% left:50% trnasform:translate3d(-50%,-50%,0)
弹
flag=false”>
Let modal={
Props:[‘show’],
Methods:{
Closed(){
This.$emit(“close”);
}
}
Template:”#mydialog”
}
五 Npm install vue vue-router axios bootstrap
Slot 插槽 可以定制模板
确定删除么
默认标题 默认值 如果传值则会被替换掉
默认标题 有名字 默认为 default
为保证内容顺序 用名字区分位置
默认标题
默认内容
默认值
内容
标题 父调用子组件的方法 通过 ref
Mouted(){ //页面挂载好后获取组件实例
this.$refs.load.hide();
This.$refs.load.$el.style.background=’red’;
}
Keep-alive 为了提高性能 缓存组件 为路由缓存内容
$nextTick()
子组件和父组件同时拥有 mounted方法，先走子组件
需要等待子组件挂载完成后再触发父组件的挂载
Mounted是异步渲染 dom, 需要耗费时间渲染
this.nextTick(()=>{ //在 mounted 想操作 dom 就加一个 nextTick
this.$refs.child.$el.innerHTML
})
Flex 布局 Flex 是 Flexible Box 的缩写，意为 " 弹性布局 " ，用来为盒状模型提供最大的灵活性
display: flex;
采用 Flex 布局的元素，称为 Flex 容器（ flex container ），简称 " 容器 " 。它的所有子元素自动成为容器成员，称为 Flex 项目（ flex item ），简称 " 项目 "
容器默认存在两根轴：水平的主轴（ main axis）和垂直的交叉轴（ cross axis ）
容器的属性
flex-direction 决定主轴的方向 row | row-reverse | column | column-reverse;
flex-wrap 决定如何换行 nowrap | wrap | wrap-reverse
flex-flow 前两个简写模式 || 默认值 row nowrap
justify-content 主轴上的对齐方式
f lex-start | flex-end | center | space-between(两端对齐 ) | space-around(两侧间隔相等 )
align-items 交叉轴上对齐
flex-start | flex-end | center | baseline (第一行文字基线 ) | stretch (无高度、 auto 占满项目 )
align-content 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch (占满整个交叉轴 )
项目的属性
Order 项目的排列顺序。数值越小，排列越靠前，默认为 0
flex-grow 项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
如果所有项目的 flex-grow属性都为 1 ，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2 ，其他项目都为 1 ，则前者占据的剩余空间将比其他项多一倍
flex-shrink 项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
如果所有项目的 flex-shrink属性都为 1 ，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0 ，其他项目都为 1 ，则空间不足时，前者不缩小
flex-basis 在分配多余空间之前，项目占据的主轴空间（ main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小
它可以设为跟 width或 height 属性一样的值（比如 350px ），则项目将占据固定空间
Flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto
该属性有两个快捷值： auto (1 1 auto) 和 none (0 0 auto) 。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self 允许 单个项目有与其他项目不一样的对齐方式，可覆盖 align-items属性。默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
转载于:https://www.cnblogs.com/comeasyouare/p/9910535.html
你可能感兴趣的:(vue杂记)
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
厦门自由行之第一天:
大苏子在广漂
厦门三人行之杂记出发前一天:12️28日下午15:00从广州粗发，来深圳集合！但是中间发生一个小插曲，验票时候发现车票不见了，或许也是一场恶作剧，对于不排队的人，忍不住说了一下，接下来就发现车票不见了，已经是拿在手上！不过还好，可以凭借购票订单查看到信息，所以有惊无险，顺利进站！晚上三个人一起去吃了柠檬鱼，说实话，那会，感觉美吃饱，啊哈哈！晚上回来，两个人又开始彻夜长谈，发现身边优秀的人，一大把，
vue3中el-table中点击图片放大时，被表格覆盖
叫我小鹏呀
vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并
酋长哈哈
vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
Vue中table合并单元格用法
weixin_30613343
javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目
苹果酱0567
面试题汇总与解析 spring boot 后端 java 中间件 开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
Vue( ElementUI入门、vue-cli安装)
m0_l5z
elementui vue.js
一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
博客网站制作教程
2401_85194651
java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
vue+el-table 可输入表格使用上下键进行input框切换
以对_
vue学习记录 vue.js javascript 前端
使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
vue + Element UI table动态合并单元格
我家媳妇儿萌哒哒
element UI vue.js 前端 javascript
一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
vue 创建项目报错：command failed: npm install --loglevel error
那鱼、会飞
vue.js vue-cli3
这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/
[email protected] @vue/
[email protected] （注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）
java毕设程序源码王哥
php 课程设计 vue.js
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
字节二面
Redstone Monstrosity
前端 面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
vue render 函数详解 (配参数详解)
你的眼睛會笑
vue2 vue.js javascript 前端
vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
前端代码上传文件
余生逆风飞翔
前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
焚木灵
node.js vue
可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
hw_happy
开发语言 前端 vue.js javascript
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘
周bro
vue.js 前端 javascript node.js npm
node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本
[email protected] 执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
vue2实现复制,粘贴功能
周bro
vue.js javascript 前端
一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
【vite 自动配置路由】
CODER-V
前端 javascript vue.js 前端 软件构建
手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
Vue + Express实现一个表单提交
九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
Vue3 vant组件库自动导入
不叫虎子
Vue vue.js 前端 javascript 前端框架 typescript
实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
vant-element-ts一起使用存在的问题
flynn_
问题总结 vue
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
第三十一节:Vue路由:前端路由vs后端路由的了解
曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台
网顺技术团队
成品程序项目 java vue.js 汽车 课程设计 spring boot
基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
前端 前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
C# 开发教程-入门基础
天马3798
教程系列整理 c# 开发语言
1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
若依后端正常启动但是uniapp移动端提示后端接口异常
大可大可抖
uni-app
pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
好看的vue登录页面(附 源代码 背景图)
小小薛定谔
vue.js javascript css 前端
一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
jsonp 常用util方法
hw1287789687
jsonp jsonp常用方法 jsonp callback
jsonp 常用java方法
(1)以jsonp的形式返回:函数名(json字符串)
/***
* 用于jsonp调用
* @param map : 用于构造json数据
* @param callback : 回调的javascript方法名
* @param filters : <code>SimpleBeanPropertyFilter theFilt
多线程场景
alafqq
多线程
0
能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0
对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？
Java多线程
2012年11月23日 15:41 Young9007 Young9007
4
0 0 4
Comment添加评论关注(2)
3个答案 按时间排序 按投票排序
0
0
最典型的如：
1、
Maven学习——修改Maven的本地仓库路径
Kai_Ge
maven
安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。
placeholder的浏览器兼容
120153216
placeholder
【前言】
自从html5引入placeholder后，问题就来了，
不支持html5的浏览器也先有这样的效果，
各种兼容，之前考虑，今天测试人员逮住不放，
想了个解决办法，看样子还行，记录一下。
【原理】
不使用placeholder，而是模拟placeholder的效果，
大概就是用focus和focusout效果。
【代码】
<scrip
debian_用iso文件创建本地apt源
2002wmj
Debian
1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下
2.创建N个挂载点目录
如下：
debian:~#mkdir –r /media/dvd1
debian:~#mkdir –r /media/dvd2
debian:~#mkdir –r /media/dvd3
….
debian:~#mkdir –r /media
SQLSERVER耗时最长的SQL
357029540
SQL Server
对于DBA来说，经常要知道存储过程的某些信息：
1. 执行了多少次
2. 执行的执行计划如何
3. 执行的平均读写如何
4. 执行平均需要多少时间
列名 &
com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil
7454103
eclipse
今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下：
错误提示信息：
An error has occurred.See error log for more details.
Reason:
com/genuitec/
用正则删除文本中的html标签
adminjun
java html 正则表达式 去掉html标签
使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。
如下：
public static String Html2Text(String inputString) {
String htmlStr = inputString; // 含html标签的字符串
String textSt
嵌入式系统设计中常用总线和接口
aijuans
linux 基础
嵌入式系统设计中常用总线和接口
任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
Java函数调用方式——按值传递
ayaoxinchao
java 按值传递 对象 基础数据类型
Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。
首先，让我们看一看基础数据类型是如何按值传递的。
public static void main(String[] args) {
int a = 2;
ios音量线性下降
bewithme
ios音量
直接上代码吧
//second 几秒内下降为0
- (void)reduceVolume:(int)second {
KGVoicePlayer *player = [KGVoicePlayer defaultPlayer];
if (!_flag) {
_tempVolume = player.volume;
与其怨它不如爱它
bijian1013
选择 理想 职业 规划
抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。
一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。
一边时间不够用一边浪费时间
bingyingao
工作 时间 浪费
一方面感觉时间严重不够用，另一方面又在不停的浪费时间。
每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。
精神还是很差，下午像一直野鬼在城市里晃荡。
为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。
控制让自己周末早睡早起，你就成功了一半。
有多少个工作
【Scala八】Scala核心二：隐式转换
bit1129
scala
Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
sudoku slover in Haskell (2)
bookjovi
haskell sudoku
继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。
board = [0,3,4,1,7,0,5,0,0,
0,6,0,0,0,8,3,0,1,
7,0,0,3,0,0,0,0,6,
5,0,0,6,4,0,8,0,7,
Java-Collections Framework学习与总结-HashSet和LinkedHashSet
BrokenDreams
linkedhashset
本篇总结一下两个常用的集合类HashSet和LinkedHashSet。
它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
读《研磨设计模式》-代码笔记-备忘录模式-Memento
bylijinnan
java 设计模式
声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
/*
* 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
《RAW格式照片处理专业技法》笔记
cherishLC
PS
注意，这不是教程！仅记录楼主之前不太了解的
一、色彩（空间）管理
作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼）
注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
使用 Git 下载 Spring 源码 编译 for Eclipse
crabdave
eclipse
使用 Git 下载 Spring 源码 编译 for Eclipse
1、安装gradle，下载 http://www.gradle.org/downloads
配置环境变量GRADLE_HOME，配置PATH %GRADLE_HOME%/bin，cmd，gradle -v
2、spring4 用jdk8 下载 https://jdk8.java.
mysql连接拒绝问题
daizj
mysql 登录权限
mysql中在其它机器连接mysql服务器时报错问题汇总
一、[running]
[email protected] :~$mysql -uroot -h 192.168.9.108 -p //带-p参数，在下一步进行密码输入
Enter password: //无字符串输入
ERROR 1045 (28000): Access
Google Chrome 为何打压 H.264
dsjt
apple html5 chrome Google
Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。
Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
yii 获取控制器名 和方法名
dcj3sjt126com
yii framework
1. 获取控制器名
在控制器中获取控制器名: $name = $this->getId();
在视图中获取控制器名: $name = Yii::app()->controller->id;
2. 获取动作名
在控制器beforeAction()回调函数中获取动作名: $name =
Android知识总结（二）
come_for_dream
android
明天要考试了，速速总结如下
1、Activity的启动模式
standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。）
singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元
gcq511120594
工作 项目管理
高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！
首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
linux expect
heipark
expect
1. 创建、编辑文件go.sh
#!/usr/bin/expect
spawn sudo su admin
expect "*password*" { send "13456\r\n" }
interact
2. 设置权限
chmod u+x go.sh 3.
Spring4.1新特性——静态资源处理增强
jinnianshilongnian
spring 4.1
目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T
idea ubuntuxia 乱码
liyonghui160com
1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个 字体文件。
2.在ubuntu 下可以执行下面操作安装该字体：
sudo mkdir /usr/share/fonts/truetype/simsun
sudo cp simsun.ttf /usr/share/fonts/truetype/simsun
fc-cache -f -v
改良程序的11技巧
pda158
技巧
有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。
让我们看一些基本的编程技巧：
尽量保持方法简短
永远永远不要把同一个变量用于多个不同的
300个涵盖IT各方面的免费资源（下）——工作与学习篇
shoothao
创业 免费资源 学习课程 远程工作
工作与生产效率:
A. 背景声音
Noisli:背景噪音与颜色生成器。
Noizio:环境声均衡器。
Defonic:世界上任何的声响都可混合成美丽的旋律。
Designers.mx:设计者为设计者所准备的播放列表。
Coffitivity:这里的声音就像咖啡馆里放的一样。
B. 避免注意力分散
Self Co
深入浅出RPC
uule
rpc
深入浅出RPC-浅出篇
深入浅出RPC-深入篇
RPC
Remote Procedure Call Protocol
远程过程调用协议
它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发
