【IMWeb训练营作业】vue.js-组件的定义及使用

最新推荐文章于 2017-04-24 17:24:03 发布

平淡EYRE

最新推荐文章于 2017-04-24 17:24:03 发布

阅读量206

点赞数 1

本文链接：https://blog.csdn.net/pingdanEYRE/article/details/70432437

版权

上一篇学习了vue.js的入门,这一篇主要记录一下vue.js中组件的定义及使用。

select.html代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="./vue.js">
		</script>
	</head>

	<body>
		<div id="app">
			<h2>自定义的下拉框(局部注册)</h2>
			<custom-select></custom-select>
		</div>

		<div id="app1">
			<h2>自定义的下拉框(全局注册)</h2>
			<custom-select></custom-select>
		</div>
		<script>
			//全局注册
			//注册组件,命名方法:custom-select或者customSelect,但是使用只能用custom-select
			Vue.component("custom-select", {
				props: ["btnValue"],
				template: `
			<select name="" id="">
				<option value="">北京</option>
				<option value="">上海</option>
				<option value="">武汉</option>
			</select>
			`
			})

			//局部注册
			new Vue({
				el: "#app",
				components: {
					"custom-select": {
						template: `
			<select name="" id="">
				<option value="">北京1</option>
				<option value="">上海1</option>
				<option value="">武汉1</option>
			</select>
			`
					}
				}
			})

			new Vue({
				el: "#app1"
			})
		</script>
	</body>

</html>

组件的注册分为全局注册和局部注册，如果两个同时存在的话，局部注册会覆盖全局注册的组件。

前两天没看到群消息，今天才看到，太匆忙,没有加css属性，效果图如下所示。