场景分析 在前端开发中，我们常常会运用到“组件库”。在main入口中引入组件库，就可以很轻松的在页面中引入，并做一些基本的配置，如样式，颜色等。只需要在引入的组件中写入特定的属性，就能够定义。 举例说明 例如：element-ui组件库中使用switch开关，有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。<el-switchv-model="value":active-color="activecolor"@change="touchSwitch"> </el-switch><s...
JavaScript中我们经常会遇到拷贝数组的场景，但是都有哪些方式能够来实现呢，我们不妨来梳理一下。1、扩展运算符（浅拷贝）自从ES6出现以来，这已经成为最流行的方法。它是一个很简单的语法，但是当你在使用类似于React和Redux这类库时，你会发现它是非常非常有用的。 numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组。数组/对象值的拷贝是通过引用而不是值复制。 // numbersCopy.push(4); cons...
如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。 1、Toast组件 首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。 (1). toast.vue <template lang="html"><div v-if="isShowToast" class="toast-container" @touchmove.prevent><!-- 这里content为双花括号 --><span class="loading-tx...
数据初始化 Vue 实例在建立的时候会运行一系列的初始化操作，而在这些初始化操作里面，和数据绑定关联最大的是 initState。 首先，来看一下他的代码： function initState(vm) {vm._watchers = [];var opts = vm.$options;if(opts.props) {initProps(vm, opts.props); //初始化props}if(opts.methods) {initMethods(vm, opts.methods); //初始化methods}if(opts.data) {initData(vm); //初始化data} else {observe(vm._data = {}, ...
实现todolist功能，具体实现如下： 可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addFun();进行调用。<div id="app"><input type="text" v-model="msg" @keydown="kaddFun($event)"/><button @c...
本文实例讲述了JS实现图片轮播效果。分享给大家供大家参考，具体如下：本次轮播效果图如下：具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换 以下为实现代码： 首先是html代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>最简单的轮播效果</title> </head> <body> <div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><a href="#" rel="e...
都知道浏览器和服务端是通过 HTTP 协议进行数据传输的，而 HTTP 协议又是纯文本协议，那么浏览器在得到服务端传输过来的 HTML 字符串，是如何解析成真实的 DOM 元素的呢，也就是我们常说的生成 DOM Tree，最近了解到状态机这样一个概念，于是就萌生一个想法，实现一个 innerHTML 功能的函数，也算是小小的实践一下。 函数原型 我们实现一个如下的函数，参数是 DOM 元素和 HTML 字符串，将 HTML 字符串转换成真实的 DOM 元素且 appe...
具体代码如下所述： v-bind:title="message" <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue实例化</title> </head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="app-2"><span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span> </div> <script type="text/javascript"> var app2 = new Vue({el: #app-2,data: {message: 页面加载...
本文实例讲述了JavaScript偏函数与柯里化。分享给大家供大家参考，具体如下：到目前为止我们仅讨论绑定this，现在让我们更深入学习。 我们不仅能绑定this，也可以是参数，这较少使用，但有时很方便。bind完整的语法为： let bound = func.bind(context, arg1, arg2, ...);可以绑定上下文this和函数的初始参数。举例，我们有个乘法函数mul(a,b): function mul(a, b) {return a * b; }我们可以在该函数的基础上使用绑定创建一个doubl...
本文实例讲述了JavaScript解析机制与闭包原理。分享给大家供大家参考，具体如下： js解析机制： js代码解析之前会创建一个如下的词法环境对象（仓库）：LexicalEnvironment{ } 在扫描js代码时会把： 1、用声明的方式创建的函数的名字; 2、用var定义的变量的名字存到这个词法环境中; 3、同名的时候：函数声明会覆盖变量，下面的函数声明会覆盖上面的同名函数; 4、函数的值为：对函数的一个引用; 变量的值为undefined; 5、如果用函数...
本文实例讲述了JavaScript遍历数组的三种方法map、forEach与filter。分享给大家供大家参考，具体如下： 前言 近一段时间，因为项目原因，会经常在前端对数组进行遍历、处理，JS自带的遍历方法有很多种，往往不加留意，就可能导致知识混乱的现象，并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法，分别为：map、forEach、filter，在讲解知识点的同时，会类比相识的函数进行对比，这样会有助...
本文实例讲述了Vue 事件处理操作。分享给大家供大家参考，具体如下： 1 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 html： <div id="app1"><button v-on:click="counter +=1">递增</button><p>按钮已被点击 {{ counter }} 次。</p> </div>js： var app1 = new Vue({el: "#app1",data: {counter: 0} });效果：2 事件处理方法 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 ...
本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考，具体如下： 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件： <component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然...
本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考，具体如下： 1 Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： html： <div id="app-1"><!-- HTML 中是 kebab-case --><blog-post post-title="你好！"></blog-post...
本文实例讲述了Vue 组件注册。分享给大家供大家参考，具体如下： 1 组件名 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： Vue.component(my-component-name, { /* ... */ })该组件名就是 Vue.component 的第一个参数。 你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范 中的自定义组件名...