1、引入Vue.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

2、在HTML上书写Vue指令

 <div id="test">
 <ul class="row">
         <li class="m-lst" v-for="(value,index) in hotMovie">
             
             <div>
                 <img class="img-responsive center-block" :src="value.images.large" />
             </div>
             <div class="caption">
                 <!--:title为v-bind的缩写 旨在获取API中的title值赋给title属性-->
                 <h4 class="h4 text-center" :title="value.title">{{value.title}}</h4>
                 <p class="m-casts"><i class="glyphicon glyphicon-user"></i><a class="u-cast" :href="val.alt" v-for="val in value.casts">{{val.name}}</a></p>
                 <p class="m-genres"><i class="glyphicon glyphicon-tags"></i> <span class="text-danger u-genres" v-for="val in value.genres">{{val}}</span> </p>
                 <p class="m-time"><i class="glyphicon glyphicon-time"></i><span class="text-success u-time">{{value.year}}</span></p>
                 <p class="text-right"><a href="03-detail.html" class="btn btn-info" @click="link(value.id)">查看详情</a></p>
             </div>
         </li>
     </ul>
</div>

3、使用Vue开始接数据，主要思路是：定义一个空的数组（这里命名为hotMovie）,然后通过ajax跨域jsonp的方式对url中的API进行跨域访问，并将接出来的数据存在名为hotMovie的数组中。至于GET与POST的提交方式的不同，详见本博客有关http中的内容，这里不做过多的叙述。然后就是使用各种指令开始将API中的数据渲染上页面。

<script type="text/javascript">
		 new Vue({
		 	el:"#test",
		 	data:{
		 		hotMovie:[]
		 	},
		 	methods:{
		 		link:function(tt){
		 			localStorage.setItem("id",tt)
		 		}
		 	},
		 	created:function(){
		 		let _self = this;
		 		$.ajax({
		 			type:"get",
		 			url:"https://api.douban.com//v2/movie/in_theaters",
		 			dataType :"jsonp",
		 			success:function(data){
		 				console.log(_self.hotMovie)
                         _self.hotMovie=data.subjects;
                         console.log(11);
		 			}
		 		});
		 	}
		 })
	</script>