vue.js:全局组件和局部组件

全局组件和局部组件

全局组件的定义的代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>全局组件title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<cpn>cpn>
			<cpn>cpn>
			<cpn>cpn>
		div>
		<div id="app2">
			<cpn>cpn>
			<cpn>cpn>
		div>
		<script type="text/javascript">
			// 创建组件构造器
			const cpnC = Vue.extend({
				template:`
					

我是标题

我是内容:小奶虎

`
}) //注册组件(全局组件:意味着可以在多个Vue的实例下面使用) Vue.component('cpn',cpnC); var app = new Vue({ el: "#app", data:{ message:"hello vue" } }); var app2 = new Vue({ el:"#app2", data:{ message:"hello Vue" } });
script> body> html>

vue.js:全局组件和局部组件_第1张图片

局部组件的定义的代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>局部组件title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<cpn>cpn>
			<cpn>cpn>
			<cpn>cpn>
		div>
		<div id="app2">
			<cpn>cpn>
			<cpn>cpn>
		div>
		<script type="text/javascript">
			// 创建组件构造器
			const cpnC = Vue.extend({
				template:`
					

我是标题

我是内容:小奶虎

`
}) //注册组件(全局组件:意味着可以在多个Vue的实例下面使用) // Vue.component('cpn',cpnC); var app = new Vue({ el: "#app", data:{ message:"hello vue" }, components:{ //cpn:使用组件时的标签名 //此时注册的是局部组件 cpn:cpnC } }); var app2 = new Vue({ el:"#app2", data:{ message:"hello Vue" } });
script> body> html>

vue.js:全局组件和局部组件_第2张图片

你可能感兴趣的:(Vue.js,vue.js,javascript,前端)