十一、vue3实现过度动画

python 可以做的东西很多，但是就业不是很好

大前端：web前端，ios ,移动端h5

(1) 理解devServer中host 0.0.0.0 配置 问题

host: '0.0.0.0'   host 的值可以是：localhost 、 127.0.0.1 、 0.0.0.0

windows电脑 0.0.0.0 这个ip地址没有做正确的解析，可以配置host文件后就可以正确访问了，但是没有必要这样去做，因为我们配置0.0.0.0的目的，是为了让其他主机来访问我们的服务器，目的不是为了在浏览器中使用0.0.0.0 去访问

在真实开发中使用localhost【会被解析为127.0.0.1】 或者127.0.0.1访问，

这样配置0.0.0.0，并不是为了在浏览器中使用0.0.0.0来访问，而是为了其他主机可以使用ip来访问

(2)vue组件化

安装脚手架 ：npm i -g @vue/cli

创建项目： vue create vue-demo(文件名字)

(3)理解组件的拆分和嵌套

(4)理解组件的css 的 scope作用域

scope 防止组件间的样式相互污染

(5)组件的通信

父子组件通信：

父组件传递给子组件：通过props属性

子组件传递给父组件：通过$emit触发事件

name 用的不多，有两个地方会使用：一个是keep-alive ,一个是devtool

props

细节一：props 对象用法的类型

String, Number, Boolean, Array, Object, Date, Function, Symbol

细节二：对象类型的其他写法

props:{
  propE:{
    type:Object,
    default(){
      return {
        message:"hello"
      }
    }
  }
}

细节三：props 尽量使用短横线分割

(6) 非props 的attribute  

当我们传递给一个组件某个属性，但是该属性没有定义对应的props或者emit ,就称之为 非 props 的attribute, 常见的包括：class ,style ,id 属性等

• 如果组件中有根元素，根元素默认会继承非props属性
• 如果不希望根元素继承属性，可以在组件中设置 inheritAttrs: false【我们可以通过$attrs来访问所有的 非 props的attribute】

单独绑定：

 全部绑定：

• 若组件中有多个根节点，必须手动的指定要绑定哪个属性到某个元素上，否则会报警告：

Extraneous non-props attributes (class, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

额外的非属性（类、样式）被传递给组件，但无法自动继承，因为组件呈现片段或文本根节点。

(7) 子组件传递给父组件【自定义事件的方式】

什么情况下子组件需要传递内容到父组件呢？

• 当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容；
• 子组件有一些内容想要传递给父组件的时候

我们如何完成上面的操作呢

• 首先，我们需要在子组件中定义好在某些情况下触发的事件名称；
• 其次，在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中；
• 最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；

vue3没有事件总线了，官方推荐一个库 mitt
 

不要直接修改props里面的内容，这是一个不好的习惯