~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.js"></script>
<script src=" https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
*{margin: 0;padding: 0}
.item img{
width: 100px;
height: 100px;
}
#app{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width:400px;
margin-left: auto;
margin-right: auto;
}
.item{
margin-left: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="item" v-for="(item,index) of movies">
<img :src="item.imgUrl" alt="">
<h6>{{item.title}}</h6>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
movies:[]
},
mounted() {
$.ajax({
url:"https://douban.uieee.com/v2/movie/top250",
type:"GET",
dataType:"jsonp",
success:res=>{
var subjects=res.subjects;
var movies=[];
subjects.forEach(res => {
var title=res.title;
var imgUrl=res.images.small;
var temp={
title,
imgUrl
}
movies.push(temp);
});
this.movies=movies;
}
})
},
})
</script>
</body>
</html>
~~~
- vue
- 第一章 起步
- 第1節 開發環境配置
- 第2節 hello world
- 第3節 開發todolist
- 第四節 vue-temp
- 第二章 基本
- 第1節 實例，掛載點，模板
- 第2節 vue的生命周期
- 2-1 數據改變時執行的生命周期函數
- 第3節 條件渲染
- 第4節 v-text和v-html的區別
- 第5節 計算屬性，方法，watch偵聽器
- 第6節 計算屬性的get，set方法
- 第7節 樣式綁定
- 第8節 列表渲染
- 第9節 Vue.set
- 第10節 vue點擊事件獲取元素的內容
- 第三章 項目開發
- 第一節 top250的開發
- 第二節 滑動顯示
- 第四章 vue組件
- 第1節 父組件向子組件傳參
- 第2節 子組件向父組件傳參
- 第五章 Vue項目
- 第六章 vue中的路由如何實現
- 第七章 全局組件和局部組件
- 第八章 vue組件和vue實例的關系
- 第九章 vue組件的模板方式
- 0.0 視頻
- 第十章 gshop項目
- 1. stylus
- 第十一章 將vue項目部署到服務器上