Vue系列-01-基础语法
vue.js文件
# https://blog-static.cnblogs.com/files/lichengguo/vue.js
# 下载该文件，保存的路径为代码同级目录 js/vue.js 文件
初次使用vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 引入vue -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3. 通过vue对象提供的指令显示内容到html网页中 -->
<h1>{{message}}</h1>
<p @click="num+=1">{{num}}</p>
数值： <input type="text" v-model="num" disabled>
</div>
<script>
// 2. 创建vue对象,Vue首字母大写的
let vm = new Vue({
el:"#app", // 当前vue对象可以操作的页面范围，一般就是ID元素的选择符
data:{ // 当前vue对象要输出到html页面中的数据
message:"登录错误!",
num: 10084,
}
});
</script>
</body>
</html>
vue显示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
{{str1.split("").reverse().join("").toUpperCase()}}<br>
<input type="text" v-model="str1"><br>
<span v-html="img"></span>
</div>
<script>
let vm = new Vue({
el:"#index",
data:{
str1:"hello ",
img:"<img src='#'>"
}
})
</script>
</body>
</html>
vue常用指令
操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="typeStr" placeholder="请输入wifi密码"> <button @click="changeType">{{ tipStr }}</button>
</div>
<script>
let vm = new Vue({
el:"#index",
data:{
url:"#",
title:"测试图片",
typeStr:"password",
tipStr:"显示密码",
},
methods: {
//
changeType(){
// console.log("1")
// console.log(this.typeStr)
if (this.typeStr == "text") {
this.typeStr = "password"
this.tipStr = "显示密码"
} else {
this.typeStr = "text"
this.tipStr = "隐藏密码"
}
}
},
})
</script>
</body>
</html>
操作事件1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="index">
<img :src="url" :alt="title"><br>
<input :type="type" placeholder="请输入wifi密码">
<button @click="clickHander">{{type_tips}}</button>
<!--<button v-on:click="clickHander">{{type_tips}}</button>-->
</div>
<script>
let vm = new Vue({
el:"#index",
// 在data可以定义当前vue对象调用的属性,调用格式: this.变量名,例如： this.title
data:{
url:"#",
title:"图片不见了",
type:"password",
type_tips: "显示密码",
},
methods:{
// 在methods中可以定义当前vue对象调用的方法,调用格式：this.方法名(),例如： this.clickHander()
clickHander(){
// alert(this.type); // 调用上面的data里面的数据
if(this.type=="password"){
this.type="text";
this.type_tips="隐藏密码";
}else{
this.type="password";
this.type_tips="显示密码";
}
}
}
})
</script>
</body>
</html>
操作事件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="++num">+</button>
<input type="text" v-model="num">
<button @click="sub">-</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
num:0,
},
methods:{
sub(){
if(this.num<=1){
this.num=0;
}else{
this.num--;
}
},
}
})
</script>
</body>
</html>
vue操作元素样式
class样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.red{
color: red;
border: 1px solid blue;
}
.bg{
background: yellow;
}
.fz{
font-size: 32px;
}
.bg1{
background: red;
}
.bg2{
background: orange;
}
</style>
</head>
<body>
<div id="box">
<!-- :class={css样式类名: 变量} -->
<p :class="{red:red_bool, bg:bg_bool}">一段文本</p>
<button @click="red_bool=false;">去掉样式</button>
<button @click="red_bool=true;">添加样式</button>
<br>
<br>
<br>
<p :class="p_cls">一段文本</p>
<button @click="p_cls.red=false, p_cls.bg=false;">去掉样式</button>
<button @click="p_cls.red=true, p_cls.bg=true;">添加样式</button>
<br>
<br>
<br>
<p :class="[arr1,arr2]">一段文本</p>
<button @click="arr1.fz=false;">字体变小</button>
<button @click="arr1.fz=true;">字体变大</button>
<br>
<br>
<br>
<p :class="status?'bg1':'bg2'">一段文本</p>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
red_bool:false,
bg_bool:true,
p_cls:{
red:true,
bg:true
},
arr1:{
red:true,
fz:true,
},
arr2:{
bg:true,
},
status:true,
}
})
</script>
</body>
</html>
style样式
<!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 :style="{backgroundColor:bg, color:cg}">一段文本</p>
<button @click="cg='white'">改变字体</button>
<br>
<br>
<br>
<br>
<p :style="p_style">一段文本</p>
<button @click="p_style.color='white'">改变字体</button>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
bg:"red",
cg:"blue",
p_style:{
backgroundColor:"orange",
color:"black",
}
}
})
</script>
</body>
</html>
操作样式案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="card">
<div class="title">
<span @click="index=0" :class="index==0? 'current':'' ">国内新闻</span>
<span @click="index=1" :class="index==1? 'current':'' ">国际新闻</span>
<span @click="index=2" :class="index==2? 'current':'' ">银河新闻</span>
</div>
<div class="content">
<div class="list" :class="index==0?'active':''">国内新闻列表</div>
<div class="list" :class="index==1?'active':''">国际新闻列表</div>
<div class="list" :class="index==2?'active':''">银河新闻列表</div>
</div>
</div>
<script>
// 思路：
// 当用户点击标题栏的按钮[span]时，显示对应索引下标的内容块[.list]
// 代码实现：
var card = new Vue({
el:"#card",
data:{
index:0, // 当前显示的内容块
},
});
</script>
</body>
</html>
判断指令
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">
<div v-if="login_status==false" class="login">
<a href="#">登录</a>
<a href="">注册</a>
</div>
<div v-if="login_status==true" class="user-info">
<div>欢迎～</div>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status:false, // 假设有个登录状态
},
})
</script>
</body>
</html>
v-if v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-if="login_status" class="user-info">
<span>欢迎～</span>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
<div v-else class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status: false, // 假设有个登录状态
}
})
</script>
</body>
</html>
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>
</head>
<body>
<div id="box">
<span v-if="sex==0">男</span>
<span v-else-if="sex==1">女</span>
<span v-else>保密</span>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
sex:3, // 假设有个变量表示性别
}
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<div v-show="login_status" class="user-info">
<span>欢迎～</span>
<a href="">个人中心</a>
<a href="">退出登录</a>
</div>
<div v-show="!login_status" class="login">
<a href="">登录</a>
<a href="">注册</a>
</div>
</div>
<script>
let vm = new Vue({
el:"#box",
data:{
login_status: false, // 假设有个变量表示登录状态
}
})
</script>
</body>
</html>
渲染指令[循环指令]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#card{
width: 500px;
height: 350px;
}
.title{
height:50px;
}
.title span{
width: 100px;
height: 50px;
background-color:#ccc;
display: inline-block;
line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
text-align:center;
}
.content .list{
width: 500px;
height: 300px;
background-color: yellow;
display: none;
}
.content .active{
display: block;
}
.title .current{
background-color: yellow;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in book_list">{{book.title}}</li>
</ul>
<hr>
<br>
<table border="1" align="center" width="799">
<tr>
<th>序号</th>
<th>ID</th>
<th>图书名</th>
<th>价格</th>
</tr>
<tr v-for="book,index in book_list">
<td>下标：{{index+1}}</td>
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.price}}</td>
</tr>
</table>
<hr>
<hr>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
book_list:[
{"id":11,"title":"图书名称1","price":20},
{"id":12,"title":"图书名称2","price":2000.3},
{"id":13,"title":"图书名称3","price":200.50},
{"id":14,"title":"图书名称4","price":200},
]
}
})
</script>
<ul id="test">
<!-- k是每一个键名, v是每一个value值-->
<li v-for="v, k in book">{{k}}:{{v}}</li>
</ul>
<script>
var vm3 = new Vue({
el:"#test",
data:{
book: {
// "attr属性名":"value属性值"
"id":11,
"title":"图书名称1",
"price":200
},
},
})
</script>
</body>
</html>
过滤器
Filters.js
// 全局过滤器
// Vue.filter("过滤器名称","调用过滤器时执行的函数")
Vue.filter("RMB", function(value){
return value+"元";
})
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
价格：{{ price|keepdot2(3)|RMB }}<br>
价格：{{ price|keepdot2(2)|RMB }}<br>
价格：{{ price|keepdot2(1)|RMB }}<br>
价格：{{ price|keepdot2(4) }}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3
},
methods:{},
// 普通过滤器[局部过滤器]
filters:{
//
keepdot2(value,dot){
return value.toFixed(dot)
},
},
})
</script>
</body>
</html>
计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/filters.js"></script>
</head>
<body>
<div id="app">
原价格：{{price|k2|RMB}}<br>
折扣价：{{new_price|RMB}}<br>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
price: 20.3,
sale: 0.6, // 折扣
},
// 过滤器
filters:{
k2(value){
return value.toFixed(2)
}
},
// 计算属性
computed:{
new_price(){
return (this.price * this.sale).toFixed(2);
}
}
})
</script>
</body>
</html>
监听属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
账号：<input type="text" v-model="form.username"><span :style="user_style">{{user_text}}</span><br><br>
密码：<input type="password" v-model="form.password"><br><br>
确认密码：<input type="password" v-model="form.password2"><br><br>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
form:{
username:"",
password:"",
password2:"",
},
user_style:{
color: "red",
},
user_text:"用户名长度只能是4-10位"
},
// 监听属性
// 监听属性的变化
watch:{
"form.username": function(value){
if(value.length>=4 && value.length<=10){
this.user_style.color="blue";
this.user_text="用户名长度合法！";
}else{
this.user_style.color="red";
this.user_text="用户名长度只能是4-10位！";
}
},
},
})
</script>
</body>
</html>
vue对象生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
{{user_text}}
</div>
<script>
// vm初始化时会有以下几个阶段
// 1. vue创建对象vm
// 2. vm对象把数据添加到data属性中
// 3. vm对象显示数据到视图模板html页面中
var vm = new Vue({
el:"#app",
data:{
user_text:"用户名长度只能是4-10位"
},
// vm对象把数据添加到data属性之前
beforeCreate(){
console.log("--------beforeCreate---------");
console.log("$data=", this.$data);
console.log("$el=", this.$el);
console.log("user_text=", this.user_text)
},
// vm对象把数据添加到data属性之后
created(){
// 这里可以使用ajax到后台获取数据给data
console.log("----------created-------------");
console.log("$data=", this.$data);
console.log("$el=", this.$el);
console.log("user_text=", this.user_text)
},
// vm对象显示数据到视图模板html页面之前
// 如果执行 beforeMount，则表示vm对象已经获取到模板ID对象
beforeMount(){
console.log("----------beforeMount-------------");
console.log("$el=", this.$el);
},
// vm对象显示数据到视图模板html页面以后
mounted(){
// 使用ajax或者js在页面刷新前，完成页面修改的操作
console.log("----------mounted-------------");
console.log("$el=", this.$el);
},
})
</script>
</body>
</html>
vue阻止事件行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="">
账号：<input type="text" v-model="user"><br><br>
密码：<input type="password" v-model="pwd"><br><br>
<button @click.prevent="loginhander">登录</button>
</form>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{
user:"",
pwd:"",
},
methods:{
loginhander(){
if(this.user.length<3 || this.pwd.length<3){
// 长度太短不能登录
alert("长度太短不能登录");
}else{
// 页面跳转
location.assign("http://www.baidu.com")
}
}
}
})
</script>
</body>
</html>
vue阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
.box1{
width: 400px;
height: 400px;
background: red;
}
.box2{
width: 150px;
height: 150px;
background: orange;
}
</style>
</head>
<body>
<div id="app">
<div class="box1" @click="show1">
<div class="box2" @click="show2">
<p @click.stop="show3">一段文本</p>
</div>
</div>
</div>
<script>
var vm1 = new Vue({
el:"#app",
data:{},
methods:{
show1(){
console.log("box1");
},
show2(){
console.log("box2");
},
show3(){
console.log("点击了p标签");
}
}
})
</script>
</body>
</html>
vue实现todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="todolist" class="list_con">
<h2>To do list</h2>
<input type="text" v-model="message" class="inputtxt">
<input type="button" @click="addItem" value="增加" class="inputbtn">
<ul id="list" class="list">
<li v-for="item,key in dolist">
<span>{{item}}</span>
<a @click="delItem(key)" class="del">删除</a>
<a @click="upItem(key)" class="up" > ↑ </a>
<a @click="downItem(key)" class="down"> ↓ </a>
</li>
</ul>
</div>
<script>
// 计划列表代码
let vm = new Vue({
el:"#todolist",
data:{
message:"",
dolist:[
"学习html",
"学习css",
"学习javascript",
]
},
methods:{
addItem(){
if(this.message==""){
console.log("我被执行了")
return false;
}
this.dolist.push(this.message);
this.message = ""
},
delItem(key){
// 删除和替换
// 参数1: 开始时的下标
// 参数2: 元素长度，如果不填默认删除到最后
// 参数3: 表示使用当前参数替换已经删除内容的位置
// this.dolist.splice(key, 1, "你好");
this.dolist.splice(key, 1,);
},
upItem(key){
if(key==0){
return false;
}
// 向上移动
let result = this.dolist.splice(key,1); // 先删除元素在原来列表的位置，并拿取到该元素的返回值
this.dolist.splice(key-1,0,result[0]); // 插入新的元素
},
downItem(key){
// 向下移动
let result = this.dolist.splice(key, 1);
console.log(result);
this.dolist.splice(key+1,0,result[0]);
},
}
})
</script>
</body>
</html>
练习-表格管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 注意引入vue.js -->
<script src="js/vue.js"></script>
<style>
table{
width: 700px;
border-collapse: collapse; /* 合并表格的边框 */
}
tr{
height: 42px;
}
table,td,th{
border: 1px solid black;
}
.box{
background-color: #ddd;
border-radius: 5px; /* 边框圆角 */
padding-top: 15px;
padding-left: 30px;
padding-bottom: 15px;
width: 290px;
height: 160px;
position: fixed;
margin: auto;
left: 0px;
right: 0px;
top:0;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="is_show_form=true">添加商品</button>
<br><br>
<table>
<tr>
<th>商品ID</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr v-for="goods,key in goods_list">
<td>{{goods.id}}</td>
<td>{{goods.name}}</td>
<td>{{goods.number}}</td>
<td>{{goods.price}}</td>
<td>
<button @click="edit(key)">编辑</button>
<button @click="del(key)">删除{{key}}</button>
</td>
</tr>
</table>
<div class="box" v-show="is_show_form">
商品标题: <input type="text" v-model="name"><br><br>
商品数量: <input type="text" v-model="number"><br><br>
商品价格: <input type="text" v-model="price"><br><br>
<!-- 添加商品的时候是没有ID的，编辑保存商品的时候才有ID -->
<button @click="id>0? save():add() ">保存</button>
<button @click="cancel">取消</button>
</div>
</div>
<script>
/*
* 编辑商品的思路：
* 1. 用户点击"编辑"，显示表单,表单中是当前商品的信息
* 2. 用户在点击表单的保存按钮以后，把用户填写在表单里面的数据同步到data属性中的goods_list
* */
let vm = new Vue({
el:"#app",
data:{
key:"", // 当前编辑的数组成员索引
id:"", // 商品ID
name: "", // 保存表单中的商品标题
number:"", // 保存表单中的商品数量
price:"", // 保存表单中的商品价格
is_show_form: false, // 控制表单显示隐藏
goods_list:[
{"id":1,"name":"商品1","number":30,"price":30.5},
{"id":2,"name":"商品1","number":30,"price":30.5},
{"id":3,"name":"商品1","number":30,"price":30.5},
{"id":4,"name":"商品1","number":30,"price":30.5},
{"id":5,"name":"商品1","number":30,"price":30.5},
],
},
methods: {
//
cancel(){
// 隐藏表单
this.is_show_form=false;
// 清空值
this.id='';
this.key='';
this.name='';
this.number='';
this.price='';
},
//
add(){
// 如果有空值不添加
if (this.name=="" || this.number=="" || this.price==""){
return this.cancel()
}
this.goods_list.push({
"id": this.goods_list.length+1, // 原来的长度基础上+1
"name":this.name,
"number":this.number,
"price":this.price,
});
// 可以在vue的方法中调用内部定义的方法,直接通过this.方法名()
this.cancel();
},
//
del(key){
this.goods_list.splice(key,1);
},
// 显示编辑的表单数据
edit(key){
// 根据key获取对应的数组成员,保存到表单中
this.id = this.goods_list[key].id
this.name = this.goods_list[key].name
this.number = this.goods_list[key].number
this.price = this.goods_list[key].price
this.key = key; // 保存当前要编辑的商品索引下标
this.is_show_form = true;
},
// 保存更新的数据
save(){
let key = this.key;
this.goods_list[key].name = this.name
this.goods_list[key].number = this.number
this.goods_list[key].price = this.price
this.cancel();
},
},
})
</script>
</body>
</html>
Vue系列-01-基础语法的更多相关文章
- openresty开发系列13--lua基础语法2常用数据类型介绍
openresty开发系列13--lua基础语法2常用数据类型介绍 一)boolean(布尔)布尔类型,可选值 true/false: Lua 中 nil 和 false 为"假" ...
- Java 之 I/O 系列 01 ——基础
Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 整理<疯狂j ...
- openresty开发系列15--lua基础语法4表table和运算符
openresty开发系列15--lua基础语法4表table和运算符 lua中的表table 一)table (表)Table 类型实现了一种抽象的"关联数组".即可用作数组,也 ...
- openresty开发系列14--lua基础语法3函数
openresty开发系列14--lua基础语法3函数 一)function (函数) 有名函数: optional_function_scope function function_name( ar ...
- VUE 入坑系列 一 基础语法
html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...
- Vue 2.0基础语法：系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- vue总结 01基础特性
最近有时间来总结一下vue的知识: 一.vue.js 被定义成一个开发web界面的前端库,是一个非常轻量的工具.vue.js本身具有响应式和组件化的特点. 我们不需要在维护视图和数据的统一上花费大量的 ...
- PHP学习笔记01——基础语法
<!DOCTYPE html> <html> <?php // 1.使用$加变量名来表示变量,php是弱类型语言,不要求在使用变量前声明,第一次赋值时变量才被创建 $a ...
- Python3 系列之 基础语法篇
基础数据类型 整数 python 可以处理任意大小的整数 浮点数 python 可以处理任意大小的浮点数,但是需要注意的一点是:整数运算永远是精确的(除法也是精确的),而浮点数运算则可能会有四舍五入的 ...
- Vue 系列之 基础入门
背景叙述 渐进式 JavaScript 框架 易用:已经会了 HTML.CSS.JavaScript?即刻阅读指南开始构建应用! 灵活:不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩. 高 ...
随机推荐
- Java：Java中equlas和==的区别
== 比较的是栈内存的地址值,用来判断两个对象的地址是否相同,即是否是指相同一个对象.比较的是真正意义上的指针操作. 基本数据类型如:byte,short,char,int,long,float,do ...
- git使用---安装，提交，回退，修改，分支，标签等
下面是对git的各种使用及命令的基础使用,来自廖雪峰老师的git教程,这个收录下,作为git的使用总结. github上面地址为:https://github.com/Zhangguoliu/lear ...
- Charles使用笔记001
一.抓电脑的请求 Proxy-->勾选Windows Proxy 二.Charles 拦截原理 三.Charles 拦截修改数据 选择一个链接-->右键-->勾选Breakpoint ...
- C语言：体现\r的结果
#include <stdio.h> #include <windows.h> //体现\r的结果 //转义字符\r,回车,将光标移动到当前行最开始 main() { char ...
- python adb 关闭拼多多
def gbpdd(sjh): aaka="adb -s {0} shell am force-stop com.xunmeng.pinduoduo".format(sjh) aa ...
- java集合(3)-Java8新增的Stream操作集合
Java8新增了Stream,IntStream,LongStream,DoubleStream等流式API,这些API代表多个支持串行和并行聚集操作的元素.上面的4个接口中,Stream是一个通用的 ...
- [刘阳Java]_BeanNameViewResolver视图解析器_第8讲
BeanNameViewResolver:这个视图解析器跟XmlViewResolver有点类似,也是通过把返回的逻辑视图名称去匹配定义好的视图bean对象.它要求视图bean对象都定义在Spring ...
- PAT乙级：1066 图像过滤 (15分)
PAT乙级:1066 图像过滤 (15分) 题干 图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色 ...
- Guava - Map
创建Map 通常在创建map时使用new HashMap<>();的方法,guava提供了一个简洁的方法 Maps.newHashMap(); List转换Map List<Solu ...
- zookeeper与eureka比较
一个分布式系统不可能同时满足C(一致性).A(可用性)和P(分区容错性) zookeeper确保cp 当向注册中心查询服务列表时,我们可以容忍注册中心返回的是几分钟以前的注册信息,但不能接受服务直接d ...