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'
});