7.vue基础（六）非单文件组件-单文件组件_html-js-css

文章目录 1.非单文件组件1.1 基本使用1.1.1 定义组件(创建组件)1.1.2 注册组件1.1.3 使用组件(写组件标签) 1.2 几个注意点1.3 组件的嵌套1.4 VueComponent1.5 一个重要的内置关系 2.单文件组件

1.非单文件组件 1.1 基本使用

Vue中使用组件的三大步骤：

1.1.1 定义组件(创建组件)

	const name = Vue.extend({
        
    	}
    )

注意事项：

(1)里面可以写template(vm里也可以写)，但是注意里面必须有一个根节点，也就是必须先写一个div。

(2)组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。

(3)data必须写成函数,也就是如下，因为避免组件被复用时，数据存在引用关系。

		data() {
			return {     
			}
		},

(4)里面照样可以跟vm一样写函数方法，外面也可以调用

	const name = Vue.extend({
		template: `
				
					秦燕燕身高：{{height}}
					秦燕燕体重：{{weight}}
						
				
			`,
		// el:'#root', 不可写
		data() {
			return {
				height: '160',
				weight: '55'
			}
		},
		methods: {
			showHeight() {
				alert(this.height)
			}
		},
	})

1.1.2 注册组件

	new Vue({
		el: '#root',
		//注册组件（局部注册）
		components: {
			name1:name//此处简写是name，为了对照我写的是复杂的形式
		}
	})

	//全局注册组件
	Vue.component('name1', name)//

1.1.3 使用组件(写组件标签)

<name1>name1>

1.2 几个注意点

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字(就是如果在创建组件时，指定了name：qinyan,那么即使在vm的components里写了name:name,那么name也不管用，必须写或)

    const s = ({
       name: 'qinyan',
    })

2.关于组件标签:

第一种写法：

<school>school>

第二种写法：

<school/>

备注：不使用脚手架时，会导致后续组件不能渲染,也就是只能渲染一次，后面的不会显示。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = (options)

1.3 组件的嵌套

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				
					学生姓名：{{name}}	
					学生年龄：{{age}}	
				
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				
					学校名称：{{name}}	
					学校地址：{{address}}	
					
				
			`,
			data(){
				return {
					name:'大连交通',
					address:'s'
				}
			},
			//注册组件（局部），student必须在school的前面
			components:{
				student
			}
		})
        //定义app组件
		const app = Vue.extend({
			template:`
					
					
					
				
			`,
            //注册组件（局部），school必须在app的前面
			components:{
				school,
			}
		})
        
		//创建vm
		new Vue({
			template:'',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})

1.4 VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，

即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：

(1).组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

1.5 一个重要的内置关系

2.单文件组件

从这里开始就要写vue文件了

School.vue

注意事项：3种写暴露的方法

1.导出：export const school=vue.extend({})，导入import {school} form …

2.导出：export {school},导入import {school} form …

3.导出：export default const school=vue.extend({})，导入import school form …

因为这里vue.extend()可以省略，而且定义变量也可以省略，所以就写成了export default {}，导入import school form …

App.vue

main.js

import App from './App.vue'//但是这里会报错

new Vue({
	el:'#root',
	template:``,
	components:{App},
})

index.html

DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>练习一下单文件组件的语法title>
head>
<body>
	
	<div id="root">div>
	<script type="text/javascript" src="../js/vue.js">script>
	<script type="text/javascript" src="./main.js">script>
body>

html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/946948.html

7.vue基础（六）非单文件组件-单文件组件

发表评论

评论列表（0条）