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

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

作为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：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • 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：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

怎么安装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. 
								
  2. Vue项目中使用基于Vue.js的移动组件库cube-ui
		
    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
    
		
    3. 
						
  3. 基于vue实现百度离线地图
		
    基于vue实现百度离线地图 1. 百度地图API文件获取 有网络 的情况下,需引入百度地图API文件.如下: <script type="text/javascript" s ...
    
		
    4. 
						
  4. 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结
		
    基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...
    
		
    5. 
						
  5. vue cli4构建基于typescript的vue组件并发布到npm
		
    基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
    
		
    6. 
						
  6. 【技术博客】基于vue的前端快速开发(工具篇)
		
    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...
    
		
    7. 
						
  7. Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
		
    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...
    
		
    8. 
						
  8. 基于vue现有项目的服务器端渲染SSR改造
		
    前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
    
		
    9. 
						
  9. 基于vue框架手写一个notify插件，实现通知功能
		
    简单编写一个vue插件,当点击时触发notify插件,dom中出现相应内容并且在相应时间之后清除,我们可以在根组件中设定通知内容和延迟消失时间. 1. 基础知识 我们首先初始化一个vue项目,删除不需 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java的数据类型相关知识点
			
    总结就是八个字: 数据2型,四类八种 (个人理解,仅供参考) 解析图如下: 基本数据类型: 1.逻辑类:boolean 布尔类型,它比较特殊,布尔类型只允许存储true(真)或者false(假),不可 ...
    
			
    2. 
						
  2. 【已解决】git怎么合并多个分支到主干master
			
    git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout workbranch 工作.... 提交工作 ...
    
			
    3. 
						
  3. 将流数据输出到Mysql中
			
    outputMysqlApp.scala import java.sql.DriverManager import org.apache.spark.SparkConf import org.apac ...
    
			
    4. 
						
  4. oracle查询中会使索引无效的情况总结
			
    总结一下oracle中会使索引无效的情况 1 无where条件: 2 索引列进行运算时: 3 使用like,并且通配符在前的情况: 4 字符型字段为数字时在where条件里不添加引号: 5 not i ...
    
			
    5. 
						
  5. ezdml设计数据库
			
    数据结构和设计的介绍 ezdml软件:https://www.lanzous.com/i6ew2pe 1 用ezdml设计数据表然后导出到mysql数据库中 点击生成模型 2 选择库 3 点击开始生成
    
			
    6. 
						
  6. 七、union联合
			
    Union:联合 作用:把2次或多次查询结果合并起来 案例(认识union):我想把商品价格大于5000元的和商品价格小于20元的商品都取出来 1.Select * from goods where  ...
    
			
    7. 
						
  7. 02微信小程序-轮播的宽度100%显示和轮播的基础配置
			
    1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image ...
    
			
    8. 
						
  8. day17_7.19包与logging模块，深浅拷贝
			
    一.包 在模块的定义里,模块就是方法的集合,可以将一些常用的方法封装到一个py文件中,通过调用使用,而且,其中的表现形式也有以包的形式导入. 其实,包就是一系列模块的结合体,表示形式就是一个文件夹,在 ...
    
			
    9. 
						
  9. 【使用篇二】SpringBoot整合jsp（6）
			
    1. pom.xml中添加jstl和jasper springboot不推荐使用jsp,所以在spring-boot-starter-web启动器中并没有包括这两个,所以我们需要单独引入: <! ...
    
			
    10. 
						
  10. 接口规范、容错处理规则、aph备份数据规则
			
    前话:前后解耦,前端开发环节使用APH,后台开发环节postman(可考虑为后台也做一个aph后台版) 1.api标准:标识符(ret:1为正常数据,0为接口报错),数据体(data:api的数据容器 ...
    
			
    11.