之前对 vue 做过简单的了解，但是对如何使用 vue 与后台进行数据交互仍是一知半解。

今天通过我的毕业设计，我了解了如何使用 vue 进行数据交互。

本来打算使用 vue-resource,但尝试了几次都没有成功，最后使用 ajax 成功了。

贴上代码如下：

注意，首先要在页面上引入  jQuery.js  以及 vue.js.

					<div class="input-group wsh-article-kind" id = "wsh-book-kind" >
						<div class="input-group-btn"  >
							<button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
								书评分类 
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu"  >
								<li v-for="kinds in rows">
									<div class ="wsh-padding-left6"><a href="#">{{kinds.articleKindName}}</a></div>
									<div class="divider"></div>
								</li>
								
							</ul>
						</div><!-- /btn-group -->
						<input type="text" class="form-control">
					</div><!-- /input-group -->

重点注意其中的 id , v-for，以及 kinds in rows。 rows 是 vue 接收的数据，kind 相当接收 rows 的参数。

写上 v-for 的代码块本身会不断循环，{{}} 中的数据就是要展示的数据。

js 代码如下：

$.ajax({  
    type : "POST",  
    url : path+"getBookKind",  
    data : '',  
    contentType : "application/json",  
    dataType :"json" ,
    success:function(msg) { 
        new Vue({
          el: '#wsh-book-kind',
          data: {
            rows:msg
          }
      });
    },
    error:function(err){
        alert("request failed！");
        }
    });  

其中 el ,rows 都是与 html 界面中的数据相对应的，返回的数据为 json 格式。

最后在前端展示的界面效果如下：

【算了不知道为什么图片传不了，但是就是可以展示正常的下拉列表就对了。】