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><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><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>this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});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