<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue - 我的学习</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 注册组件 -->
<script>
Vue.component("blog_post", {
props: ["title", "content"],
template: `
<div>
<h3>{{ title }}</h3>
<label>字体：</label>
<button v-on:click="$emit('large', 0.5)">大</button>
<div v-html="content"></div>
</div>
`
// 触发当前实例上的事件
})
</script>
</head>
<body>
<div id="app">
<div v-bind:style="{ fontSize: blogFontSize + 'em' }">
<blog_post
v-for="blog in blogs"
v-bind:key="blog.id"
v-bind:title="blog.title"
v-bind:content="blog.content"
v-on:large="largeText($event)"></blog_post>
<!-- 监听当前实例上的自定义事件 -->
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
blogs: [
{ id: 0, title: "The 1st blog title.", content: "The 1st blog content." },
{ id: 1, title: "The 2nd blog title.", content: "The 1st blog content." },
{ id: 2, title: "The 3rd blog title.", content: "The 1st blog content." },
],
blogFontSize: 1,
},
methods: {
largeText: function (increase) {
this.blogFontSize += increase;
}
}
})
</script>
</body>
</html>
网友评论