自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 JavaScript-函数

今天来复习js中函数的相关知识,主要包括函数的概念以及相关用法。函数概念函数(function),也叫做功能、方法,函数可以将一段代码封装起来,被封装的函数具备某一项特殊的功能,内部封装的一段代码作为一个完整的结构体,要执行就都执行,要不执行就都不执行函数的作用就是封装一段代码,将来可以重复使用函数声明函数声明又叫函数定义,函数必须先定义再使用如果没有定义函数直接引用,会报一个引用错误函数声明语法:function 函数名(){封装的结构体;};特点:函数声明的时候,函数体并不会执行,

2022-04-07 17:04:10 727

原创 JavaScript-数组

今天复习一下js中数组的相关知识,包括数组的概念、获取数组元素、数组的长度、数组遍历这四大块内容。数组的概念数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,这个集合称之为数组数组的定义数组是一组有序的数据集合。数组内部可以存放多个数据,不限制数据类型,并且数组的长度可以动态的调整创建数组最简单的方式就是数组字面量方式数组的字面量:[]一般将数组的字面量赋值给一个变量,方便后期对数组进行操作如果存放多个数据,每个数据之间用逗号进行分隔,最后一个数据不需要加逗号获取

2022-04-06 22:00:33 115

原创 Vue.js组件-组件通信-非父子组件传值以及其他通信方式

非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C。示例如图:EventBus当组件嵌套关系复杂时,根据组件关系传值会较为繁琐。组件为了数据中转,data中会存在许多与当前组件功能无关的数据。这时就需要使用EventBus。EventBus(事件总线)是一个独立的事件中心,用于管理不同组件间的传值操作EventBus通过一个新的Vue实例来管理组件传值操作,

2022-03-15 16:09:19 1048

原创 Vue.js组件-组件通信-子组件向父组件传值

子组件向父组件传值子向父传值需要通过自定义事件实现子组件数据变化时,通过$emit()触发自定义事件自定义事件名称建议使用kebab-case父组件监听子组件的自定义事件,并设置处理程序自定义事件传值子组件触发事件时可以向父组件传值父组件在监听事件时需要接收子组件传递的数据,示例如图:组件与v-modelv-model用于组件时,需要通过props与自定义事件实现,示例如图:今日份推荐歌曲:薛之谦-绅士...

2022-03-14 17:08:10 1403

原创 Vue.js组件-组件通信-父组件向子组件传值

先说一下什么是组件通信,在组件间传递数据的操作,称为组件通信父组件向子组件传值通过子组件的props选项接收父组件的传值Vue.component('my-component-a',{props:['title'],template:`< h3>{{title}}< /h3>`});注意:props不要与data存在同名属性Props命名规则建议prop命名使用驼峰法。父组件绑定时使用kebab-case,示例如图:单向数据流父子组件的

2022-03-08 15:55:09 723

原创 Vue.js组件-组件注册

今天开始复习组件的相关内容。组件的概念组件用于封装页面的部分功能,将功能的结构、样式、逻辑代码封装为整体提高功能复用性与可维护性,更好的专注于业务逻辑组件使用时为自定义HTML标签形式,通过组件名作为自定义标签名组件注册全局注册全局注册的组件在注册后可以用于任意实例或组件中:Vue.component('组件名',{选项对象});注意:全局注册必须设置在根Vue实例创建之前组件基础本质上,组件是可复用的Vue实例,所以它们可与new Vue接收相同的选项,例如data、meth

2022-03-07 15:25:04 287

原创 Vue.js计算属性、侦听器以及生命周期函数

这几个东西比较少,我们合并在一起讲。计算属性Vue.js的视图不建议书写复杂逻辑,这样不利于维护,你像下面这张图,看起来就很难受:封装函数是很好的方式,但有时重复的计算会消耗不必要的性能提高执行效率,就可以使用计算属性computed。计算属性使用时为属性形式,访问时会自动执行对应函数,示例如图:methods与computed的区别computed具有缓存性,methods没有computed通过属性名访问,methods需要调用computed仅适用于计算操作计算属性的sett

2022-03-03 17:06:46 448

原创 Vue.js过滤器

过滤器分为全局过滤器和局部过滤器。过滤器可以用于进行文本内容格式化处理,也可以在插值表达式和v-bind中使用。全局过滤器可以将一个数据传入到多个过滤器中进行处理,示例如图:一个过滤器可以传入多个参数,示例如图:局部过滤器局部过滤器只能在当前Vue实例中使用,示例如图:局部过滤器有两种书写方式:1.filters:{ filterA:function(value){ }}2.filters:{ filterA(value){ }}今日份推荐歌曲:孙燕姿-遇见...

2022-03-02 16:55:45 354

原创 Vue.js指令-自定义指令

自定义指令一共有两个,分别是自定义全局指令和自定义局部指令。指令用于简化DOM操作,相当于对基础DOM操作的一种封装。当我们希望使用一些内置指令不具备的DOM功能时,可以进行自定义指令的设置。自定义全局指令指的是可以被任意Vue实例或组件使用的指令,示例如图:自定义局部指令指的是可以在当前Vue实例或组件内使用的指令,示例如图:...

2022-03-01 14:34:48 327

原创 Vue.js修饰符

今天我们来复习修饰符,修饰符包括事件修饰符、按键修饰符、系统修饰符、鼠标按键修饰符以及v-model修饰符,有点多,唉事件修饰符.prevent修饰符用于阻止默认事件行为,相当于event.preventDefault().stop修饰符用于阻止事件传播,相当于event.stopPropagation()Vue.js中允许修饰符进行连写,举个例子:@click.prevent.stop.once修饰符用于设置事件只会触发一次按键修饰符按键码按键码指的是将按键的按键码作为

2022-02-28 17:11:42 263

原创 Vue.js指令

指令这块分为内容处理指令、属性绑定指令、渲染指令、事件处理指令以及表单输入绑定指令这五块。我们一个一个来复习。内容处理指令v-once 指令使元素内部的插值表达式只生效一次,once嘛,从字面上就可以理解了v-text 指令元素内容整体替换为指定纯文本数据,text,这个也可以从字面上理解,代码示例如图:v-html 指令元素整体内容替换为指定的HTML文本,这个也很容易理解,就是在里面写html语句嘛:属性绑定指令v-bind指令用于动态绑定HTML属性简写方式:比如这

2022-02-25 15:10:44 329

原创 Vue.js基础语法

Vue实例Vue实例是通过Vue函数创建的对象,是使用Vue功能的基础el选项用于选取一个DOM元素作为Vue实例的挂载目标只有挂载元素内部才会被Vue进行处理,外部为普通HTML元素el选项代表了MVVM中的View层可以为CSS选择器格式的字符串,或HTML Element实例,但不能为html或body挂载完毕后,可以通过vm.$el进行访问未设置el的Vue实例,也可以通过vm.$mount()进行挂载,参数形式与el规则相同我们来举个例子:var vm = new Vu

2022-02-24 15:48:05 843

原创 Vue.js核心特性

Vue.js的核心特性分为两个部分,一个是叫数据驱动视图,另外一个则是组件化开发。数据驱动视图数据变化会自动更新到对应元素中,无需手动操作DOM,这种行为称为单向数据绑定对于输入框等可输入元素,我们可以设置双向数据绑定双向数据绑定是在数据绑定的基础上,可以自动将元素输入内容更新给数据,实现数据与元素的双向绑定基于MVVM模型实现的数据驱动视图大大解放了DOM操作View与Model处理分离,降低了代码的耦合度但是双向绑定时的bug调试会难度增加大型项目的View与Model过多,维护成本相

2022-02-23 16:14:17 362

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除