05、Vue-局部组件的使用

05、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">
		// 声明组件并挂载到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)