一、与后端交互三种方式
1、
2、
3、
4、小电影案例
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="handleLoad">点我，加载小电影</button>
<hr>
<ul>
<li v-for="item in dataList">
<h3>电影名字：{{item.name}}</h3>
<h3>导演：{{item.director}}</h3>
<p>电影介绍：{{item.synopsis}}</p>
<p><img :src="item.poster" alt="" height="300px"></p>
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
dataList: []
},
methods: {
handleLoad() {
axios.get('http://127.0.0.1:5000/films').then(res => {
console.log(res.data)
this.dataList = res.data.data.films
})
}
}
})
</script>
</html>
flask 后端：
import json
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/films')
def films():
with open('./filme.json', 'rt', encoding='utf-8') as f:
res = json.load(f)
res = jsonify(res)
res.headers = {'Access-Control-Allow-Origin': '*'}
return res
if __name__ == '__main__':
app.run()
原生django：
import json
from django.http import HttpResponse, JsonResponse
def films(request, *args, **kwargs):
with open('filme.json', 'rt', encoding='utf-8') as f:
result = json.load(f)
res = {'code': 100, 'msg': '查询成功', 'result': result}
aa = JsonResponse(res)
aa['Access-Control-Allow-Origin'] = '*'
return aa
电影json地址：
https://m.maizuo.com/v5/#/films/nowPlaying
效果：
二、计算属性
三、监听(侦听)属性
四、ref属性
五、Vue生命周期
六、组件介绍和使用
七、组件间通信
标签：__,Vue,res,间通信,json,films,import,监听 From： https://www.cnblogs.com/dgp-zjz/p/17714714.html