vue 属性绑定和交互

最新推荐文章于 2022-12-28 21:29:52 发布

z1340954953

最新推荐文章于 2022-12-28 21:29:52 发布

阅读量2.8k

点赞数

分类专栏： vue 文章标签： vue绑定属性和交互

本文链接：https://blog.csdn.net/Ditto_zhou/article/details/78699967

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

* 一些学习笔记，有错误请指出，谢谢