- 博客(88)
- 收藏
- 关注
RSS订阅原创 webpack的基本使用
1.新建pack文件夹，运行npm init -y初始化package.json文件，不用-y则需要手动进行配置。6.index.html文件引入"/bundle.js"文件，运行npm run dev命令即可。本文主要介绍webpack的基本使用，通过简单的打包流程进行具体说明。2.新建src文件夹，新建index.html和index.js文件。3.安装jquery,书写index.js文件如下。...............
2022-08-12 18:47:37
274
原创 Vue.js之Vuex的使用
本文主要介绍Vue.js中Vuex的使用，其主要的作用就是实现组件之间的数据通信。通过Vue脚手架搭建的项目中，src目录存有store文件夹，其中的index.js引入Vuex，存放了组件所需的数据和方法等。如下图所示。...
2022-08-12 15:29:11
3622
原创 Vue.js之动态绑定组件
下面实例定义了child1和child2两个组件，点击按钮可实现两者的动态切换。本文主要介绍Vue.js中如何进行组件的动态切换。
2022-08-12 13:57:20
452
原创 JavaScript 之深浅拷贝
本文主要介绍JavaScript中深浅拷贝的使用。顾名思义，两者实际上是对数据进行拷贝，对于简单数据类型而言，两者的区别不大。对于复杂数据类型而言，浅拷贝只会拷贝该数据的地址，深拷贝则会完全复制出一份新的数据。...
2022-08-02 14:31:35
101
原创 Vue.js之简单购物车的实现
该组件作为父组件，内部又划分为三个组件，分别为cart-title、cart-list、cart-total，对应购物车的标题、列表以及总价区域。为两个按钮绑定点击事件，为输入框绑定失去焦点事件。在父组件中定义list数据，通过props传给总价组件，在计算属性中利用reduce方法得出总价。在父组件中定义uname数据，通过props属性传给标题组件。商品列表组件功能的实现是购物车最重要的部分，相对来说功能较复杂。划分完成后，则将静态布局的代码放置到对应组件的模板中。在父组件中绑定自定义的监听事件。...
2022-07-22 14:17:51
4283
1
原创 JavaScript之async和await修饰符
本文主要介绍JavaScript中async和await修饰符的使用，async和await两种语法的结合可以让异步代码像同步代码一样。
2022-07-20 11:51:45
390
原创 JavaScript之三种异步编程解决方案
本文主要介绍如何利用生成器以及promise对象解决回调地狱的问题。下面的案例是一个简单的回调地狱问题，本文将以此具体介绍两种方案的使用。
2022-07-19 20:50:13
132
1
原创 Vue.js之组件间的通信
3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作。前面已经介绍了父子组件中如何进行数据的传递，本文将介绍兄弟组件间数据的传递，核心是利用。2.在组件Tom中声明自定义事件，同时传递数据。另外，可以销毁自定义事件，也是通过事件中心来销毁。进行自定义事件的声明和监听（另外还有删除）......
2022-07-19 19:20:02
591
1
原创 Vue.js之子组件操纵父组件的数据
1）于子组件的模板元素中绑定自定义事件，语法格式为@普通事件名（如click）="$emit(自定义事件名)"（2）在子组件使用时绑定自定义事件，例如下面实例中的@pushfruit='操作...'由此便可实现子组件对父组件数据的操纵//（mlist.push("lemon")）直接在子组件中操作，父组件中的数据会改变（前提是数组、对象等引用数据类型），但不建议这样做，因为props是单向数据流。.........
2022-07-19 18:56:21
965
1
原创 JavaScript之promise对象及ajax的使用
本文主要介绍JavaScript中的promise对象、ajax请求数据、json数据格式以及如何利用promise封装ajax.
2022-07-19 14:11:34
1315
原创 Vue.js之父组件向子组件传值
这是定义的父组件，其中包含了msg及father数据el'#app',data{msg'父组件',father[{name'张三',age45},{name'李四',age69}]}})这是定义的子组件datareturn{smsg'子组件',son[{name'张三儿子',age10},{name'李四儿子',age29}]}},template``});现提出问题如何在子组件中获取到父组件中的father数组？......
2022-07-18 21:24:39
718
原创 JavaScript之迭代器和生成器的使用
如要遍历无接口的数据结构，可自定义接口进行遍历操作。例如，若要遍历下面Obj中content数组，可自行定义接口。titlecontent}titlecontentleti=0;return{next()=>{valuedonefalse};i++;}else{return{valuedonetrue}}}}}}}打印结果。...............
2022-07-18 14:32:00
451
原创 Vue.js之数组和对象的响应式更改
本文主要介绍Vue.js中如何实现数组和对象的响应式更改。简单来说，在Vue.js中，单纯利用索引和属性进行数组元素以及对象内容的更改，所操作的数据并不具备响应式的特点。下面通过案例进行简单介绍。......
2022-07-16 13:57:54
1393
原创 Vue.js之Vue实例的生命周期
Vue实例默认会先执行四个函数，分别是创建前、已创建、挂载前和已挂载函数。当点击案例中的第一个按钮时，数据会发生变化，更新前及已更新对应的函数会被执行。当点击案例中的第二个按钮时，Vue实例被销毁，销毁前及已销毁对应的函数会被执行。本文主要介绍Vue.js中实例创建到销毁的整个生命周期，通过下面这个小案例进行演示。......
2022-07-14 19:16:31
257
1
原创 Vue.js之过滤器的使用
本文主要介绍Vue.js中过滤器的使用，与自定义指令类似，过滤器可进行全局定义和局部定义。语法如下： 上例定义了字符串首字符大写的过滤器。语法如下： 通过filter属性定义局部过滤器，上面定义了获得字符串最后一个字符和首字符的过滤器。效果如图： 代码如下：3.带参数过滤器的使用以时间的格式化为例，介绍带参数过滤器的使用。格式化前： 格式化后： 通过formTime('yyyy-MM-dd hh:mm:ss')过滤器实现。代码如下：...
2022-07-14 16:06:36
675
1
原创 Vue.js之侦听器案例——验证用户名
上文介绍了Vue.js中侦听器如何使用，本文主要利用侦听器完成验证用户名的案例。效果如图所示： 核心思路：监听input表单值的变化，当失去焦点时，向后端发送请求并获取数据（这里通过定时函数进行模拟）。 代码如下：...
2022-07-14 15:55:05
270
1
原创 Vue.js之侦听器的使用
本文主要介绍Vue.js中侦听器的使用。简单来说，侦听器是用来监听数据的变化，当数据发生变化时会执行相应的操作。下面通过更改并显示姓名的案例介绍侦听器的使用，实现效果如图： 实现代码如下：核心思路：为两个输入框分别双向绑定firstName以及lastName值，后通过watch监听firstName以及lastName的变化，并定义拼接操作，使得fullName得到全新的值。......
2022-07-13 19:32:11
532
1
原创 Vue.js之计算属性的使用
本文主要介绍Vue.js中计算属性的使用，同methods中方法的定义一致，两者使用的区别在于计算属性中的方法基于依赖的数据将结果存储起来，下次再调用时，除非数据有变，否则直接获取已存储的数据 。下面案例同时利用methods以及computed中定义的方法来实现字符串翻转的功能，以此展示二者的区别。运行结果：由运行结果可以看出，当第二次执行computed中的方法时，在数据为变的情形下，方法不会再执行。而methods中的方法，只要调用，就会执行一遍。......
2022-07-13 19:20:21
1188
原创 Vue.js之自定义指令的使用
本文主要介绍如何在Vue.js如何自定义全局和局部指令，以两个案例进行介绍，分别自定义v-focus和v-color指令。v-focus实现在表单输入框获取焦点，v-color可设置元素的背景颜色。基本语法如下： 定义完即可在元素上使用，需要加上“v-”前缀 完整代码如下：2.自定义局部指令在directives属性中添加局部指令 使用方法同全局指令一样，在相应元素中添加自定义的指令即可效果如图：第二个input文本框会自动获取焦点，第三个input文本框的背景会变色
2022-07-13 17:01:23
327
原创 Vue.js之表单修饰符的使用
本文主要介绍Vue.js中表单修饰符的使用，主要介绍三种修饰符：1.number:将表单的值转为数字类型2.trim:将表单值左右两侧的空格去除3.lazy:将表单的input事件改为change事件，当失去焦点或按下enter键时，绑定的数据会发生改变 效果如图：...
2022-07-13 16:36:25
137
原创 Vue.js之表单的基本操作
本文主要介绍如何利用Vue.js进行表单的基本操作，核心是利用v-model对各个表单的元素值进行双向绑定。效果如图：文本框即是上面的姓名框,通过给文本框双向绑定name变量，即可实现效果。单选按钮即为上面的性别选项，由于单选按钮仅需选择一个选项，故定义的gender变量以单个数据进行赋值。为所有的相应单选按钮的值双向绑定gender变量多选按钮即为上面的爱好选项，由于多选按钮可以选择多个选项，故定义的hobby变量以数组的形式进行赋值。为所有的相应多选按钮双向绑定hobby变量。下拉选项同时具有单选按钮和
2022-07-12 20:33:52
988
原创 Vue.js之tab栏切换的制作
前文介绍过如何利用DOM操作制作tab栏切换的效果，本文将介绍如何利用Vue.js实现tab栏切换的效果。id为app的区域为Vue.js渲染的区域，内部ul包含的是选项区域，ul下的div是图片的显示区域。2.核心思路（1）定义数据在Vue中定义list对象数组，每个数组元素存储选项的标题及图片的路径信息，id值是给元素绑定的，为提高性能。通过for循环遍历list,将相应的数据渲染至标题(e.title)及图片显示区域(e.path) (3)类的添加，实现切换效果本例定义两个类，
2022-07-12 15:54:54
558
原创 JavaScript之ES6语法
目录1.变量的使用（1）let的使用（2）const的使用2.解构赋值(1) 数组解构（2）对象解构3.箭头函数（1）箭头函数的写法（2）箭头函数的this指向问题本文主要介绍ES6中的一些语法。a.提供块级作用域b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”c.不能重复声明a.定义常量，不可更改，声明时需要初始化b.提供块级作用域c.定义数组或对象时，可修改其中的元素或属性2.解构赋值(1) 数组解构a.基本解构，一一对应b.不需要赋值的变量，可不写，要用逗号空出位置c.一组
2022-07-12 14:28:06
2182
原创 Vue.js之if分支和for循环
本文主要介绍Vue.js中if分支以及for循环的使用。Vue.js提供了v-if、v-else-if以及v-else的分支语句，v-if可与v-else-if搭配使用。当判定结果符合条件时，相应的元素会被渲染出来，不符合条件的元素不会进行渲染。如下例所示。score的值为98 渲染结果如下：注意：另外介绍v-show指令，实质上是display属性的封装，通过true或false的设置显示或隐藏元素。如下所示 完整代码如下：......
2022-07-11 19:41:08
660
1
原创 Vue.js之绑定style样式
上文介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，这时可以通过在data中定义数据控制样式的变化。效果如图：......
2022-07-11 16:02:50
893
原创 Vue.js之绑定class样式
本文主要介绍如何利用Vue.js给元素绑定class样式，主要分为两种写法：分为对象写法和数组写法。为元素绑定class属性，对象的属性名为类名，值为false或true,true表示使用了该类，false表示未应用。下面的div和addBorder为自定义的类2.数组写法为元素绑定class属性，数组的元素为实际的类名，写上则代表引用了该类，否则则未引用。下面的div1和addBorder1为自定义的类。3.注意点（1）两者写法混用，如上述的div2所示，test类是通过对象的形式引入
2022-07-11 15:20:07
497
原创 Vue.js之属性绑定及v-model的实现原理
本文介绍如何利用Vue.js进行元素属性的绑定，通过以下案例进行介绍：开始时，点击“百度”，页面会跳转至百度页面。点击“切换网址”后，再点击“百度”时，页面会跳转至淘宝页面。Vue.js通过v-bind指令进行属性绑定，这样类似于给属性赋值了一个变量，当变量的值更改以后，属性的值也会发生变化。注意：“v-bind:”可以简写“:” 代码如下：3.v-model的实现原理根据前文所述，v-model用于实现数据的双向绑定。其实现原理就是：通过v-bind将数据绑定给表单的value值，同时给表单绑定
2022-07-09 17:15:48
468
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人