Web前端-Vue--v-bind，vue-resource，vue-axios
v-bind
在vue中 为了能够让标签的自带属性(比如 src width title id class style)
也能够使用vue中的变量 专门提供了一个指令 v-bind
写法:
简化写法:
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
![]()
v-bind可以绑定class属性
有这么几种绑定方式:
1.绑定一个字符串变量 字符串里面可以有一个或者多个class
msg:'fz co mar',
2.绑定一个数组变量 数组里面都是字符串元素 每一个元素就是一个class
arr:["fz","co","mar"]
3.绑定一个json变量 json的键 都是类名 值是布尔值
布尔值为true表示不该类启用
布尔值为false 表示该类不启用
json:{
fz:true,
co:true,
mar:true
}
4.绑定一个数组字面值(了解)
5.绑定json字面量的值(了解)
远看哈哈
v-bind绑定style属性
写法:
1.绑定一个字符串变量 字符串的值就是原来行内样式的长字符串
msg:'font-size:25px;color:purple;',
2.绑定一个json变量 json的键值对应的就是css的键值
json:{
fontSize:"40px",
color:"red",
margin:"200px"
}
3.绑定json字面量的值
4.绑定一个数组变量(根本不用)
arr:[{
fontSize:"40px",
margin:"200px"
},
{
color:"red",
}]
侧看呵呵
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);
})
}axios跨域
1.在config 文件夹下面找到index.js文件
2.在dev对象里面找到 proxyTable(没有就自己写一份)
3.在这里面添加一个自定义的属性名 以/开头 值是一个大括号
4.大括号里面 target是跨域服务器的协议+域名+端口
5.changeOrigin:true
6.pathRewrite:{}
7.在这个大括号里面定义一个键 "^之前在proxyTable里面定义的那个键"
8. 值是跨域服务器端口号后面的路径部分 (不包括最后一路径)
9.调用axios时 url写 "/自己起的那个名字/最后一层路径"
//axios代理模式跨域设置
proxyTable: {
// 自己起一个属性名 用作区分 以后可能好几个服务器需要我们跨域 这里面可以同时配置好多个
// 一个属性名是一个 属性名必须以/开头
"/itszt":{
//写的是要跨域的服务器的域名+端口 80端口可以省略不写 其他都得写
target:"http://localhost",
//值为true表示跨域
changeOrigin:true,
//此处的键就是上面的名字加一个^前缀
//值是跨域服务器的路径部分 除了最后一层 前边一直到端口位置的所有路径部分写到这
//最重要的部分!!!!!!!!!!!!!!!!Vue重启!!!!!!!!!!!!!!!!!!!!!!!!!!
//因为修改配置文件不会生效 必须重启
pathRewrite:{
"^/itszt":"/2019-11-28/php/"
}
}