vue-v-xxx基于 Vue拓展的 v-xxx 库
2024-09-17 05:23:42
君问归期未有期，巴山夜雨涨秋池。
何当共剪西窗烛，却话巴山夜雨时。
作为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") 点击发短信
最新文章
- 配置eclipse J2EE环境
- unity, itween, closed path
- oracle学习 九 游标的使用（持续更）
- python基于http协议编程：httplib,urllib和urllib2<转>
- xcode 4 制作静态库详解
- 省市县 三级 四级联动Javascript JQ 插件PCASClass.js
- <1>数据引用与匿名存储
- paip.提升性能--- mysql 建立索引 删除索引 很慢的解决.
- 手游接入Facebook的那些坑
- MySQL中同一时候存在创建和上次更新时间戳字段解决方法浅析
- logstash安装配置
- windows系统下安装Scala
- Android学习之旅（一）
- EL表达式和JSTL核心标签库
- [HNOI2011]数矩形
- JAVA 第二天 基本数据类型
- 2.nginx_rewrite模块
- 大数据-hadoop生态之-HDFS
- oracle用户权限和角色
- 安装Helm
热门文章