这里写目录标题
一级目录
二级目录
三级目录
组件：
非单文件组件：
一个文件中包含有n个组件。后缀名*.html
单文件组件：
一个文件中只包含有1个组件。后缀名*.vue
非单文件组件：
1.创建组件：
const comp = Vue.extend({
/*name:'compp',*///使用这个配置项可以让组件名从始至终都叫compp
data(){
return (**);
}
template:''
}) ;
1.配置项中无el，最后由vm中的el决定服务哪个容器。
2.data必须写成函数。避免组件复用时，数据存在引用关系
3.template要有根节点
2.创建vm（注册组件）：
1.局部注册
new Vue({
el:'#root',
data:{},
//注册组件
components:{
comp:comp//key也就是标签名`
}})
2.全局注册
//全局注册组件
Vue.component('hello', {
data(){
return { first: 'love' }
},
template: '<div>{{first}}</div>'
})
new Vue({
el: '#q'
})
3.编写
4.几个注意的问题
-
? 如果一个单词，纯小写/首字母大写
? 多个单词：多个单词，用短横连接 s-b / 脚手架环境里用首字母大写，如：SomeBody
? 注：1）. 组件名回避HTML已有元素名称
? 2） .可以使用
name配置项指定组件在开发者工具中呈现的名字。 -
组件标签第一种写法
<com></com>
? 第二种写法<com/>
? 注：不使用脚手架时，第二种会导致后续组件不能渲染。
- 一个简写方式：
//省略了vue.extend()
const com = {
data(){
return { first: 'love' }
},
template: '<div>{{first}}</div>'
})
new Vue({
el: '#q'
}
原理？：vue中有判断函数，如果写入components中没经过extend函数，vue会自动帮你补上。
组建的嵌套：
哇绕绕的
容器里可以不写东西，在Vue里写个template配置项。
VueComponent：
-
组件本质是一个名为VueComponent的构造函数，是
Vue.extend()生成的。 -
写
<comp>时，Vue解析会帮我们创建comp组件的实例对象，即vue帮我们执行：new VueComponent(options) -
每次调用
Vue.extend，返回的都是一个全新的VueComponemt。 -
关于this的指向：
-
组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，this都是
VueComponent实例对象 -
new Vue(options)配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，this都是
Vue实例对象
-
一个重要的内置关系：
- 一个重要的内置关系：
VueComponent.prototype.__proto__===Vue.prototype - 为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
单文件组件：
后缀：.vue
处理加工方式：
1.webpack
2.脚手架：vue官方搭建好的
以School.vue（推荐命名用驼峰）为例：
里面的东西怎么写？
-
三个标签：
<template></template> <script></script> <style></style> -
export default+ 内容
脚手架：
结构：
搭建：
（Vue CLI命令行接口工具）
搭建后打开的样子，命令： npm run serve
ps:运行时一定要进入有package.json的文件夹中。（小伙伴遇到问题可下方留言）
render：
创建元素：
render(createElement){
return createElement('h1','value')
}
h函数就是vue中的createElement方法，这个函数作用就是创建虚拟dom，追踪dom变化的
ref:
用来获取节点
例如：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8lsj5rWi-1632842658571)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210928145910990.png)]
- 被用来给元素或者子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真是DOM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
- 打标识：
<h1 ref="x"></h1> - 获取：
this.$refs.x
- 打标识：
props:
这个我理解起来有点难了o(╥﹏╥)o
大概就是，定制App的内容。通过修改App的内容，让子组件的显示发生改变。
功能：组件在复用，但是，数据是动态的。
//限制类型
props:{
name:String,
age:Number,
sex:String
}
/*********第二种写法************/
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
default:99 //默认值
}
}
/*******传数字要数据绑定，使引号里的为表达式而不是字符串******/
<h1 :age="19"></h1>
/****如何修改prop****/
export default{
name:'Student',
data(){
return{
myage:this.age //将props的内容复制到data中一份
}
}
methods:{
updateAge(){
this.myage++
}
}
props:['age']
}
注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，会发生警告。若业务
需求确实需要修改，那么请将复制props的内容到data中一份，然后去修改data中的数据。
myage:this.age //将props的内容复制到data中一份
}
}
methods:{
updateAge(){
this.myage++
}
}
props:[‘age’]
}
注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，会发生警告。若业务
需求确实需要修改，那么请将复制props的内容到data中一份，然后去修改data中的数据。