vue系列文章（12）初始组件的应用

最新推荐文章于 2024-11-08 21:46:59 发布

互联网极客

最新推荐文章于 2024-11-08 21:46:59 发布

阅读量292

点赞数

分类专栏： ----前端开发文章标签： vue系列文章

本文链接：https://blog.csdn.net/jsqfengbao/article/details/94741057

版权

----前端开发专栏收录该内容

32 篇文章 3 订阅

订阅专栏

在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在风格指南中查阅到关于组件名的其它建议。

下面代码中，我们注册了一个叫greeting的组件。

Vue.component("greeting",{
	template: `
		<p>
			{{name}}:大家好，给大家介绍下我的女朋友
			<button v-on:click="changeName">changeName</button>
		</p>
		`,
	data: function () {
		return {
			name: 'hello'
		}
	},
	methods: {
		changeName: function() {
			this.name = 'king'
		}
	}
})
new Vue({
	el: '#app-one'
});

new Vue({
	el: '#app-two'
});

应用greeting组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	
</head>
<body>
	<h1>初始化多个vue实例对象</h1>
	<div id="app-one">
		<greeting></greeting>
	</div>
	<div id="app-two">

	</div>
	<script type="text/javascript" src="app.js"></script>
</body>
</html>