学习vue第一篇记录

首先，下载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>