用vue的朋友大都用过jQuery,而且都感觉jQuery用得很顺手,要控制哪个元素就控制哪个元素,但这里我不是要讲为什么要用vue,而是讲如何快速的学会使用VUE,从实现方法的角度来讲。
一、输入与输出场景:一个文本框的内容显示到div或label等元素内
jQuery的实现方式:
$('#divId').text($('#txtId').val())
Vue的实现方式:
<input type='text' v-model="inputvalue">
<div>{{inputvalue}}</div>
vue不用做额外的工作,只要在标签内绑定好vue数据就可以
二、表格修改场景:一个数组循环生成一个Table,然后对每行编辑
jQuery的实现方式:A、js生成字符串,然后写入div中;B、引用模板方法,然后写入模板展示区;
对table中的修改,读出修改行的文本数据,修改后替换,流程复杂,代码量不小,我就不上代码了;
Vue的实现方式:
在tr标签中增加v-for="(item,index) in tabledata"方式实现,对tabledata的直接增删改后无需对展示的table标签做任何操作;
三、事件:button事件的绑定
这个和jquery相比,基本上差不多,jQuery可在页面加载事件中绑定事先写好的方法,也可直接用onEvent方式绑定事先写好的方法,vue是用@事件="事先写好的方法名称"来绑定,所以这个没什么好说的
总结:用vue开发时,要想着如何通过修改数据来改变显示内容;用jQuery开发时,要想着如何通过选择器来直接改变显示内容;这是两者最大的区别;