快速理解vue的工作方式

用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开发时，要想着如何通过选择器来直接改变显示内容；这是两者最大的区别；