vue笔记（脚手架与组件开发）

1、脚手架1.1 脚手架命令VUE CLI vue官方基于webpack打造的脚手架工具内置会提供很多模板和工具。可以帮助我们进行快速地创建vue项目。安装环境node、npmnpmnode包管理器相当于一个应用商店。iinstall的意思-g表示在node全局进行安装通过vue cli方式来创建项目可以手动选择版本。也可以用vue ui的命令来创建项目不常用略过。。1.2 脚手架创建后的项目结构serve可以打开一个本地的静态资源服务器将项目直接跑起来。 npm run servebuild代码打包npm run build项目上线使用的就是dist文件夹。运行dist/开头说明不是本地文件需要用服务器的方式来启动。要先运行下面这个命令安装再运行serve dist效果一模一样其他的该目录用来保存自定义组件。app.vue是根组件。main.js是vue应用的一个入口文件。那些配置文件内容大概如下-------------------------------------------------------------------------------------2、组件化开发2.1 组件的作用与本质组件用来封装页面部分功能的一种方式。一个组件可以封装一块功能的结构、样式、逻辑。每个.vue文件中都包含这几部分。当一个组件定义好之后怎么使用呢也可以写成多标签形式根组件即App.vue有el是有个挂载电而非根组件的位置就是标签的位置。2.2 组件的通信方式组件与组件之间的关联性就是说他们的数据交互。A、父传子父组件传值给子组件让子组件根据自己的要求渲染自己的数据。props来自于英文单词properties的缩写。在Vue中props用于在父组件中向子组件传递数据子组件通过props属性来声明接收的数据。props是写在子组件上的也可以绑定多个值用多个类型来定义子组件上可以设置默认值如果父组件也传值就用父组件的如果父组件不传值那就用子组件的默认值。也可以要求父组件必须传值;父组件调用时属性也可以用响应式数据B、子传父下面的图来自于chatGPT子组件向父组件传递数据通过$emit触发事件父组件通过监听这个事件来接收数据。在这个例子中子组件通过$emit方法触发了一个名为childEvent的事件并传递了一条消息。父组件通过监听childEvent事件接收到了这条消息然后在父组件做一个监听C、同级传值来自 chatgpt在Vue2中同级组件之间的通信可以通过以下几种方式传递值使用一个共享的父组件来传递数据可以将需要传递的数据放在共享的父组件中然后通过props属性将数据传递给同级组件。使用事件总线可以通过创建一个空的Vue实例作为事件总线然后在同级组件中使用emit和on来进行事件的触发和监听。大佬推荐的2.3 组件插槽Vue2的组件插槽Slot是一种用于在组件中扩展内容的机制。它允许你在组件的模板中定义一些占位符然后在使用该组件时可以将内容插入到这些占位符中。英文定义Component Slots组件插槽的作用是解决组件的可复用性和灵活性问题。它允许组件的使用者在不修改组件源代码的情况下根据自己的需求来定制组件的部分内容。让我们通过一个生活中的场景来说明组件插槽的用法。假设我们有一个通用的模态框Modal组件用于显示各种弹窗内容。但是不同的弹窗内容可能会有所不同例如登录弹窗和注册弹窗。使用组件插槽我们可以在模态框组件中定义一个插槽用于接收弹窗内容。然后在使用模态框组件时我们可以将具体的弹窗内容插入到这个插槽中。2.3.1 默认插槽36:33比props传值简单通过插槽方式写成双标签的方式可以实现更多的效果。2.3.2 具名插槽当组件里面有好几个地方可以让外部通过插槽传值的话就需要取名。效果如下也可以简写#具名插槽名除了插槽一些文本设置外还可以在插槽里面使用子组件的一些数据是helloworld组件的数据不是父组件里面的数据。子组件给插槽传的是一个对象dataObj也可以使用解构方法取值