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

轉載于:https://www.cnblogs.com/kttbk/p/8031860.html

總結

以上是生活随笔為你收集整理的学习vue第一篇记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。