weixin_44827643的博客

核心：页面重新渲染后再执行其中的内容。

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文件如下。...............

本文主要介绍如何利用element搭建表单结构并进行表单的验证。

本文主要介绍Vue.js中Vuex的使用，其主要的作用就是实现组件之间的数据通信。通过Vue脚手架搭建的项目中，src目录存有store文件夹，其中的index.js引入Vuex，存放了组件所需的数据和方法等。如下图所示。...

下面实例定义了child1和child2两个组件，点击按钮可实现两者的动态切换。本文主要介绍Vue.js中如何进行组件的动态切换。

介绍正则表达式的基本使用

本文主要介绍JavaScript中防抖和节流的使用。

本文主要介绍JavaScript中深浅拷贝的使用。顾名思义，两者实际上是对数据进行拷贝，对于简单数据类型而言，两者的区别不大。对于复杂数据类型而言，浅拷贝只会拷贝该数据的地址，深拷贝则会完全复制出一份新的数据。...

本文主要介绍ES6模块化中babel的使用。

vue-router的使用

本文主要介绍在JavaSript中如何进行对象的遍历，主要介绍3种方式。

本文主要介绍Vue.js中组件插槽的使用，包括基本使用、具名使用以及父组件操纵子组件的内容。

本文主要介绍如何利用生成器以及promise对象解决回调地狱的问题。下面的案例是一个简单的回调地狱问题，本文将以此具体介绍两种方案的使用。

3.在组件Jerry中的mounted函数中监听该事件，获取到num的值，进而完成相关操作。前面已经介绍了父子组件中如何进行数据的传递，本文将介绍兄弟组件间数据的传递，核心是利用。2.在组件Tom中声明自定义事件，同时传递数据。另外，可以销毁自定义事件，也是通过事件中心来销毁。进行自定义事件的声明和监听（另外还有删除）......

1）于子组件的模板元素中绑定自定义事件，语法格式为@普通事件名（如click）="$emit(自定义事件名)"（2）在子组件使用时绑定自定义事件，例如下面实例中的@pushfruit='操作...'由此便可实现子组件对父组件数据的操纵//（mlist.push("lemon")）直接在子组件中操作，父组件中的数据会改变（前提是数组、对象等引用数据类型），但不建议这样做，因为props是单向数据流。.........

本文主要介绍JavaScript中的promise对象、ajax请求数据、json数据格式以及如何利用promise封装ajax.

这是定义的父组件，其中包含了msg及father数据el'#app',data{msg'父组件',father[{name'张三',age45},{name'李四',age69}]}})这是定义的子组件datareturn{smsg'子组件',son[{name'张三儿子',age10},{name'李四儿子',age29}]}},template``});现提出问题如何在子组件中获取到父组件中的father数组？......

本文主要介绍Vue.js中组件的注册使用，包括组件的全局和局部注册。

如要遍历无接口的数据结构，可自定义接口进行遍历操作。例如，若要遍历下面Obj中content数组，可自行定义接口。titlecontent}titlecontentleti=0;return{next()=>{valuedonefalse};i++;}else{return{valuedonetrue}}}}}}}打印结果。...............

本文主要介绍Vue.js中如何实现数组和对象的响应式更改。简单来说，在Vue.js中，单纯利用索引和属性进行数组元素以及对象内容的更改，所操作的数据并不具备响应式的特点。下面通过案例进行简单介绍。......

Vue实例默认会先执行四个函数，分别是创建前、已创建、挂载前和已挂载函数。当点击案例中的第一个按钮时，数据会发生变化，更新前及已更新对应的函数会被执行。当点击案例中的第二个按钮时，Vue实例被销毁，销毁前及已销毁对应的函数会被执行。本文主要介绍Vue.js中实例创建到销毁的整个生命周期，通过下面这个小案例进行演示。......

本文主要介绍Vue.js中过滤器的使用，与自定义指令类似，过滤器可进行全局定义和局部定义。语法如下： 上例定义了字符串首字符大写的过滤器。语法如下： 通过filter属性定义局部过滤器，上面定义了获得字符串最后一个字符和首字符的过滤器。效果如图： 代码如下：3.带参数过滤器的使用以时间的格式化为例，介绍带参数过滤器的使用。格式化前： 格式化后： 通过formTime('yyyy-MM-dd hh:mm:ss')过滤器实现。代码如下：...

上文介绍了Vue.js中侦听器如何使用，本文主要利用侦听器完成验证用户名的案例。效果如图所示： 核心思路：监听input表单值的变化，当失去焦点时，向后端发送请求并获取数据（这里通过定时函数进行模拟）。 代码如下：...

本文主要介绍Vue.js中侦听器的使用。简单来说，侦听器是用来监听数据的变化，当数据发生变化时会执行相应的操作。下面通过更改并显示姓名的案例介绍侦听器的使用，实现效果如图： 实现代码如下：核心思路：为两个输入框分别双向绑定firstName以及lastName值，后通过watch监听firstName以及lastName的变化，并定义拼接操作，使得fullName得到全新的值。......

本文主要介绍Vue.js中计算属性的使用，同methods中方法的定义一致，两者使用的区别在于计算属性中的方法基于依赖的数据将结果存储起来，下次再调用时，除非数据有变，否则直接获取已存储的数据 。下面案例同时利用methods以及computed中定义的方法来实现字符串翻转的功能，以此展示二者的区别。运行结果：由运行结果可以看出，当第二次执行computed中的方法时，在数据为变的情形下，方法不会再执行。而methods中的方法，只要调用，就会执行一遍。......

本文主要介绍如何在Vue.js如何自定义全局和局部指令，以两个案例进行介绍，分别自定义v-focus和v-color指令。v-focus实现在表单输入框获取焦点，v-color可设置元素的背景颜色。基本语法如下： 定义完即可在元素上使用，需要加上“v-”前缀 完整代码如下：2.自定义局部指令在directives属性中添加局部指令 使用方法同全局指令一样，在相应元素中添加自定义的指令即可效果如图：第二个input文本框会自动获取焦点，第三个input文本框的背景会变色

本文主要介绍Vue.js中表单修饰符的使用，主要介绍三种修饰符：1.number:将表单的值转为数字类型2.trim:将表单值左右两侧的空格去除3.lazy:将表单的input事件改为change事件，当失去焦点或按下enter键时，绑定的数据会发生改变 效果如图：...

本文主要介绍如何利用Vue.js进行表单的基本操作，核心是利用v-model对各个表单的元素值进行双向绑定。效果如图：文本框即是上面的姓名框,通过给文本框双向绑定name变量，即可实现效果。单选按钮即为上面的性别选项，由于单选按钮仅需选择一个选项，故定义的gender变量以单个数据进行赋值。为所有的相应单选按钮的值双向绑定gender变量多选按钮即为上面的爱好选项，由于多选按钮可以选择多个选项，故定义的hobby变量以数组的形式进行赋值。为所有的相应多选按钮双向绑定hobby变量。下拉选项同时具有单选按钮和

前文介绍过如何利用DOM操作制作tab栏切换的效果，本文将介绍如何利用Vue.js实现tab栏切换的效果。id为app的区域为Vue.js渲染的区域，内部ul包含的是选项区域，ul下的div是图片的显示区域。2.核心思路（1）定义数据在Vue中定义list对象数组，每个数组元素存储选项的标题及图片的路径信息，id值是给元素绑定的，为提高性能。通过for循环遍历list,将相应的数据渲染至标题(e.title)及图片显示区域(e.path) (3)类的添加，实现切换效果本例定义两个类，

目录1.变量的使用（1）let的使用（2）const的使用2.解构赋值(1) 数组解构（2）对象解构3.箭头函数（1）箭头函数的写法（2）箭头函数的this指向问题本文主要介绍ES6中的一些语法。a.提供块级作用域b.不存在变量提升，需要先声明再使用，否则会出现“暂时性死区”c.不能重复声明a.定义常量，不可更改，声明时需要初始化b.提供块级作用域c.定义数组或对象时，可修改其中的元素或属性2.解构赋值(1) 数组解构a.基本解构，一一对应b.不需要赋值的变量，可不写，要用逗号空出位置c.一组

本文主要介绍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的设置显示或隐藏元素。如下所示 完整代码如下：......

上文介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，这时可以通过在data中定义数据控制样式的变化。效果如图：......

本文主要介绍如何利用Vue.js给元素绑定class样式，主要分为两种写法：分为对象写法和数组写法。为元素绑定class属性，对象的属性名为类名，值为false或true,true表示使用了该类，false表示未应用。下面的div和addBorder为自定义的类2.数组写法为元素绑定class属性，数组的元素为实际的类名，写上则代表引用了该类，否则则未引用。下面的div1和addBorder1为自定义的类。3.注意点（1）两者写法混用，如上述的div2所示，test类是通过对象的形式引入

本文介绍如何利用Vue.js进行元素属性的绑定，通过以下案例进行介绍：开始时，点击“百度”，页面会跳转至百度页面。点击“切换网址”后，再点击“百度”时，页面会跳转至淘宝页面。Vue.js通过v-bind指令进行属性绑定，这样类似于给属性赋值了一个变量，当变量的值更改以后，属性的值也会发生变化。注意：“v-bind:”可以简写“:” 代码如下：3.v-model的实现原理根据前文所述，v-model用于实现数据的双向绑定。其实现原理就是：通过v-bind将数据绑定给表单的value值，同时给表单绑定

上文有提及事件修饰符的使用，可简化事件相关的一些操作。本文主要介绍按键修饰符的使用，可为元素绑定指定按键的键盘按下及弹起事件等。通过两个小案例来进行简单介绍案例一：用户输入用户名后，按下回车键，内容会显示在下方区域。按下backspace键，用户名会被清空核心代码：2.自定义按键修饰符案例二：在第二个输入框中，当用户输入a或A时,会弹出提示内容（1）可直接利用ASCII码值进行绑定（2）自定义按键修饰符（如下所示），再进行调用 全部代码如下：......

本文主要介绍Vue.js中常用指令的使用，包括v-cloak、v-text、v-html、v-model等，下面依次进行介绍。vue.js会对原始页面进行编译，故页面一开始会显示出未编译的内容，之后会被迅速渲染为指定数据，由此产生了“闪动”问题。v-cloak的原理就是隐藏未编译的内容，只显示出编译之后的内容。需要规定以下样式：2.v-text添加纯文本可解析HTML标签跳过编译，保留原文本只编译一次，之后不再具备响应式特点双向数据绑定：改页面元素的值，Vue结构中的值会变化；改Vue结构中的值，

Map类似于普通对象的使用，拥有键值对，但它的键不仅仅只是字符串而已，还可以是对象等其他数据类型。（7）forEach()用于遍历对象的元素，第一个参数代表值，第二个参数代表键，第三个参数代表整个对象。（3）has()用于判断对象是否包含某个元素。（5）obj.keys()获取对象所有的键。（4）delete()用于删除对象的元素。（1）set()用于设置对象包含的元素。（8）clear()用于清空对象的元素。（2）get()用于获取对象的元素值。（6）size获取对象包含的元素个数。...

本文主要介绍JavaScript中模板字符串的使用。相对于字符串拼接而言，模板字符串提供了更加简洁的方法。下面介绍模板字符的几个特性。1.支持单双引号同时书写模板字符串由反引号“`”包裹，内部可同时书写单双引号2.支持变量引入模板字符串以“${变量}”的形式引入变量3.可解析HTML...

本文主要介绍JavaScript中export和import的使用，从而实现不同js文件之间的数据共享。1.新建文件夹，在该目录下创建3个文件，如图所示2.在1.js文件中定义一些数据，包括变量a和函数b,变量a的值为189，b函数的功能是实现任意数的累加和。定义完成后，通过export将a和b共享出去。 3.在2.js文件中利用import获取a和b，即可使用4.在2.html文件中引入2.js文件，type类型需改为“module”,最后通过浏览器执行（需要通过Web服务器打开）执行结

本文主要介绍JavaScript中面向对象的使用。在介绍之前，先介绍ES5中构造函数的使用。ES6提供了面向对象的方法：面向对象使用constructor构建对象，可定义公有属性和静态变量。面向对象提供了继承的方法，通过extends关键词可继承某类的属性和方法。现定义Male类，继承上面定义的Human类，即可获取Human类的属性和方法。此外，在子类中，可定义私有属性进行使用。 在父类的基础上，子类可利用constructor构造新的构造函数面向对象提供了get和set方