vue property binding and interaction

Posted by ariliquin on Mon, 20 Jul 2020 18:09:56 +0200

vue directive binding properties

vue binds attributes by directive v-bind, src/width/height/title, such as v-bind:src='''can be abbreviated as: src=''', the same v-Bind:widthWait a moment, abbreviated as 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 directive binds style,class

Similarly, there are v-bind:class ="" ->: class=""

                   v-bind:style = "" - > :style =""

Note how the data is bound:

Class Binding Data Method:: class='[red]',: class='[red, blue]': class='json'

: class ='[red]'red is a property defined in the vue instance, using the following:

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' // Custom class name
        },
        methods:{}
    });
</script>
Same: class ='[red, blue]'can define multiple styles

<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", the attribute defined in the vue instance is a JSON object, and multiple styles can be placed in the JSON object

<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 binds data in a similar way to 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>
Change the above data to be bound to json data:

<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>

Template for vue

{{msg}}: Data Update Template Change

{{*msg}}: data is bound only once

{{{msg}}: Carry out escape output when MSG is html

vue interaction

Vue interaction requires vue-resource.js, send data format, interactive method is bound to Vue instance,

this.$http.XXX(

). then(function(res){//This callback function indicates success

res is a json data that needs to be passed throughRes.dataGet, and at the same time, be able toRes.statusGet Response Code

}), function(){//This callback function indicates failure

}

get request

<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" @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 request: note the addition of {emulateJSON:true} This way the content-type is defined as application/form-xxxx for the data to be sent successfully

this.$http.post('post.php',{
		    a:1,
		    b:20
},{
      emulateJSON:true
}).then(function(res){
     alert(res.data);
},function(res){
     alert(res.status);
});
jsonp: Cross-domain request, note if the name of the callback needs to be defined separately, the default is callback

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
		    wd:'a'
},{
		  jsonp:'cb'//Callback name, default name is "callback"
	}).then(function(res){
		    alert(res.data.s);
	},function(res){
		    alert(res.status);
	});

*Some learning notes, please point out the errors, thank you



Topics: Vue JSON PHP Attribute