引入第三方js组件的正确姿势是采用vue.directive的方式,而其它方式如下,
//以下方式引入第三方组件,会出现两次绘制对,也即在调试过程中可能会出现一些奇怪的问题,不建议使用这种方法。 export default { mounted: function () { this.$nextTick(function () { // todo: editor = CodeMirror.fromTextArea(document.getElementById('editor'); } } } |
第一种,直接在app.js中添加指令如下:
Vue.directive('drag', { inserted:function(el){ el.onmousedown=function(e){ let l=e.clientX-el.offsetLeft; let t=e.clientY-el.offsetTop; document.onmousemove=function(e){ el.style.left=e.clientX-l+'px'; el.style.top=e.clientY-t+'px'; }; el.onmouseup=function(){ document.onmousemove=null; el.onmouseup=null; } } } }) new Vue({ el:'#app' }); |
第二种,直接在vue的组件中添加如下
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> <input v-model="dir2" v-my-directive2="dir2"/> </div> </template> <script> export default { data(){ return { dir1:'', dir2:'' } }, directives:{ //直接绑定函数,作用等同于update,不做准备工作和扫尾工作 myDirective1(val){ console.log(val) }, myDirective2:{ bind(){ //第一次绑定到元素的准备工作 }, update(val,old){ //在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update console.log(val) }, unbind(){ //销毁前的清理工作 } } } } </script> |