君问归期未有期,巴山夜雨涨秋池。

何当共剪西窗烛,却话巴山夜雨时。

作为vue轻车熟路的老司机,经常会用到一些指令,vue官方提供的指令又太少,无法满足旺盛的欲望,而每次要写一遍,终日郁郁寡欢,从小就教育我们乐于助人,为了将奉献精神贯彻始终,用了这个库,空下来大把时间陪陪家人朋友岂不乐哉。

闲话少叙,直逼主题,毕竟我们是正经的官方软文。

什么是vue指令?


  • 在我们了解库之前,我们先回顾一下Vue指令

1. 我们经常用的有一下几种指令

v-text 、 v-html 、 v-show 、 v-if 、 v-else 、v-for 、 v-bind 、 v-on 、
v-model 、 v-once

具体用法前去官网,不再赘述

什么是自定义指令?

有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.

<input  v-focus>// 为例

// 在组件内部
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind:只调用一次,指令与元素解绑时调用。

钩子函数的参数

  • el:指令所绑定的元素,可以用来直接操作 DOM 。
  • binding:一个对象,包含以下属性:
    • name:指令名,不包括 v- 前缀。
    • value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
    • oldValue:指令绑定的前一个值,仅在 updatecomponentUpdated 钩子中可用。无论值是否改变都可用。
    • expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
    • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
    • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

怎么安装vue-v-xxx?


基于vue指令,又新增丰富一些常用的指令,看看是怎么使用的吧

安装

  • 您可以通过npm 安装,推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

# install vue-v-xxx npm install vue-v-xxx --save # or yarn add vue-v-xxx --save
  • 您也可以通过 unpkg.com/vue-v-xxx 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" /> <!-- 引入组件库 --> <script src="https://unpkg.com/vue-v-xxx"></script>

使用

  • 您可以在main.js里面全局注册,在组件内就可以应用了推荐工程

import Vue from 'vue' import App from './App' import Vxxx from 'vue-v-xxx' import 'vue-v-xxx/lib/vue-v-xxx.css' Vue.config.productionTip = false Vue.use(Vxxx) /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
  • 您可以通过 CDN 可以快速使用 vue-v-xxx 写出一个示例,您可以复制下面代码或在线预览

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue-v-xxx</title> <link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" /> </head> <body> <div id="app"> <h1 title="Welcome">欢迎使用 {{ value }}</h1> <button v-copy="value">Click me!</button> </div> </body> <!-- import Vue before vue-v-xxx --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.umd.js"></script> <script> new Vue({ el: '#app', data: { value: 'vue-v-xxx' } }) </script> </html>

我们提供了那些额外的指令?


v-call 拨打指令

该指令快速唤起拨打电话或者发送短信

<template lang="pug">
.v-xxx
div(v-call="tel") 点击拨打☎️
div(v-call:sms="10086") 点击发短信

vue-v-xxx基于 Vue拓展的 v-xxx 库的更多相关文章

  1. 【Vue.js】基于vue的实时搜索,在结果中高亮显示关键词

    一.搜素效果如下: 二.核心 1)利用oninput属性来触发搜素功能 2)利用RegExp来对字符串来全局匹配关键字,利用replace方法来对匹配的关键字进行嵌入高亮的<span class ...

  2. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  3. 基于vue实现百度离线地图

    基于vue实现百度离线地图 1. 百度地图API文件获取 有网络 的情况下,需引入百度地图API文件.如下: <script type="text/javascript" s ...

  4. 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结

    基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...

  5. vue cli4构建基于typescript的vue组件并发布到npm

    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...

  6. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  7. Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...

  8. 基于vue现有项目的服务器端渲染SSR改造

    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...

  9. 基于vue框架手写一个notify插件,实现通知功能

    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...

随机推荐

  1. Java学习——注解

    Java学习——注解 摘要:本文主要介绍了Java开发常用的注解,以及如何自定义注解. 部分内容来自以下博客: https://www.cnblogs.com/Qian123/p/5256084.ht ...

  2. 英语LIGNALOO沉香lignaloo单词

    沉香lignaloo,是瑞香科.沉香属的一种乔木,高5-15米.树皮暗灰色,几平滑,纤维坚韧:小枝圆柱形,具绉纹,幼时被疏柔毛,后逐渐脱落,无毛或近无毛.产于中国广东.海南.广西.福建等地.喜生于低海 ...

  3. iOS开发之--为UITextField监听数值变化的三种方法

    项目中有个验证码输入直接验证跳转页面,用的RAC来监听textfield的输入值,如下: @weakify(self); [self.codeView.textField.rac_textSignal ...

  4. vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  5. Nginx03(实现负载均衡)

    一.负载均衡的作用 1.转发功能 按照一定的算法[权重.轮询.Ip_Hash],将客户端请求转发到不同应用服务器上,减轻单个服务器压力,提高系统并发量. 2.故障移除 通过心跳检测的方式,判断应用服务 ...

  6. IntelliJ IDEA设置主题和背景图片(背景色)

    设置主题以及背景图片 设置代码背景颜色

  7. 编译一个支持django及mysqlclient连接的alpine镜像

    一切都不难,难的就是在alpine镜像里. 最后,使用了网上编译好mysqlclient的镜像,才搞定. 记录一下. 一,基础镜像Dockerfile https://github.com/tnir/ ...

  8. 201871010123-吴丽丽 《面向对象程序设计(Java)》第十周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  9. MyBatis 使用 foreach 批量插入

    MyBatis 使用 foreach 批量插入 参考博文 老司机学习MyBatis之动态SQL使用foreach在MySQL中批量插入 使用MyBatis一次性插入多条数据时候可以使用 <for ...

  10. ipc.Client: Retrying connect to server: .../10.0.0.27:10020. Already tried 6 time(s); retry policy is RetryUpToMaximumCountWithFixedSleep(maxRetries=10, sleepTime=1 SECONDS)

    运行 时候爆出这个错 Exception in thread "main" java.io.IOException: java.net.ConnectException: Call ...