Vue2.0-组件基础

最新推荐文章于 2023-04-11 07:57:52 发布

acheding

最新推荐文章于 2023-04-11 07:57:52 发布

阅读量92

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/bDreamer/article/details/118704114

版权

本文展示了Vue2.0中组件的使用，包括按钮计数器组件、博客文章组件和插槽分发任务的实现。通过点击按钮增加计数，文章组件支持字体缩放，并通过事件监听器进行交互。此外，还演示了如何在组件中使用v-for指令和内联样式。

摘要由CSDN通过智能技术生成

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