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);
})
}