vuejs入门实例讲解

vuejs是一个前端javascript框架，集各种操作和方法于一身的框架，可以取代jQuery在项目中使用，个人感觉，vue和angular框架很像，都有双向绑定的属性，也是一个模板框架，不改变html结构就可以使用的模板。提供了自定义组件功能，支持ajax操作。vue本身又有点像react，可以用vuejs开发前端页面，也可以npm install 的方式安装vue，然后用来和node结合开发。

vuejs在页面上的用法和angularjs很像，先准备好html模板，模板上准备好需要展示的数据如：

这里的username就需要在js中指定：

new Vue({
      el:"#container",
      data:{
           username:"vuejs"
     }
});

el是页面上一个包含input元素的父级或者祖先元素id，变量username需要声明在data属性下面。如果有方法，还需要添加methods属性。

下面介绍vuejs入门实例：页面上需要引入vue.js

1、双向绑定：

html

	
1、数据双向绑定(v-model,v-html,{{}})：
	用户名：
	
	
双向绑定：{{username}}

js

var data = new Vue({
  el:"#container",
  data:{
    username:"vuejs"
  }
})

运行效果如下：

2、事件绑定，事件绑定推荐写法是v-on:eventname=funtion，但是也有简写方法@:eventname=function。

html

	
2、事件(v-on,@)：
	

	click

js

var data = new Vue({
	el:"#container",
	data:{
		message:"this is a message"
	},
	methods:{
		renderOk:function(){
			this.message = "click ok";
		}
	}
});

运行效果如下：

 

3、条件判断：条件判断的html写法就是v-if，条件为真，则显示，为假则不显示，另外v-show也具有相同的功能。

html

	
3、条件(v-if v-show)：
	
v-if="ok"
	
show is true

js

var data = new Vue({
    el:"#container",
    data:{
        ok:true,
        show:true
    }
});

运行效果如下： 

 4、for循环，循环的对象可以是数组，也可以是json对象。

html

	
4、for循环(v-for)：
	

		
id:{{item.id}} | name:{{item.name}} | age:{{item.age}}
	

js

var data = new Vue({
    el:"#container",
    data:{
        list:[
            {id:101,name:"aaa",age:10},
            {id:102,name:"bbb",age:20},
            {id:103,name:"ccc",age:30}
		]
	}
});

显示效果如下：

5、自定义组件

html

    
5、自定义组件：
    

js 

var helloComponent = Vue.component("hello",{
    	template:"
hello,vue,this is a component by hello.
"
});

6、ajax请求，这里需要将vue-resource.js加入，它是用来支持ajax请求的，是不是很像angularjs-resource。angular里面的ajax请求也是需要额外添加js库，使用的也是$http的api来请求。

html

	
6、ajax($http.get $http.post)：
	
这里需要将vue-resource.js加入进来
	ajax
	

		
ID:{{user.id}} | Name:{{user.name}} | age:{{user.age}}
	

js

var data = new Vue({
    el:"#container",
    data:{
        users:[]
    },
    methods:{
        requestData:function(){
            var self = this;
            this.$http.get("/response/list.json").then(function(data){
                this.users = data.body;
            },function(){
                console.log("request error.")
            });
        }
     }
});

response/list.json的内容：

[{"id":201,"name":"eee","age":30},
{"id":202,"name":"fff","age":30},
{"id":203,"name":"ddd","age":30}] 

 以上几个示例的完整代码：

	
	
	


	

		

			
1、数据双向绑定(v-model,v-html,{{}})：
			用户名：
			
			
双向绑定：{{username}}
		
		

			
2、事件(v-on,@)：
			

			click
		
		

			
3、条件(v-if v-show)：
			
v-if="ok"
			
show is true
		
		

			
4、for循环(v-for)：
			

				
id:{{item.id}} | name:{{item.name}} | age:{{item.age}}
			
		
		

			
5、自定义组件：
			
		
		

			
6、ajax($http.get $http.post)：
			
这里需要将vue-resource.js加入进来
			ajax
			

				
ID:{{user.id}} | Name:{{user.name}} | age:{{user.age}}
			
		
		
	

这个实例总结了vuejs常用的功能，如双向绑定，条件判断，for循环，事件绑定，以及ajax请求。

另外给出一个示例：通过前面介绍的一些方法，编写一个简单的列表添加，删除的操作，效果如下：

html+css+js代码：

 

	
	
	


    

         

              
Create User
              

                  Name:
                  
              
              

                  Age:
                  
              
              

                  Sex:
                  
                       male
                       female
                  
              
              

                    Create
              
         
         

               

               	   

                        Name
                        Age
                        Sex
                        Operation
               	   
                   

                        {{item.name}}
                        {{item.age}}
                        {{item.sex}}
                        Delete