v-bind
在vue中 爲了能夠讓標籤的自帶屬性(比如 src width title id class style)
也能夠使用vue中的變量 專門提供了一個指令 v-bind
寫法:
<img v-bind:src="vue的data中的變量" >
簡化寫法:
<img :src="vue的data中的變量" >
v-bind都可以綁定哪些屬性:
幾乎絕大部分屬性都可以綁定
img:
width height title alt src
其他標籤:
id title href placeholder type
輸入框的value 不能用v-bind綁定 必須用v-model
如果非得用v-bind那麼也沒有雙向數據綁定效果
就是不要用v-bind去綁定value!!!!!
img:
width height title alt src
<div id="app">
<p>
<button @click="add">圖片變大</button>
<button @click="jian">圖片變小</button>
<button @click="change">改變提示文字</button>
<button @click="change1">改變圖片</button>
</p>
<!--一旦使用v-bind 那麼width裏面必須寫變量或者js表達式-->
<p>
<img v-bind:width="msg" :title="title" src="image/11.jpg" alt="">
</p>
<p>
<img width="200" :src="imgsrc" alt="">
</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:200,
title:"我是圖片,你看啥?",
imgsrc:"image/11.jpg"
},
methods:{
add(){
this.msg+=10;
},
jian(){
this.msg-=10;
},
change(){
this.title="變化了,神不神奇!!!"
},
change1(){
this.imgsrc="image/mm552.jpg"
}
}
});
</script>
v-bind可以綁定class屬性
有這麼幾種綁定方式:
1.綁定一個字符串變量 字符串裏面可以有一個或者多個class
<div id="box" :class="msg">
msg:'fz co mar',
2.綁定一個數組變量 數組裏面都是字符串元素 每一個元素就是一個class
<div id="box" :class="arr">
arr:["fz","co","mar"]
3.綁定一個json變量 json的鍵 都是類名 值是布爾值
布爾值爲true表示不該類啓用
布爾值爲false 表示該類不啓用
<div id="box" :class="json">
json:{
fz:true,
co:true,
mar:true
}
4.綁定一個數組字面值(瞭解)
<div id="box" :class="['fz','co','mar']">
5.綁定json字面量的值(瞭解)
<div id="box" :class="{fz:true,co:true,mar:true}">
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
}
.fz{
font-size:25px;
}
.co{
color: white;
}
.mar{
margin: 100px;
}
</style>
<div id="app">
<p>
<input type="text" v-model="val">
</p>
<p>
<button @click="make">操作class</button>
</p>
<!--<div id="box" :class="msg">-->
<!--<div id="box" :class="arr">-->
<!--<div id="box" :class="json">-->
<!--<div id="box" :class="['fz','co','mar']">-->
<div id="box" :class="{fz:true,co:true,mar:true}">
遠看哈哈
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'fz co mar',
val:"",
// arr:["fz","co","mar"]
arr:[],
json:{
fz:true,
co:true,
mar:true
}
},
methods:{
make(){
this.arr.push(this.val)
}
}
});
</script>
v-bind綁定style屬性
寫法:
1.綁定一個字符串變量 字符串的值就是原來行內樣式的長字符串
<div id="box" :style="msg">
msg:'font-size:25px;color:purple;',
2.綁定一個json變量 json的鍵值對應的就是css的鍵值
<div id="box" :style="json">
json:{
fontSize:"40px",
color:"red",
margin:"200px"
}
3.綁定json字面量的值
<div id="box" :style='{fontSize:"40px",color:"red",margin:"200px"}'>
4.綁定一個數組變量(根本不用)
arr:[{
fontSize:"40px",
margin:"200px"
},
{
color:"red",
}]
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
}
</style>
<div id="app">
<!--<div id="box" :style="msg">-->
<!--<div id="box" :style="json">-->
<!--<div id="box" :style='{fontSize:"40px",color:"red",margin:"200px"}'>-->
<div id="box" :style='arr'>
側看呵呵
</div>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'font-size:25px;color:purple;',
json:{
fontSize:"40px",
color:"red",
margin:"200px"
},
arr:[{
fontSize:"40px",
margin:"200px"
},
{
color:"red",
}]
}
});
</script>
vue-resource
使用步驟:
vue本身不具有交互功能 需要像JQ插件那樣 再引入一個js文件
發起一個get請求:
this.$http.get()
參數:
1.服務器地址
2.提交的參數(拼接到地址欄後面)
3.json對象 進行參數配置的
get().then(回調函數1,回調函數2)
回調函數1是成功的回調
回調函數2是失敗的回調
在成功的回調裏面 通過 res.bodyText接收返回的數據
methods:{
vueSimpleGet(){
this.$http.get("php/01.getData.php")
.then(function (res) {
console.log(res.bodyText);
},function (err) {
})
}
}
給服務器提交參數: get方式是在地址欄後面拼接
methods:{
vueParamsGet(){
// get帶參數的請求
this.$http.get("php/01.getData.php?username=小砌牆&password=123456")
.then(function (res) {
console.log(res.bodyText);
})
}
}
發起一個post請求:
this.$http.post()
參數:
1.服務器地址
2.提交的參數
3.json對象 進行參數配置的
post().then(回調函數1,回調函數2)
回調函數1是成功的回調
回調函數2是失敗的回調
在成功的回調裏面 通過 res.bodyText接收返回的數據
vueSimplePost(){
this.$http.post("php/02.postData.php")
.then(function (res) {
console.log(res.bodyText);
},function (err) {
console.log(err);
})
}
post提交參數到服務器:
this.$http.post("服務器地址",{
提交的鍵值對
},{
emulateJSON:true //表示設置post提交的請求頭
//vue-resource幫我們封裝好了
}).then()
vueParamsPost(){
// post帶參數的請求
this.$http.post("php/02.postData.php",{
username:"小砌牆",
password:"123456"
},{
emulateJSON:true,
}) .then(function (res) {
console.log(res.bodyText);
})
}
vue-resource的跨域:
vue-resource支持jsonp跨域
// 沒有提交的參數就不拼接
this.$http.jsonp(服務器地址?提交的參數,{
一些鍵值對配置
})
.the(成功的回調)
vueJsonp(){
// vue-resource的跨域請求
this.$http.jsonp("http://localhost/2019-12-27/php/03.jsonpServer.php",{
jsonp:"show" //改變callback的鍵名的
})
.then(function (res) {
// 返回的數據一律按照字符串處理
// console.log(res.bodyText);
// 根據返回的數據類型進行自動解析
console.log(res.body);
})
}
vue-axios
vue-axios是基於promise語法封裝的一個交互手段
在vue中使用最多的
axios分爲簡單發起請求:
發起簡單get請求:
axios.get("服務器地址?參數")
.then(成功的回調)
.catch(失敗的回調)
成功的回調函數裏面 是一個data對象
data對象的data屬性是返回數據
vueSimpleGet(){
// 不提交參數
/* axios.get("php/01.getData.php")
.then(data=>{
console.log(data.data);
})*/
// 提交參數
axios.get("php/01.getData.php?username=小恰&password=123456")
.then(data=>{
console.log(data.data);
})
}
發起簡單post請求:
axios.post("服務器地址","鍵1=值1&鍵2=值2...")
.then(成功的回調)
.catch(失敗的回調)
成功的回調函數裏面 是一個data對象
data對象的data屬性是返回數據
vueSimplePost(){
// 不提交參數
/* axios.post("php/02.postData.php")
.then(data=>{
console.log(data.data);
})*/
// 提交參數
axios.post("php/02.postData.php","username=小砌牆&password=111222")
.then(data=>{
console.log(data.data);
})
}
axios方法的請求
使用格式:
axios(settings對象)
settings對象的常用屬性:
url:"服務器地址",
method:"get/post"
params/data:"提交的參數"
then是成功的回調
catch是失敗的回調
vueSimpleAxios(){
axios({
url:"php/04.axiosData.php",
// method:"get"
method:"post"
}).then(data=>{
console.log(data.data);
}).catch(err=>{
if(err) throw err;
})
}
axios向服務器提交參數
get方式:
1.在地址欄拼接
2.params屬性 值是一個大括號
裏面寫鍵值對 提交
axios({
url:"php/01.getData.php",
params:{
username:"小白白",
password:"123789"
}
}).then(data=>{
console.log(data.data);
})
vueAxiosGet(){
// get給服務器提交參數
/*axios({
url:"php/01.getData.php?username=小砌牆&password=789456",
}).then(data=>{
console.log(data.data);
})*/
axios({
url:"php/01.getData.php",
params:{
username:"小白白",
password:"123789"
}
}).then(data=>{
console.log(data.data);
})
}
post方式:
第一種提交參數的方式:
data:"鍵1=值1&鍵2=值2..."
第二種提交參數的方式:
需要用到 URLSearchParams()對象提交給服務器
第一步:
構建出URLSearchParams對象
第二步:
通過append方法 把參數拼接到這個對象裏面
第三步:
axios裏面的data屬性值 就是這個對象 提交給服務器
var hehe=new URLSearchParams();
hehe.append("username","小百強");
hehe.append("password","444666");
axios({
url:"php/02.postData.php",
method:"post",
data:hehe
}).then(data=>{
console.log(data.data);
})
vueAxiosPost(){
// post給服務器提交參數
/* axios({
url:"php/02.postData.php",
method:"post",
data:"username=大白白&password=456456"
}).then(data=>{
console.log(data.data);
})*/
var hehe=new URLSearchParams();
hehe.append("username","小百強");
hehe.append("password","444666");
axios({
url:"php/02.postData.php",
method:"post",
data:hehe
}).then(data=>{
console.log(data.data);
})
}