vue组件Component

最新推荐文章于 2024-02-08 10:28:07 发布

提拉米秋

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41535326/article/details/102694867

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。下面是一个简单的组件例子：

<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	</head>
	<body>
		<div id='app'>
		<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>
		<script type="text/javascript">
			Vue.component('blog-post', {
			  props: ['title'],
			  template: '<h3>{{ title }}</h3>'
			})
			new Vue({
				el:'#app'
			})
			
		</script>
	</body>
</html>