零基础学习 Vue 笔记
组件
理解:用来实现局部功能效果的代码集合( html / css / js / image……)
作用:复用编码, 简化项目编码, 提高运行效率
Vue 中的组件:
非单文件组件
组件使用步骤
- 定义组件(创建组件)
- 注册组件
- 局部注册:通过
new Vue
的时候传入components
选项 - 全局注册:通过
Vue.component('组件名',组件)
- 局部注册:通过
- 使用组件(写组件标签)
使用 Vue.extend(options)
创建组件时,其中 options
和 new Vue(options)
时传入的那个 options
几乎一样,但也有点区别:
el
不要写,为什么。 --> 最终所有的组件都要经过一个 vm 的管理,由 vm 中的el
决定服务哪个容器data
必须写成函数。–> 避免组件被复用时,数据存在引用关系。
通过 template
配置组件结构
示例代码如下:
// 创建 school 组件
const school = Vue.extend({
template:`
<div>
<h1>校花,{{schoolName}}</h1>
</div>
`,
data(){
return {
schoolName:'北大青鸟',
address:'北京'
}
},
})
//创建 vm
new Vue({
el:'#root',
data:{
hello:'world'
},
//局部注册
components:{
school
}
})
// 使用组件
<div id="root">
<school></school>
<h1>{{hello}}</h1>
</div>
注意点
组件名
- 一个单词组成:
- 第一种写法(首字母小写):school
- 第二种写法(首字母大写):School
- 多个单词组成:
- 第一种写法(kebab-case 命名):my-school
- 第二种写法(CamelCase 命名):MySchool (需要Vue脚手架支持)
- 组件名尽可能回避 HTML 中已有的元素名称,例如:h2、H2都不行
- 可以使用
name
配置项指定组件在开发者工具中呈现的名字
组件标签
- 第一种写法:
<school></school>
- 第2种写法:
<school/>
不使用脚手架时,<school/>
会导致后续组件不能渲染
简写创建组件
const school = Vue.extend(options)
可简写为 const school = options
,通过 new Vue
的 components
指定
组件嵌套
- 在定义组件时配置
components
注册组件 - 定义一个 App 组件管理所有组件(一人(vm)之下,万人(其他组件)之上)
- 容器中什么都不用写
示例代码如下:
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data(){
return {
name:'校花',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'北大青鸟',
address:'北京'
}
},
//注册组件
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{{msg}}</h1>`,
data(){
return {
msg:'hello!'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件
components:{app}
})
//容器
<div id="root">
</div>
VueComponent
school
组件本质是一个名为VueComponent
的构造函数,且不是程序员定义的,是Vue.extend
生成的(还未new
)- 我们只需要写
<school/>
或<school></school>
,Vue 解析时会帮我们创建school
组件的实例对象,即 Vue 帮我们执行new VueComponent(options)
- 每次调用
Vue.extend
(可简写),返回的都是一个全新的VueComponent
,即写两次<school></school>
就会执行两次new VueComponent(options)
- 关于
this
指向:Vue.extend
组件配置中:data
函数、methods
中的函数、watch
中的函数、computed
中的函数 它们的this
均是VueComponent
实例对象new Vue(options)
配置中:data
函数、methods
中的函数、watch
中的函数、computed
中的函数 它们的this
均是Vue
实例对象
VueComponent
的实例对象,之后简称vc
(也可称之为:组件实例对象)
内置关系
一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
,意思是 VueComponent
的原型链指向 Vue 的原型,prototype
是在构造函数上的,而 __proto__
是在对象上的
作用:让组件实例对象(vc)可以访问到 Vue 原型上的属性、方法
单文件组件
非单文件组件的缺点:样式不能跟着组件走
单文件组件(.vue)的结构:
<template></template>
:页面模板<script></script>
:组件交互相互代码<style></style>
:样式