<html lang="en">
<head>
<meta charset="UTF-8">
<title>Count</title>
<!-- Vue CDN-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="app" >
<span v-bind:count="count" v-on:click="executeCount">click me -->+ </span>
<br>
<span v-bind:count="count" v-on:click="executeCountSub">click me -->-</span>
<br><br><br><br><br>
<parent>
<!-- <span slot="preLove">love you {{count}}</span>-->
<!-- <span slot="afterLove">times</span>-->
<child1 slot="preLove" v-bind:count="count"></child1>
<child2 slot="afterLove" v-bind:count="count"></child2>
</parent>
</div>
<script>
Vue.component("parent",{
props:['count'],
template:'<div>\
<slot name="preLove">\
</slot>\
<slot name="afterLove"></slot>\
</div>'
});
Vue.component("child1",{
props:['count'],
template: '<div>Love Before {{count}}</div>'
});
Vue.component("child2",{
props:['count'],
template: '<div>Love After{{count+999}}</div>'
});
var vm = new Vue({
el:"#app",
data(){
return{
//请求后返回的参数，必须和json字符串格式一致；
}
},
data:{
count:0
},
methods:{
executeCount :function(){
this.count++;
},
executeCountSub:function(){
this.count--;
}
},
mounted() {
<!--axios fa song qing qiu-->
axios.get('/user/article/1').then(response=>(console.log("111")));
}
})
</script>
</body>
</html>
|