vue 属性绑定和交互
vue属性绑定和交互
·
vue指令绑定属性
vue 通过指令v-bind进行属性绑定,src/width/height/title,例如v-bind:src=''' 可以简写为:src=''',同样的v-bind:width等等,简写为:width,:height
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="box">
<img v-bind:src="a" :width = 'width' :heigth="height">
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
a:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
width:'200px',
height:'100px'
},
methods:{}
});
</script>
vue 指令绑定style,class
同样的有 v-bind:class = "" -> :class=""
v-bind:style = "" - > :style =""
需要注意的是进行绑定的数据方式:
class 绑定数据方式: :class="[red]", :class="[red,blue]" :class="json"
:class = "[red]" red是 vue实例中定义的属性,使用如下:
style>
.red{
width:100px;
height:200px;
background-color: antiquewhite;
}
</style>
<body>
<div id="box">
<div :class="[red]">
</div>
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
red:'red' // 自定义的class名称
},
methods:{}
});
</script>
同样的:class = "[red,blue]" 可以定义多个样式
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.red{
width:100px;
height:200px;
background-color: antiquewhite;
}
.blue{
font-size: medium;
font-weight: 600;;
}
</style>
<body>
<div id="box">
<div :class="[red,blue]">
hello world!
</div>
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
red:'red',
blue:'blue'
},
methods:{}
});
</script>
:class = "json",在vue实例中定义的属性为json对象,json对象中可以放置多个样式
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.red{
width:100px;
height:200px;
background-color: antiquewhite;
}
.blue{
font-size: medium;
font-weight: 600;;
}
</style>
<body>
<div id="box">
<div :class="json">
hello world!
</div>
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
json:{
red:'red',
blue:'blue'
}
},
methods:{}
});
</script>
style的绑定数据的方式和class类似一样:
:style = "[a]", :style= "[a,b,c]" :style = "json"
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
</style>
<body>
<div id="box">
<div :style="[width,height,back]" >
hello world!
</div>
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
width:{width:'200px'},
height:{height:'300px'},
back:{backgroundColor:'red'}
},
methods:{}
});
</script>
将上面的数据改为绑定json数据的:
<div id="box">
<div :style="a" >
hello world!
</div>
</div>
</body>
<script>
new Vue({
el:'#box',
data:{
a:{
width:'200px',
height:'300px',
backgroundColor:'red'
}
},
methods:{}
});
</script>
vue的模板
{{msg}} : 数据更新模板变化
{{*msg}} :数据只会绑定一次
{{{msg}}} : 当msg是html,进行转意输出
vue 交互
vue 做交互需要引入 vue-resource.js,发送数据格式,交互方法是绑定在vue实例上的,
this.$http.XXX(
).then(function(res){//这个回调函数表示成功了
res是一个json数据,需要的数据通过res.data获取,同时能够通过res.status获取响应码
}),function(){//这个回调函数表示失败了
}
get 请求
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<body>
<div id="box">
<input type="button" value="点击" @click="show()">
</div>
</body>
<script>
new Vue({
el:"#box",
data:{},
methods:{
show:function(){
this.$http.get('test.php',{a:'a',b:'b'}).then(function (res) {
console.log(res.status);
alert(res.data);
}),function(res){
console.log(res.status);
}
}
}
});
</script>
post请求:
注意加上{emulateJSON:true} 这样content-type定义为 application/form-xxxx,数据才能发送成功
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp: 跨域请求,注意callback的名称是否需要另外定义,默认就是callback
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb'//callback名字,默认名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
* 一些学习笔记,有错误请指出,谢谢
更多推荐
已为社区贡献4条内容
所有评论(0)