<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue2.0-4</title>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<div id="blog-post-demo">
<!--<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>-->
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" v-on:enlarge-text="onEnlargeText" v-on:lessen-text="postFontSize -= $event"></blog-post>
</div>
</div>
<!--通过插槽分发任务-->
<div id="slot-demo">
<alert-box>Something bad happened.</alert-box>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js "></script>
<script>
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++ ">You clicked me {{ count }} times.</button>'
})
new Vue({
el: '#components-demo'
})
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post ">
<h3>{{ post.id }}.{{ post.title }}</h3>
<button v-on:click="$emit( 'enlarge-text', 0.1) ">
Enlarge text
</button>
<button v-on:click="$emit( 'lessen-text', 0.1) ">
Lessen text
</button>
<div v-html="post.content "></div>
</div>
`
})
new Vue({
el: '#blog-post-demo',
data: {
posts: [{
id: 1,
title: 'My journey with Vue',
content: '<span style="color: red; ">...content...</span>'
},
{
id: 2,
title: 'Blogging with Vue',
content: '<span style="color: yellow; ">...content...</span>'
},
{
id: 3,
title: 'Why Vue is so fun',
content: '<span style="color: green; ">...content...</span>'
}
],
postFontSize: 1
},
methods: {
onEnlargeText: function(enlargeAmount){
this.postFontSize += enlargeAmount
}
}
})
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
new Vue({
el: '#slot-demo'
})
</script>
</body>
</html>