vue.js入门实例

（1）页面模板

    
    
    
    
    


    

	

	    
Vue demo
	    

               .......
	    
	
    


    

(2)添加表格内容：v-for

        

               

                    

                        
基本的表格布局
                        

                            

                                
序号
                                
书名
                                
作者
                                
价格
                                
操作
                            
                        
                        

                            

                                
{{book.id}}
                                
{{book.name}}
                                
{{book.author}}
                                
{{book.price}}
                                

                                    删除
                                
                            
                        
                    
                
	

 new Vue({
            el:'#app',
            data: {
              books: [{
                    id: 1,
                    author: '曹雪芹',
                    name: '红楼梦',
                    price: 32.0
                }, {
                    id: 2,
                    author: '施耐庵',
                    name: '水浒传',
                    price: 30.0
                }, {
                    id: '3',
                    author: '罗贯中',
                    name: '三国演义',
                    price: 24.0
                }, {
                    id: 4,
                    author: '吴承恩',
                    name: '西游记',
                    price: 20.0
                }]
            },
            methods: {//方法   
                delBook:function(book){
                    /...../
                }
                
            }
        });
    

(3) 删除按钮的事件:v-on:click或者@click

  methods: {
               
                delBook:function(book){
                    this.books.$remove(book);
                }
           }

（4）删除按钮单双行样式不同：template,v-if

(5)添加图书：v-model

                     
添加书籍
                     

                          书名
                          
                     
                     

                           作者
                           
                     
                     

                             价格
                             
                      
                      添加
 

methods: {
	addBook: function() {
		//计算书的id
		this.book.id = this.books.length + 1;
		this.books.push(this.book);
		//将input中的数据重置
		this.book = '';
	}
}

(6)过滤器，添加自定义排序功能：filter

 序号
 书名
 作者
 价格

data: {
    sortparam: ''
 },
methods:{
sortBy: function(sortparam) {
        this.sortparam = sortparam;
     }
}

(7)vue-resource: 通过 XMLHttpRequest 或 JSONP 发起请求并处理响应

new Vue({
            el:'#app',
            ready: function() {//页面加载完成时就去请求
               
                this.$http.get('json/book.json').then(function(response){
                    // 响应成功回调
                     this.$set('books',response.data);
                }, function(response){
                    // 响应错误回调
                    console.log('fail');
                });
            },
 data:{
          books:''
}