lz小公司java程序员，也会写写前台，以前用jQuery做前台开发，用的还算顺手；

    最近看了一个开源项目，看到前台用了Vue.js 然后就了解学习下，用上了后发现好爽啊！！！简单好上手，数据双向绑定，前台代码量少了一大截！！

看了看菜鸟教程里的 “学习vue.js”很简单，传送门：

超简单demo，引入vue.js 就ok，列举了简单的用法

      
            
    
     	vue data hello is: {
   {hello}}	vue data map1 is: {
   {map1.name}}- {
   {map1.tall}}- {
   {map1.age}}-{
   {map1.fuck}}	
     
		v-for 循环sites
     	
     
	v-for 循环list1
     	
     
		
     run method1 @click="method1"	
     
	
     run method1 v-on:click="method1"	
     
		
     run method2 change "hi"	hi value is: "{
   {hi}}"	
     
		
     count {
   {num}} 	
     reset num 0
    

一个常用的form表单提交：

jQuery

vue

vue支持双向绑定，只要更改了data声明的值，例如上图的user.username,将其改变，那么模板也会变化，如v-model=“user.username”, 和{

{user.username}}会随着user.username的变化而变化,这样就大大简化了开发，不再用选择器获得节点，通过节点对其属性改变。

这只是最基础的用法，就已经大大加快了我的开发效率了。

注意 

ps：用了vue之后，因为要返回的user是个对象，所以用了$.ajax()指定参数类型为json，所以spring需要用@RequestBody获得对象。

也可还用$.get简单的，但是data就要麻烦的写了,

要写成 $.get('url',{username:user.username,password:user.password,......},function(r){...});

在data中声明对象，例如：

data：{

user：{name：null}

}

当你为user赋值一个新属性时不会自动绑定，例如：

vm.user.age = 10;

此时user已经有age了，但是不会显示的绑定到{

{user}}或v-model=“user.age”中

可以使用下面的set方法

vm.$set(vm.user,'age',10);