使用Vue.js调动豆瓣API电影模块，并渲染上页面

1、引入Vue.js

<script src="../vue.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>