~~~
<!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项目部署到服务器上