vue插件开发

参考：

https://cn.vuejs.org/v2/guide/custom-directive.html （官方教程）

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

2，vue指令写在标签属性中，可以直接获取到标签dom元素。

3，vue自定义指令中的代码，主要是原生js：dom，style，event，document...

一，钩子函数

bind

inserted

update

componentUpdated

unbind

二，钩子函数的参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。

binding：一个对象，包含以下 property：

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 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>
<script>
var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
</script>

三，动态指令参数

指令的参数可以是动态的。

例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

<script>
Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left'
    }
  }
})
</script>

四，vue指令常用方式

1，钩子函数获取节点所在组件实例vue

vnode.context

2，原生js的api

window对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Window

document //见下方

location //https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href

history //操作浏览器会话历史的接口https://developer.mozilla.org/zh-CN/docs/Web/API/History

navigator//用户代理的状态和标识，浏览器信息等

screen
screenX/screenY
scrollX/scrollY

innerWidth/innerHeight
outerWidth/outerHeight

//方法
getComputedStyle(element, [pseudoElt])

getSelection()//光标选中的内容
moveTo()
moveBy()
resizeTo()
resizeBy()
scrollTo()
scrollBy()
requestAnimationFrame()/cancelAnimationFrame()
print() //弹出窗口，打印当前文档

Node对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Node

各种类型的 DOM API 对象会从这个接口继承。

//主要属性：
childNodes
firstChild
lastChild
parentNode
nextSibling
previousSibling

nodeName
nodeTyle
textContent

//主要方法：
appendChild(node)
cloneNode(deep)//deep,是否深度克隆
insertBefore()//结合nextSibling可以实现insertAfter()相同的功能
removeChild(child)
replaceChild(newChild,oldChild)
contains(otherNode)
hasChildNodes()

Document对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Document 

继承自Node和EventTarget

//主要属性：
links
scripts
forms
images
head
body
children
contentType
URL
其他事件属性
...

defaultView//返回window对象

//主要方法:
createElement()
createTextNode()
createAttribute(name)

getElementById(id)
getElementsByName(name) //dom的name属性值
getElementsByTagName()
querySelector()
querySelectorAll()

write()
evaluate()//传入XPath表达式

Element对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Element

Event是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口，而 SVGElement 接口是所有 SVG 元素的基础。继承自Node

//主要属性方法：
tagName
className
id
name
innerHTML
outerHTML
attributes
children
firstElementChild
lastElementChild

scrollWidth/scrollHeight
scrollLeft/scrollTop
clientWidth/clientHeight

closet()//最近的祖先元素

getAttribute()
getAttributeNames()
setAttribute()
toggleAtrribute()
hasAttribute(attrname)

scrollTo()
scrollBy()

HTMLElement对象

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口；继承自Element，Node

//主要属性：
innerText //没有outerText
offsetWidth/offsetHeight
offsetLeft/offsetTop//只读，当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界/上边界 偏移的像素值。
offsetParent
style
title
//无新的方法

Element.style 样式对象

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference （所有css属性）

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference （css属性在js中的写法列表）

//获取一个元素的所有样式：
var element = document.getElementById("myElement");
var out = "";
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);

for (prop in elementStyle) {
  if (elementStyle.hasOwnProperty(prop)) {
    out += "  " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'
";
  }
}
console.log(out)

event 事件

https://developer.mozilla.org/zh-CN/docs/Web/API/Event

https://developer.mozilla.org/zh-CN/docs/Web/Events

//主要属性：
bubbles //bool,只读，是否可以冒泡
cancelBubble //可读写,设置是否继续冒泡
defaultPrevented//只读
target //事件触发的元素
currentTarget//总是指向事件绑定的元素，将相同的事件处理程序附加到多个元素时

//主要方法：
preventDefault()//阻止默认事件的侦听器
stopPropagation()//阻止捕获和冒泡阶段中当前事件的进一步传播