vue开发基础流程 （后20）
创建项目命令；
或者 vue create my - vue - router - project这个是创建带路由的项目
22.组件组成
比如说一个页面吧，他三个组件，template就是用来放所有的标签，script用来放业务逻辑，style用来放样式，css
在样式里面添加scoped这个东西呢只会让这个组件的样式只在这个组件显示，就不会全局了，方便，建议添加，如果你的属性有重复用到的话；比如container 记住这个是 scoped
23.组件嵌套
每个组件是相互嵌套的，比如这个，在componets里面的各个页面相辅相成然后促成一个页面；
用哪个组件就导入到哪个去；记住组件的导入就是在dom里面先用到，然后去js里面导入，也就是初始化；在export defaultl里面的componets里面注册
<script>
import ItemOne from './ItemOne.vue';
export default {
components:{
ItemOne
}
}
</script>
24.组件注册
组件可以全局注册和局部注册；部就在另一个组件或者是哪注册则可；全局注册就是在main.js里面注册
要注必须在这两个之间注册；绿色标注处；
用app.componet("Header“,Header)这样就能注册了；主要是挂载；我猜测，这个是在app的父组件里面写好子组件；然后咱们用之间去父组件里面用就行，写在dom，咱就不用注册和引入了；格式就是这样，前后一致，但是前面是字符串；
注意：记得写完一面按保存…
推荐用到多的全局的就全局注册；没有用到的还是局部更好；不然项目最后打包之后非常大；非常麻烦；而且子父关系不明确；依赖关系也不够；
25.组件传递数据
组件之间是可以传递数据的
我们不是在标签里面，在父组件里面会用到子组件的标签吗？
我们可以在子组件的标签里面给子组件传信息，那子组件去接收一下就行了；用props与data同级：【】注意里面是字符串
输出要双括号哦
传递的数量没有限制，可以无限添加，你接收就在后面打逗号就行；
当然，之前的所有手段都适用
要给个属性名字，v-bind绑定一下在地下写好，上面要用字符串，这个就是动态的，不是写死在html当中的；把父组件的改到js就行了
原理就是其实父组件也是个标签
26.传递类型
父组件给子组件传递什么类型都可以；比如；就父亲给子传数组，那就动态定义一下就好，也可以传数组，传过去接收完毕之后呢，子组件可以去渲染；
再记忆一遍，文本，属性，之间文本插值或者绑定则可；数组渲染最好循环用列表显示，别的也行；对象的话，就是双括号里面一定要用点访问；
这里的props是所有类型都能接收；
<template>
<p>这里是组件依赖关系</p>
<RelationTwo title="儿子你好"></RelationTwo>
<RelationTwo :title2="msg" :title3="msg2" :name="name"></RelationTwo>
</template>
<script>
import RelationTwo from './RelationTwo.vue';
export default {
components:{
RelationTwo
},
data(){
return{
msg:"信息",
msg2:3,
name:["商品","信息","价格"]
}
}
}
</script>
<template>
<p>
这里是三级层级关系；第三级
</p>
<p>{{ title }} {{ title2 }} {{ title3 }}</p>
<ul v-for="(i ,index) in name" :key="index">
<li>{{ i }}</li>
</ul>
</template>
<script>
export default {
data(){
return
},
props:["title","title2","title3","name"]
}
</script>
校验类型；这个意思就是，你传给我的title必须是这四种之一别的不行，会报错；
还有情况是，你说要传值但是没传值，那我们就设置一个默认值
比如age吧，你父组件说了要传但是没传；我们接收方就可以设置一个默认值；我们设置默认值类型是数字吧；默认可以直接设置0；
如果是数组的话；我们不可以直接设置default，我们需要把default设置成一个函数；里面写返回值才行；因为数组，对象这些都是引用类型，所以他不能单纯直接返回；一般都是函数返回；java里面也有提到；
但是也需要有必选项；就是设置一个东西，我是需要你必须给我传的，不传不行；不传我就给你报错；提醒你，这个就可以再接收方；用props类里面写：写一个必选项；叫required需求，顾名思义了；
再一个，props是只读的，是不能修改的，咱们可以用一个方法去访问获取到父组件的元素；但是无法对其做修改，比如用this访问，就没法对其做修改；
这就会纯报错；
所以基本上required这个就是主要是来校验props的；
27.组件事件
就是给组件绑定一个事件；一般这个事件就用来组件之间传递参数
用这个事件来进行组件之间传递数据，之前我们之间标签传，只能父传子；现在用这个方法就可以子传父了；
就是在子组件里面，我们写好一个数据，设置一个按钮，点击事件然后触发方法；方法里面写this.$emit这个方法就能传参了
然后，在父组件里面，把传过来的数据当成一个事件用v-on绑定；然后触发一个方法，方法里面写反馈就行；
子元素继续给个值，往后加，去父元素里面接收；父元素里面传参就行，给参数，其实就是一个方法的调用，实参传给形参
然后还可以把这个data显示出来，因为我们已经拿到数据了；所以我们可以直接去显示；直接return里面设置一个变量；直接把data的值赋给变量就行；然后去dom里面文本插值输出渲染到页面就行；
这两章主要是父子组件的互相传递；
复习，父亲传子，可以直接dom的标签传，子组件接收props只读，或者给父组件设置到js里面变成动态的；然后传过去是动态的；
子传父，需要调用事件；在子组件里面设置好传递按钮触发方法，方法里面写this.$emit事件括号里面写我们要传的东西；然后去父组件里面接收；父组件里面先用子组件的标签；然后绑定事件，这个事件名字必须是我们传递的第一个信息名；然后触发方法；方法里面写接收，打印输出都行，也可以传参，然后把参数赋值给一个属性，然后渲染到dom；当然子元素给的数据也可以用动态绑定；
说实话我发现我父传子的时候吧；子不用propos接收也能显示0.0‘
28.互传事件配合v-model
就是在组件a的事件在组件b也可以获得；比如实现的效果，在输入框搜索，但是在别的地方获得了你的输入；v-model基本上就用来绑定表单，获取输入；大部分时间；
比如说，在子组件里面输入；然后在父组件里面获得吧；在子组件里面绑定好事件，然后写好输入框，设置侦听器，传新值给父；去父组件里面接收；
propos也可以实现子传父
29.插槽
之前都是传递数据，现在我们传递标签；就是比如一些html结构
父传子 用插槽；slot，
1.先建立父子关系
2.父亲里面用孩子的双标签里面写上html文本标签
3.回到孩子那边写一个slot的标签接收；
这就是插槽传递 插槽就是父传子
防止同名，所以出现了一个叫具名插槽
具名插槽
定义：就是给插槽标签命名，然后父亲这边命名，孩子那边写个值去匹配，匹配上了就渲染对应标签；
1.父亲这边还是用孩子的标签写内容，但用v-slot:=名字 这种格式去命名；
2.命名完毕去子元素接收；在插槽标签里面；接收的时候自己命名一个变量等于这个名字去匹配
3.命名的时候要用template标签包裹
4.父亲这边再子标签里面写给tem标签里面用v-slot然后是：起名
5.孩子那边是用slot插槽标签，里面是自命名变量去判断是否与你命名相等所以是name=“”
6.v-slot可以直接简写成#号
30.组件生命周期
就是各个组件不同的状态，比如第一次被渲染，第一次被销毁，第一次数据更新，而执行这些操作的函数就叫，生命周期钩子函数；这个函数是自动执行的；
生命周期钩子函数示意图
四个时期；
这些方法都是与data同级，不写在方法里；
其实渲染和挂载差不多 渲染是把写好的代码渲染到dom 而挂载是把渲染好的东西插入到制定页面；
31生命周期的应用
通过ref来获取dom结构
添加ref就是用来读取他的数据
再不同的节点做不同的事情；比如，在挂载渲染之后咱们读取获取数据，因为很多时候其实你还没加载出来，但是结构已经加载出来了；
32.动态组件
比如，切换组件的按钮 点击之后切换另一个组件；
1.先导入两组件；然后，先不显示
2.用一个component的标签，里面用v-bind绑定一下属性，属性就是初始化值为componentA
3.然后用一个按钮去实现；方法里面如果等于componentA就让按钮值等于，否则等于A，就切换成功了；
4.往深处想；这样就不动这个页面，就做到了再一个页面里面切换不同的组件；
33.组件保持存活
切换的时候；另一个组件会被销毁
beforeMount(){
console.log(‘组件被销毁前’)
},
unmounted(){
console.log(‘组件被销毁后’)
}
这个放a组件里面就能看见了，切换就会销毁组件；
不想组件被销毁，那就用组件保护一下，就不参与销毁了；
34.异步加载组件
咱们组件很多；一次性加载完项目会被卡死；
所以咱们用异步加载的办法；先加载别的，后面用到了再去加载这个组件；
1.先不导入你要异步的组件；
2.导入{defineAsyncComponent}的方法
3.用一个变量去接收b组件的路径；
箭头函数，传统就是类型加方法名里面是参数然后{返回值}，写在可以用一个变量去接收；然后=右边是参数然后打一个箭头是返回值；省略了很多东西；语句不多的时候可以
主要结构就是
命名变量=（参数）=>{函数体，返回值；}
35.依赖注入
从祖宗给父亲给儿子这个步骤不能跳跃，传数据；
1.在祖宗里面写，与data同级 provide：{属性名字：‘属性值’}
2.去孙子里面接收，同样与data同级之间inject:[“属性名”]
就可以隔代传输了
3.这里面传递的数据也可以是动态的，去data里面定义去
4.那就得把provide写成方法，有返回值；每次变成方法基本上都是因为需要返回的东西不是文本了，或者不是静态了；
provide（）{
return{
自定义属性名字：this.之前data的属性名
}
}
5.孙子里面用原来的接收方法也行；用data的返回值那种接收也可以；
6.如果你是在全局里面注册；那我们哪里都可以读到，但是如果有父子关系， 我们只能上下传递；
36.Vue应用
main.js是vue的唯一实例对象；
每一个项目都是由一个组件开始，然后嵌套然后分支然后很多，app是第一个根组件，也只能有一个
所以，在这俩之间，咱们引入别的组件；
光是html啥的这些文件可以到页面渲染，但是vue文件不行，所以他需要挂载到一个容器里面，然后才能渲染出去；
这个容器可以是div也可以是css选择器；
app.mount()就已经是挂载了
然后#app是在找index.html是我们的初始页面；
id选择器是#打头；而css选择器是.打头；
我们写的vue的所有文件最后都会打包成一个main.js的文件；最后去在index.html中把这个main.js文件引入进来
所以说vue的入口实则就是从main.js入，然后关联一个index.html，在里面疯狂的导入组件，挂载，所有写的vue都会打包成一个main.js的文件，最后在index.html里面正常运行，进去之后看到app的根组件然后从app.vue一层层往下走；
公共文件夹是什么资源都可以放；css也行；
开发项目流程
其实开发一个vue项目的流程就是
1.根据公司项目需求
2.确定技术栈，搭建框架
3.创建项目，配好依赖
4.分配好目录，按需规划
5.路由配置，挂载，状态管理，通信规范
6.与后端商量好接口文档
7.设计组件，可复用的组件
7.搭建首页页面，登录类似基础页面，设置好框架，然后根据接口写好接收请求；
8.设计框架，每页的页面展示，简洁可观
9.实现逻辑
10.部署上线，项目部署到服务器，确保访问
11维护更新