vue005——vue组件入门(非单文件组件和单文件组件)

一、非单文件组件

1.1、单文件组件的使用

1.1.1、局部注册

1、第一步:创建school组件
2、第二步:注册组件(局部注册)
3、第三步:使用组件(编写组件标签)

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本使用title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		<div id="root">
			<h1>{{msg}}h1>
			<hr>
			
			<school>school>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步:创建school组件
		const school = Vue.extend({
			template:`
				

学校名称:{{schoolName}}

学校地址:{{address}}

`
, // el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。 data(){//注意:这里的data要写成函数式 return { schoolName:'Vue学堂', address:'大牛岭' } }, methods: { showName(){ alert(this.schoolName) } }, }) //创建vm new Vue({ el:'#root', data:{ msg:'你好啊!' }, //第二步:注册组件(局部注册) components:{ school } })
script> html>

vue005——vue组件入门(非单文件组件和单文件组件)_第1张图片

1.1.2、全局注册

DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>基本使用title>
	<script type="text/javascript" src="../js/vue.js">script>
head>

<body>
	
	<div id="root">
		
		<hello>hello>
		<h1>{{msg}}h1>
	div>
	<hr>
	<div id="root2">
		
		<hello>hello>
	div>
body>

<script type="text/javascript">
	Vue.config.productionTip = false

	//第一步:创建hello组件
	const hello = Vue.extend({
		template: `
				

你好啊!{{name}}

`
, data() {//注意:这里的data要写成函数式 return { name: 'Tom' } } }) //第二步:全局注册组件 Vue.component('hello', hello) //创建vm new Vue({ el: '#root', data: { msg: '你好啊!' } }) new Vue({ el: '#root2', })
script> html>

vue005——vue组件入门(非单文件组件和单文件组件)_第2张图片

1.2、几个注意点

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>几个注意点title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<div id="root">
			<h1>{{msg}}h1>
			<school>school>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义组件
		const s = Vue.extend({
			name:'atguigu',
			template:`
				

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'DGUT', address:'北京' } } }) new Vue({ el:'#root', data:{ msg:'欢迎学习Vue!' }, components:{ school:s } })
script> html>

1.3、VueComponent的构造函数

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>VueComponenttitle>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<div id="root">
			<school>school>
			<hello>hello>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				

学校名称:{{name}}

学校地址:{{address}}

`
, data(){ return { name:'尚硅谷', address:'北京' } }, methods: { showName(){ console.log('showName',this) } }, }) const test = Vue.extend({ template:`atguigu` }) //定义hello组件 const hello = Vue.extend({ template:`

{{msg}}

`
, data(){ return { msg:'你好啊!' } }, components:{test} }) // console.log('@',school) // console.log('#',hello) //创建vm const vm = new Vue({ el:'#root', components:{school,hello} })
script> html>

vue005——vue组件入门(非单文件组件和单文件组件)_第3张图片

二、单文件组件

2.1、前置知识

分别暴露
vue005——vue组件入门(非单文件组件和单文件组件)_第4张图片
统一暴露
vue005——vue组件入门(非单文件组件和单文件组件)_第5张图片
默认暴露
vue005——vue组件入门(非单文件组件和单文件组件)_第6张图片
vue005——vue组件入门(非单文件组件和单文件组件)_第7张图片

2.2、组件

vue005——vue组件入门(非单文件组件和单文件组件)_第8张图片
vue005——vue组件入门(非单文件组件和单文件组件)_第9张图片

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