指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。 componentUpdated: 被绑定元素所在模板完成一次更新周期时调用...
什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。接下来给大家介绍vuejs单向绑定、双向绑定、列表渲染、响应函数基础知识，具体详情如下所示：（一）单向绑定<div id="app"> {{ message }} </div> <script> new Vue({ el: #app, data: ...
前言 上一篇博文我们讲到了节流函数的应用场景，我们知道了节流函数可以用在模糊查询、scroller、onresize等场景；今天这篇我们来讲防抖函数的应用场景：： 通过上一篇博文的学习，我们知道了防抖函数的原理：只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次； 如果对防抖函数原理有疑惑，请点击链接跳转到关于防抖函数讲解的博文：https://www.gxlcms.com/ar...
上一篇讲到了javascript的节流函数和防抖函数，那么我们在实际场合中该如何运用呢？ 首先，我们来理解一下：节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数； 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务，也就是用户可以在边输入的同时边看到提示...
一、函数式组件和普通组件的区别 渲染快没有实例，意味着没有（this）没有生命周期（没有响应式数据）二、组件函数的使用1.以局部组件为例，将组件标记为functional=ture; 因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象： props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象...
说一种没人发的，利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。 一、main.js文件 import Vue from vue import App from ./App import router from ./router import store from ./store import mixin from ./utils/mixin Vue.prototype.$bus = new Vue() //进行全局混入 Vue.mixin(mixin) new Vue({store,router,...
Vue中util的工具函数，下面通过实例代码给大家介绍的非常详细，具体代码如下所示： // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => {fn.apply(context, args) }, wait) } } function flatten (arr) { // 数组扁平化 return arr.reduce((result, item) => { return result.concat(Array.isArray(item) ? flatten(item) : ...
什么是路由什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。web中，路由的概念也是类似，根据URL来将请求分配到指定的一个端。(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目，vue.js本身就可以通过组合组件来组成应用程序；当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使...
在父组件中调用子组件的方法： 1.给子组件定义一个ref属性。eg:ref="childItem" 2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数，并通过this.$refs.childItem.userInPar来使用子组件中声明的函数。 父组件： <template><child-item ref=child /><button @click=useChildFun></button></template><script>```methods() {useChildFun:function(){this.$refs.c...
前言 有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次接口参数分别是“1”和“12”，比浪费网络资源更要命的是如果参数为“1”的请求返回数据的时间晚于参数...
函数式组件特点： 没有管理任何状态没有监听任何传递给它的状态没有生命周期方法它只是接收一些prop的函我们将这样的组件标记为functional： 无状态 == 无响应式数据无实例 == 无this上下文函数式组件的优点： 渲染开销低，因为函数式组件只是函数； 函数式组件基本写法： {functional: true,// Props 是可选的props: {// ...},// 为了弥补缺少的实例// 提供第二个参数作为上下文render: function (createElement, context) {// .....
JS中很多开源库都有一个util文件夹，来存放一些常用的函数。这些套路属于那种常用但是不在ES规范中，同时又不足以单独为它发布一个npm模块。所以很多库都会单独写一个工具函数模块。 最进尝试阅读vue源码，看到很多有意思的函数，在这里分享一下。 Object.prototype.toString.call(arg) 和 String(arg) 的区别？ 上述两个表达式都是尝试将一个参数转化为字符串，但是还是有区别的。 String(arg) 会尝试调用 arg.toString() 或者 ar...
用过Element ui库的童鞋肯定知道<el-tabs>组件，简单、好用、可以自定义标签页，不知道广大童鞋们在刚开始使用<el-tabs>组件的时候有没有想过它是如何实现的？我咋刚开始使用<el-tabs>组件的时候就有去想过，也想去实现一个超级简单的tabs选项卡组件，无奈当时功力不够，未能实现。最近的一个简单项目中正好要用到选项卡组件，由于项目简单也就没有使用任何第三方库，于是就自己动手写了个选项卡组件。 1、实现tabs选项卡组件的思考...
本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com vue生命周期与钩子函数</title><style></style><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> </head> <body><div id="box">{{msg}}</div><script>var vm=new Vue({el:#box,data:{msg:well},created:function(){alert(实例已经创建);},befo...
在vue实例中，通过$mount()实现实例的挂载，下面来分析一下$mount()函数都实现了什么功能。 $mount函数执行位置_init这个私有方法是在执行initMixin时候绑定到Vue原型上的。 $mount函数是如如何把组件挂在到指定元素 $mount函数定义位置 $mount函数定义位置有两个: 第一个是在src/platforms/web/runtime/index.js这里的$mount是一个public mount method。之所以这么说是因为Vue有很多构建版本, 有些版本会依赖此方法进行有些功能...