随笔分类 - Vue / Vue CLI
摘要：总结 父组件 =》 子组件【props】 子组件 =》 父组件【函数类型的props、组件自定义事件】 孙组件 =》 父组件【全局事件总线】 在组件中引入库时，顺序是这样的 第三方库 自己写的组件 所有开发人员都要用的样式配置在App中 当标签中的属性过多时，可进行改写，改写时通常将原生属性放在最上
阅读全文
摘要：插槽 结构在哪【结构的代码在哪个组件】，样式就写在哪【样式就写在哪个组件中】 这里的App组件是Category组件的父组件 <!-- Category组件 --> <h3>{{title}}分类</h3> <!-- 定义一个插槽，相当于提前挖了个坑 --> <!-- slot标签的作用相当于占位符
阅读全文
摘要：Vue 中的 ajax 如何借助Vue脚手架解决ajax请求跨域的问题 node server.js 运行nodejs文件 一、常用的发送Ajax请求的方式 xhr：js中内置的 new XMLHttpRequest()：windows对象身上的，可以直接用 xhr.open()：配置请求信息 xh
阅读全文
摘要：Vue模块化开发 # 全局安装webpack npm install webpack@4.41.2 -g # 全局安装vue脚手架 npm install @vue/cli-init@4.0.3 -g # 创建模块化的脚手架工程 # vue脚手架使用webpack模板初始化一个appname项目 v
阅读全文
摘要：过渡与动画 Vue封装的过渡与动画 1. 前置知识 CSS 3 动画【2D转换、3D转换、过渡、动画】 参考网站：https://www.runoob.com/css3/css3-animations.html <h1 v-show="isShow" id="title">显示了</h1> <sty
阅读全文
摘要：$nextTick $nextTick这也是一个生命周期 如果要实现一个input框点击后进行一些数据修改的操作【这里是指能够引起Vue重新解析模板的数据修改操作，比如修改data中的数据】，然后让该input框获取焦点，该怎么做？ // Item组件中有一个input输入框和一个编辑按钮，实现
阅读全文
摘要：消息订阅与发布【pubsub】 1. 理解消息订阅与发布 2. 原理图 通过报纸的订阅与发布来理解就是：A去C那订阅了报纸demo，并说明了自己的住址test，由于test是定义在A中的，而A又把test的引用提供出来了，这样C只要一调用test，自动就来到了A这，也就找到了A住的地儿，C发布t
阅读全文
摘要：全局事件总线【GlobalEventBus】🔥🔥🔥 1. 原理图 2. 成为x的条件 所有组件都能看到x x要能够调用$on、$off、$emit几个API，分别用于绑定、解绑、触发事件 探究一：将x放在哪能满足所有组件都能看到x这个条件？ 可以放在window上，但这样不好，也可以修改源
阅读全文
摘要：组件自定义事件 区别于js内置事件，内置事件是给html元素用的，而自定义事件是给组件用的 1. 给组件实例对象绑定自定义事件 给组件绑定自定义事件 v-on:自定义事件名="回调函数" 比如：<Student v-on:atguigu="demo"/> 上面代码的含义为：由于v-on是在Stude
阅读全文
摘要：webStorage【浏览器本地存储】 localStorage和sessionStorage统称为webStorage 1. localStorage 未登录账号的情况下进行了商品搜索，搜索历史中保存了之前的搜索记录 借助浏览器的本地存储可以将数据存到硬盘上，用于缓存数据 通过浏览器如何查看浏览器
阅读全文
摘要：Todo-list案例 1. 工作情景 从0到1编写每个组件的结构和样式 已有上一版项目的代码【HTML+CSS+JavaScript】，但不是组件化项目，需要进行改造 首先将HTML中body标签内的部分全部放到App组件的模板中，然后把所有的样式也都放到App组件中，这样整个界面就出来了 先拆结
阅读全文
摘要：lang样式 lang（language）：指定css使用的编写方式【css/less/sass/scss等】，不指定lang默认就是lang="css" 写法：<style lang="less"> css的预编译语言：less 脚手架处理不了less，处理less需要安装less-loader
阅读全文
摘要：scoped样式 脚手架当中编写样式的技巧 当多个组件的样式有冲突时，以最后引入的组件的样式为最终样式 作用：让样式在局部生效【样式仅对当前组件生效】，防止因App组件中通过import汇总组件时样式冲突【比如不同组件中有相同类名等】。 写法：<style scoped> 工作原理： 注：如果在Ap
阅读全文
摘要：插件 功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue构造函数，第二个以后的参数是插件使用者传递的数据。 定义插件： 对象.install = function (Vue, option1, option2, option3...) { // 1. 添
阅读全文
摘要：mixin混入（合）配置项 多个组件共享一个配置 混合中都能写什么东西 组件中定义组件时的每一个配置项都可以写在混合中，作为公共配置 组件中最终的配置项是原来在组件中写的配置和混合的配置项进行了整合【你有的，我有的，组合在一起给你用】 如果同一个配置【生命钩子除外】组件中有，混合中也有，那以组件中的
阅读全文
摘要：props配置项 对于一个新功能，结构、交互、样式都与已有的组件一样，唯独数据不一样 也就是说数据是从外部带给组件的，数据是动态获取的，这也是一种组件的复用 功能：让组件接收外部传过来的数据/方法 传递数据：<Demo name="xxx"/> 传值时可通过v-bind指令【简写为:】传递不同数据类
阅读全文
摘要：ref标签属性 被用来给元素或子组件注册引用信息【打个标识，回头我能找到你】（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc） 使用方式： 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></Scho
阅读全文
摘要：vue.config.js配置文件 脚手架是依托着webpack的，webpack有一个自己的配置文件【webpack.config.js】，而webpack.config.js这个文件是没有暴露出来的 Vue 脚手架隐藏了所有webpack 相关的配置，若想查看具体的webpack 配置， 使
阅读全文
摘要：初始化脚手架 Vue CLI【Vue脚手架】 Vue CLI：Vue Command Line Interface 1. 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。 最新的版本是 4.x。 脚手架版本的选择：一般脚手架选最新版本，注意不要用很新的Vue版本对应比较旧的Vu
阅读全文
