Vue.js学习笔记
文章平均质量分 80
我的Vue.js学习日常
土拨鼠的忧伤丶
这个作者很懒,什么都没留下…
展开
-
Vue.js学习笔记——17.Vue的生命周期
Vue实例的生命周期生命周期即是一个事物从出生到消亡的过程,世间万物都有生命周期,Vue实例也是如此。Vue的生命周期是Vue中比较重要的知识点,在面试中常常被问到。简单来说可以分为四个阶段:创建阶段,挂载阶段,运行阶段,销毁阶段。原创 2022-05-16 16:11:43 · 203 阅读 · 0 评论 -
Vue.js学习笔记——16.单文件组件
在之前Vue-CLI创建的项目中,看到了新的文件扩展名.vue,称为单文件组件,是Vue.js自定义的一种文件格式。在之前的代码中,编写组件的形式都是全局组件,全部逻辑写在一个HTML文件内,这种方式虽然在初步学习的时候方便,但当我们的代码逻辑慢慢复杂,或想要编写更大的项目的时候,就会暴露出很多缺点。原创 2022-05-16 15:45:54 · 440 阅读 · 0 评论 -
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 · 343 阅读 · 0 评论 -
Vue.js学习笔记——14.组件化开发(四)
目录九、动态组件十、在动态组件上使用keep-aliveVue.js学习笔记——10.组件化开发(一)Vue.js学习笔记——11.组件化开发(二)Vue.js学习笔记——12.组件化开发(三)九、动态组件有时我们需要在不同的组件间进行动态的切换,比如一个多标签的页面以上可以通过使用<component>标签搭配is属性来实现。用法:<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="原创 2022-05-05 15:39:41 · 143 阅读 · 0 评论 -
Vue.js学习笔记——13.扩展:箭头函数的简单使用
目录一、箭头函数的基本使用二、箭头函数的参数与返回值三、箭头函数this的指向一、箭头函数的基本使用二、箭头函数的参数与返回值三、箭头函数this的指向原创 2020-12-10 10:58:15 · 282 阅读 · 1 评论 -
Vue.js学习笔记——12.组件化开发(三)
目录八、插槽slot的使用九、具名插槽的使用八、插槽slot的使用slot意为插槽,组件的插槽是为了让我们封装的组件更具有扩展性,能够让使用者决定组件的内部的一些内容到底展示什么。组件在复用时不会完全一样,会根据应用场景不同做出相应改变,如果说组件模板内写的是组件的共性,那么插槽就保留了它复用时的特性。要使用插槽,在组件模板内部定义一个slot标签即可,意为在组件内预留了一个插槽。在使用组件时往组件标签内部添加标签,添加的标签会替换插槽所在的位置。举例:<!DOCTYPE html>原创 2020-12-05 14:20:57 · 132 阅读 · 0 评论 -
Vue.js学习笔记——11.组件化开发(二)
目录六、父子组件的通信1.父传子——props2.子传父——自定义事件七、父子组件的访问方式1.父访问子——$children2.父访问子——$refs3.子访问父——`$parent`与`$root`上集:Vue.js学习笔记——10.组件化开发(一)六、父子组件的通信1.父传子——props在实际开发中,我们从服务器请求到了很多数据,并不是在整个页面的大组件来展示的,而是需要下面的子组件进行展示,这时不会让子组件再次发生一个网络请求,而是直接让父组件将数据传递给子组件。父组件向子组件传递数据有两原创 2020-12-01 20:06:44 · 181 阅读 · 0 评论 -
Vue.js学习笔记——10.组件化开发(一)
目录一、组件化的基本使用二、全局组件与局部组件三、父组件与子组件四、注册组件的语法糖与组件抽离的写法五、组件的data属性六、父子组件的通信1.父传子——props2.子传父——自定义事件一、组件化的基本使用如果我们将一个页面所有的处理逻辑全部放在一起,处理起来就会变得十分复杂,而且不利于后续的管理以及扩展。但如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么整个页面的管理和维护就会变得非常容易了。这就是组件化的思想,它提供了一种抽象,让我们可以开发出一个个独立的可复原创 2020-11-29 22:40:55 · 140 阅读 · 0 评论 -
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 · 717 阅读 · 1 评论 -
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 · 237 阅读 · 0 评论 -
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=“”><原创 2020-11-20 10:42:26 · 774 阅读 · 0 评论 -
Vue.js学习笔记——3.计算属性computed的使用
计算属性computed的使用计算属性的基本操作计算属性的复杂操作计算属性的setter和getter计算属性和methods的对比计算属性的基本操作我们可以利用插值语法来显示data中的数据,但在某些情况,我们可能需要对数据进行一些转化或多个数据结合起来进行显示,如:data中有firstName和lastName两个属性,需要结合成fullName进行显示单纯使用插值语法会让代码语法十分繁琐,这时我们就可以使用计算属性computed举例:<!DOCTYPE html>&l原创 2020-11-20 20:41:54 · 627 阅读 · 0 评论 -
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 · 219 阅读 · 0 评论 -
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 · 913 阅读 · 1 评论 -
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 · 2148 阅读 · 0 评论 -
Vue.js学习笔记——7.购物车小案例
购物车小案例目标实现目标实现一个购物车页面,从data中取得书本对象,将对象的各个属性展示到购物车表格中,提供增减书本数量和删除书本操作,书本数量为1时不可再减少,购物车没有书本时页面输出“购物车为空”,最后输出购物车内总价格,总价格随书本的数量动态变化实现index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车</原创 2020-11-25 20:22:07 · 371 阅读 · 0 评论 -
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 · 400 阅读 · 1 评论