土拨鼠的忧伤丶-优快云博客

原创 Vue.js学习笔记——17.Vue的生命周期

Vue实例的生命周期生命周期即是一个事物从出生到消亡的过程，世间万物都有生命周期，Vue实例也是如此。Vue的生命周期是Vue中比较重要的知识点，在面试中常常被问到。简单来说可以分为四个阶段：创建阶段，挂载阶段，运行阶段，销毁阶段。

2022-05-16 16:11:43 241

原创 Vue.js学习笔记——16.单文件组件

在之前Vue-CLI创建的项目中，看到了新的文件扩展名.vue，称为单文件组件，是Vue.js自定义的一种文件格式。在之前的代码中，编写组件的形式都是全局组件，全部逻辑写在一个HTML文件内，这种方式虽然在初步学习的时候方便，但当我们的代码逻辑慢慢复杂，或想要编写更大的项目的时候，就会暴露出很多缺点。

2022-05-16 15:45:54 484

原创 Vue.js学习笔记——15.使用Vue-CLI创建项目

目录一、什么是Vue-CLI？二、如何安装Vue-CLI？前置环境安装Vue-CLI三、如何使用Vue-CLI？通过命令行创建项目一、什么是Vue-CLI？vue-cli 也称为脚手架，在生活中脚手架是为了保证各施工过程顺利进行而搭设的工作平台，在项目中，脚手架就是帮助我们搭建工程的一个工具，用来帮助快速的搭建vue的开发环境，自动生成vue.js+webpack的项目模板，cli只是其中一种。vue-cli的优势在于提供了成熟的vue项目架构设计，让开发者能够开箱即用，能不配置的就不配置；提供了本地

2022-05-13 17:59:37 386

原创 Vue.js学习笔记——14.组件化开发（四）

目录九、动态组件十、在动态组件上使用keep-aliveVue.js学习笔记——10.组件化开发（一）Vue.js学习笔记——11.组件化开发（二）Vue.js学习笔记——12.组件化开发（三）九、动态组件有时我们需要在不同的组件间进行动态的切换，比如一个多标签的页面以上可以通过使用<component>标签搭配is属性来实现。用法：<component v-bind:is="

2022-05-05 15:39:41 181

原创 Vue.js学习笔记——13.扩展：箭头函数的简单使用

目录一、箭头函数的基本使用二、箭头函数的参数与返回值三、箭头函数this的指向一、箭头函数的基本使用二、箭头函数的参数与返回值三、箭头函数this的指向

2020-12-10 10:58:15 320 1

原创 Vue.js学习笔记——12.组件化开发（三）

目录八、插槽slot的使用九、具名插槽的使用八、插槽slot的使用slot意为插槽，组件的插槽是为了让我们封装的组件更具有扩展性，能够让使用者决定组件的内部的一些内容到底展示什么。组件在复用时不会完全一样，会根据应用场景不同做出相应改变，如果说组件模板内写的是组件的共性，那么插槽就保留了它复用时的特性。要使用插槽，在组件模板内部定义一个slot标签即可，意为在组件内预留了一个插槽。在使用组件时往组件标签内部添加标签，添加的标签会替换插槽所在的位置。举例：<!DOCTYPE html>

2020-12-05 14:20:57 162

原创 Vue.js学习笔记——11.组件化开发（二）

目录六、父子组件的通信1.父传子——props2.子传父——自定义事件七、父子组件的访问方式1.父访问子——$children2.父访问子——$refs3.子访问父——`$parent`与`$root`上集：Vue.js学习笔记——10.组件化开发（一）六、父子组件的通信1.父传子——props在实际开发中，我们从服务器请求到了很多数据，并不是在整个页面的大组件来展示的，而是需要下面的子组件进行展示，这时不会让子组件再次发生一个网络请求，而是直接让父组件将数据传递给子组件。父组件向子组件传递数据有两

2020-12-01 20:06:44 243

原创 Vue.js学习笔记——10.组件化开发（一）

目录一、组件化的基本使用二、全局组件与局部组件三、父组件与子组件四、注册组件的语法糖与组件抽离的写法五、组件的data属性六、父子组件的通信1.父传子——props2.子传父——自定义事件一、组件化的基本使用如果我们将一个页面所有的处理逻辑全部放在一起，处理起来就会变得十分复杂，而且不利于后续的管理以及扩展。但如果我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么整个页面的管理和维护就会变得非常容易了。这就是组件化的思想，它提供了一种抽象，让我们可以开发出一个个独立的可复

2020-11-29 22:40:55 178

原创 Vue.js学习笔记——9.v-model指令的使用

目录一、v-model的基本使用二、v-model与radio的使用三、v-model与checkbox的使用1.checkbox单选框2.checkbox复选框四、v-model与select的使用五、v-model的值绑定六、v-model的修饰符的使用一、v-model的基本使用在用户信息的提交过程中，常常需要使用大量的表单，使用v-model指令就能实现表单元素与数据的双向绑定语法：<inpute v-model="message">举例：<!DOCTYPE html

2020-11-27 23:51:31 782 1

原创 Vue.js学习笔记——8.扩展：高阶函数filter、map与reduce的简单使用

目录一、filter函数的使用二、map函数的使用三、reduce的使用四、完整代码一、filter函数的使用现在提出一个需求，给一个数组如arr = [10,20,111,222,444,40,50]，要求取出所有小于100的数字。在学习filter之前可能会使用一个for循环加if来过滤数组，并将符合要求的push到新数组中。const arr = [10,20,111,222,444,40,50]let newArr = []for(let n of arr){ if(n < 10

2020-11-27 00:31:57 436 1

原创 Vue.js学习笔记——7.购物车小案例

购物车小案例目标实现目标实现一个购物车页面，从data中取得书本对象，将对象的各个属性展示到购物车表格中，提供增减书本数量和删除书本操作，书本数量为1时不可再减少，购物车没有书本时页面输出“购物车为空”，最后输出购物车内总价格，总价格随书本的数量动态变化实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</

2020-11-25 20:22:07 421

原创每日一问——day3——什么是cookie？有什么作用？

目录一、什么是cookie二、cookie有什么作用一、什么是cookieCookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据(通常经过加密)。其实cookies是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件，它和你的网络浏览行为有关，所以存储在你电脑上的cookies就好像你的一张身份证，你电脑上的cookies和其他电脑上的cookies是不一样的;cookies不能被视作代码执行，也不能成为病毒，所以它对你

2020-11-25 16:28:27 626

原创 Vue.js学习笔记——6.v-for指令的使用

v-for指令的使用一、v-for的基本使用一、v-for的基本使用当我们有一组数据需要进行渲染时，可以使用v-for循环遍历渲染，v-for能够遍历数组或对象。作用：循环遍历语法：<element v-for="item in arr"></element><element v-for="(item,index) in arr"></element><element v-for="(value,key) in obj"></e

2020-11-24 22:57:23 2237

原创 Vue.js学习笔记——5.v-if、v-else、v-else-if和v-show的使用

v-if、v-else、v-else-if和v-show的使用v-if、v-else、v-else-if的使用v-if、v-else、v-else-if的使用

2020-11-22 00:55:23 1115 1

原创 Vue.js学习笔记——4.v-on指令的使用

v-on指令的使用v-on的基本使用v-on的参数传递v-on的基本使用v-on用于监听用户发生的事件，如点击、拖拽、键盘事件等作用：绑定事件监听器缩写：@语法：<element v-on:event></element><element @event></element>举例：计数器<!DOCTYPE html><html lang="en"><head> <meta charset=

2020-11-21 14:37:55 269

原创 Vue.js学习笔记——3.计算属性computed的使用

计算属性computed的使用计算属性的基本操作计算属性的复杂操作计算属性的setter和getter计算属性和methods的对比计算属性的基本操作我们可以利用插值语法来显示data中的数据，但在某些情况，我们可能需要对数据进行一些转化或多个数据结合起来进行显示，如：data中有firstName和lastName两个属性，需要结合成fullName进行显示单纯使用插值语法会让代码语法十分繁琐，这时我们就可以使用计算属性computed举例：<!DOCTYPE html>&l

2020-11-20 20:41:54 668

原创 Vue.js学习笔记——2.v-bind指令的使用

目录v-bind指令的使用v-bind介绍v-bind的基本使用v-bind动态绑定class对象语法v-bind指令的使用v-bind介绍除了内容需要动态决定之外，某些时候我们也希望动态绑定一些属性如：动态绑定a元素的herf属性；动态绑定img元素的src属性；此时就可以使用v-bind指令：作用：动态绑定属性缩写：：语法：atrr为元素属性<element v-bind:atrr=“”></element><element :atrr=“”>&lt

2020-11-20 10:42:26 836

原创每日一问——day2——SQL Server、MySQL、Oracle三者之间的异同

目录SQL Server、MySQL、Oracle三者之间的异同MySQL简介SQL Server简介Oracle简介三者之间的区别SQL Server、MySQL、Oracle三者之间的异同MySQL简介MySQL是一个关系型数据库，由瑞典的MySQL AB公司开发，目前属于Oracle公司，MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，增加了速度并提高了灵活性。SQL Server简介SQL Server系列软件是Microsoft公司

2020-11-19 23:09:31 394 2

原创 Vue.js学习笔记——1.基本插值操作指令

目录基本语法及指令（一）1.mustache语法2.v-once3.v-html4.v-text5.v-pre6.v-cloak基本语法及指令（一）1.mustache语法{{message}}即双大括号，插值表达式。作用：将data中文本数据插入到HTML中举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit

2020-11-19 10:51:57 274