vue 属性绑定和交互

来源：互联网发布：安卓游戏编程软件编辑：程序博客网时间：2024/04/27 22:43

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

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

阅读全文

0 0