2021年01月_阿牛大牛中

原创 Vue笔记十三——Vuex状态管理

文章目录Vuex详解认识VuexVuex是做什么的？管理什么状态呢？单页面的状态管理多界面状态管理devtool插件Vuex的简单使用Vuex核心概念（官方）State单一状态树Getters基本使用通过属性访问通过方法访问MutationMutation状态更新Mutation传递参数Mutation提交风格Mutation需遵守 Vue 的响应规则Mutation常量类型Mutation同步函数Action的基本定义分发Action在组件中分发 Action组合 ActionModules模块的局部状态

2021-01-14 19:44:51 681

原创 Vue笔记十二——了解vue-router点进来！！！

文章目录vue-router详解认识路由什么是路由？后端路由阶段前后端分离阶段单页面富应(SPA页面)用阶段：前端路由的核心是什么呢？url的hash和HTML5的historyvue-router基本使用演示路由的默认路径HTML5的history模式router-link标签补充通过代码修改路由动态路由路由懒加载（官方）把组件按组分块把组件按组分块打包文件解析懒加载使用vue-router嵌套路由认识嵌套路由嵌套路由的使用vue-router参数传递演示query类型：vue-router导航守卫为什么

2021-01-12 00:41:44 1763

原创 Vue笔记十一——Vue CLI相关

文章目录Vue CLI相关什么是Vue CLIVue CLI的使用Vue CLI2初始化项目过程runtime-compiler和runtime-only的区别Vue程序执行过程关于render的createElement用法认识Vue CLI目前版本配置去哪了？回顾Vue CLI相关什么是Vue CLI如果你只是简单写几个Vue的Demo程序，那么你不要Vue CLI。如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI。使用Vue.js开发大型应用时，我们需要考虑代码目录结构、

2021-01-08 22:58:05 183

原创 npm安装实在太慢怎么办！？

设置npm registry昨天，我创建一个vue cli项目的时候，最后一步选择用npm安装，然后苦苦等待了30min，而且有时它纹丝不动，让我以为它卡死了，几次想放弃，但都装了这么久了就没有按下ctrl + c。后来我搜索方法将npm registry更改为淘宝镜像，快的飞起！1.临时使用npm --registry https://registry.npm.taobao.org install express2.持久使用我自己昨晚就是这样配置的：npm config set reg

2021-01-08 14:22:44 4370

原创 Vue笔记十——webpack敲重点！！！（详解）

文章目录Webpack详解认识webpackwebpack的安装webpack的起步与配置准备工作局部安装webpack建立webpack.config.js文件package.json中定义启动loader的使用（核心）什么是loader？css文件处理less文件处理图片文件的处理ES6语法处理webpack中配置Vueel和template区别plugin（插件）的使用添加版权的plugin打包html的plugin搭建本地服务器回顾Webpack详解认识webpack什么是webpack？

2021-01-07 15:37:38 584

原创 Vue笔记九——slot插槽的使用

文章目录插槽slot如何封装这类组件呢？slot插槽的基本使用具名插槽官方解释：编译作用域(官方解释)作用域插槽独占默认插槽的缩写语法解构插槽 Propv-slot的缩写#回顾插槽slotslot翻译为插槽：在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。插槽的目的是让我们原来的设备具备更多的扩展性。比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等。组件的插槽：组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展

2021-01-05 15:04:58 417

原创 Vue笔记八——关于组件不可不知的知识！

文章目录组件化的实现和使用步骤什么是组件化？Vue的组件化思想注册组件的基本步骤注册组件步骤解析全局组件和局部组件父组件和子组件语法糖注册组件语法糖注册全局组件语法糖注册局部组件组件模板的分离组件可以访问Vue实例数据么？组件数据的存放父子组件的通信props基本用法（父传子）自定义事件（子传父）父子组件传值案例父子组件的访问方式$children的使用$refs的使用$parent$root回顾组件化的实现和使用步骤什么是组件化？人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限

2021-01-04 21:58:31 243

原创 Vue笔记七——v-model表单输入绑定详细介绍

v-model的使用你可以用 v-model 指令在表单、及 `` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model的基本使用表单控件在实际开发中时非常常见的。特别是对于用户信息的提交，需要大量的表单。Vue中使用v-model指令来实现表单元素和数据的双向绑定。案例解析：当我们在输入框输入内容时因为input中的

2021-01-03 15:43:23 2073

原创 Vue笔记六——书籍购物车案例

文章目录书籍购物车案例效果图项目目录index.htmlmain.jsstyle.css最终效果展示回顾书籍购物车案例我们来做一个阶段性的案例，巩固之前学习的知识。案例的效果图如下：效果图项目目录index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

2021-01-02 22:43:33 287

原创 Vue笔记五——条件判断与循环遍历

文章目录条件判断条件渲染案例案例小问题v-show与v-if的区别循环遍历v-for遍历数组v-for遍历对象组件的key属性回顾条件判断v-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。简单的案例演示：<!DOCTYPE html><html lang="en"><head> <meta charse

2021-01-02 21:43:46 1141

原创 Vue笔记四——事件监听的使用

文章目录事件监听(v-on:)v-on传参数v-on修饰符回顾事件监听(v-on:)在前端开发中，我们需要经常和用户交互。这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。在Vue中如何监听事件呢？使用v-on指令。v-on介绍作用：绑定事件监听器。缩写：@预期：Function | Inline Statement | Object参数：event下面，我们就具体来学习下v-on的使用。<!DOCTYPE html><html

2021-01-02 01:20:11 671

原创 Vue笔记三——计算属性(computed)

文章目录计算属性什么是计算属性？计算属性的复杂操作计算属性的setter和getter计算属性的缓存计算属性什么是计算属性？我们知道，在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示比如我们又firstName和lastName两个变量，我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}<!DOCTYPE

2021-01-01 21:50:26 486

原创 Vue笔记二——Vue声明周期与模板语法

文章目录创建Vue实例传入的optionsVue生命周期第一阶段beforeCreatecreatedbeforeMountmounted第二阶段beforeUpdateupdatedbeforeDestroydestroyed模板语法Mustache语法v-once指令v-htmlv-textv-prev-cloakv-bind回顾创建Vue实例传入的options你会发现，我们在创建Vue实例的时候，传入了一个对象options。这个options中可以包含哪些属性呢？详细解析目

2021-01-01 15:02:39 290

weixin_46351593的博客