06、Vue-全局组件的创建

06、Vue-全局组件的创建


<html>
	<head>
		<meta charset="utf-8">
		<title>行找的皮卡丘title>
	head>
	<body>
		<div id="app">


		div>

	body>
	<script type="text/javascript" src="js/vue.min.js">

	script>

	<script type="text/javascript">
		// 声明全局组件 可以在任意组件中进行使用  Vue.componet('组件名称',{template:``,})
		Vue.component('Vbtn', { // 声明并且已经挂载到全局 可以在任意地方使用
			template: `
				
			`,
		});

		// 声明组件并挂载到App组件中
		var Vheader = {
			data() {
				return {

				}
			},
			template: `
				
我是头部组件 `, }; var Vaside = { data() { return { } }, template: `
我是侧边栏组件
`
, } var Vcontent = { data() { return { } }, template: `
我是内容组件
`
, } // 1、声明组件 组件内的data一定是一个函数,必须有返回值空值也行 var App = { data() { return { } }, template: `
`
, components: { Vheader, Vaside, Vcontent }, }; new Vue({ el: "#app", data() { return { } }, // 2、挂载 components: { App }, // 3、使用 template: ``, }); script> html>

你可能感兴趣的:(Vue学习基础,vue,js,javascript,html)