首先，下载vue.js引入包里。
用到的文件可以从该网址引入：http://www.bootcdn.cn/vue/
1.赋值
html：
<div id="app" title="试用title属性">
{{ message }}
</div>
js：
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
2.循环列表：
html：
<div id="designer" style="height:100%;">
<div class="every_designer_div" v-for ="item in lists" >
<div class="img_left_div"><img v-bind:src="item.designer_list_img" class="designerPhoto" ></div>
<div class="font_container_right_div">
<div class="firstLine" style="font-size: 14px;"><label class="designerName">{{item.designer_name}}</label>{{item.designer_title}}</div>
<div>从业年限：{{item.career_age}}年</div>
<div class="overflow_ellipsis">设计理念：{{item.designer_theory}}</div>
<div class="overflow_ellipsis">代表作品：{{item.designer_name}}</div>
</div>
</div>
</div>
js：
<script>
var demo=new Vue({
el:'#designer',
data: {
lists:[],
getImgUrl: 'http://xxxxxxxxxxxx' //待调用的接口地址
},
created: function(){
this.getImg() //定义方法
},
methods: {
getImg: function(){
var that = this;
that.$http({ //调用接口
method:'GET',
url:this.getImgUrl, //this指data
params: {
start:'1',//请求的参数
limit:'20'
},
}).then(function(response){ //接口返回数据
console.log(response.data.data)
this.lists=response.data.data;
},function(error){
})
}
}
})
</script>