vue插件函数式调用【找回使用jq的回忆】

“使用vue还用jq?”“使用vue还抄作DOM干嘛?”“直接用jq好了”

各种吐槽，“使用vue可以用jq，但是不能像用jq那样用vue，vue也是js实现的，底层也是驱动dom的”，这是我自己和自己说的。

【使用vue真不应该使用jq！！】

不过后来在项目上，发现自己还是有些JQ思维没转过来，导致了很多麻烦

“vue可以使用原生来操作dom的，在上一节vue指令那一篇，可以看出来，我们是可以使用原生的js的语法的，但是最好在vue的指令函数里面，只有这样才能和vue的生态结合起来，不会导致数据驱动失败。”

jquery插件让我非常着迷的是他的函数式调用，例如：

 $("#signupForm").validate({    rules: {      firstname: "required",      lastname: "required",    },    messages: {      firstname: "请输入您的名字",      lastname: "请输入您的姓氏",    }

如果是vue的话可能需要这样写:

<template><div id="signupForm"><input type="text" v-model="firstname" v-on:change="valid(firstname)"><input type="text" v-model="lastname" v-on:change="valid(lastname)"></div></template><script> export default { data(){ return { firstname:"", lastname:"" } }, method:{ valid(name){ //------- } } }</script>

这里举的例子好像并不是很形象，但也可以看出vue需要在dom中添加指令、事件以及data里面返回对应的数据，还需要写一个校验函数

而使用过jq插件的开发知道jq不需要添加这些，只需要写一个id来挂载插件，和使用一个函数来给插件发送配置就可以了

vue不能函数式调用?不能和vue那样哪里需要哪里调用?

其实是可以的！我们可以在.vue组件外面再套一个函数,调用这个函数就能让子组件在当前组件中使用，代码参考mint-ui的toast的实现具体不复述：

https://github.com/MTTTM/mint-ui/tree/master/packages/toast

toast的调用方式:

Toast({  message: 'operation success',  iconClass: 'icon icon-success'});