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