Day 04 Vue–前后端交互–方法
一、fetch
vue项目跟后端交互，可以使用ajax
1、使用jquery的ajax实现
1.1 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载美女数据</button>
美女你好：{
{mytext}}
</div>
</body>
<script>
var myajax=$
var vm = new Vue({
el: '#box',
data: {
mytext:'',
},
methods:{
handleClick(){
myajax.ajax({
url:'http://127.0.0.1:5000/',
method:'get',
success: (data)=> {
console.log(data)
this.mytext=data
}
})
}
}
})
</script>
</html>
1.2 python后端
这是一个基于flask框架的小app 主要是
from flask import Flask,make_response
app=Flask(__name__)
@app.route('/')
def index():
print('请求来了')
res=make_response('hello world')
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
2、fetche向后端发送请求
2.1 vue前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载美女数据</button>
从后端加载的数据：
<br>
用户名：{
{name}}
<br>
年龄：{
{age}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: '',
age:''
},
methods: {
handleClick() {
fetch('http://127.0.0.1:5000/').then(response => {
return response.json()
}).then(json => {
console.log('从后端获取的json数据', json)
this.name=json.name
this.age=json.age
}).catch(ex => {
console.log('出异常', ex)
})
}
}
})
</script>
</html>
2.2 python后端
from flask import Flask,make_response,jsonify
app=Flask(__name__)
@app.route('/')
def index():
res=jsonify({
'name':'lqz','age':18})
# 这两行代码处理跨域
res=make_response(res)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
二、axios
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点我加载电影数据</button>
<ul>
<li v-for="item in datalist">
<p>电影名：{
{item.name}}</p>
<p>导演：{
{item.director}}</p>
<img :src="item.poster">
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist:[],
},
methods: {
handleClick() {
axios.get("http://127.0.0.1:5000/film").then(res=>{
console.log(res.data)
if(res.data.status==0){
this.datalist=res.data.data.films
}
})
}
}
})
</script>
</html>
2、python后端
from flask import Flask, make_response, jsonify
import json
app = Flask(__name__)
@app.route('/film')
def film():
with open('film.json', 'rt', encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic)
# 这两行代码处理跨域
res = make_response(res)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
三、计算属性
1 直接再 { {}} 中写js代码 html中尽量少写js代码
2 使用函数 { { 函数() }} 使用多次会执行多次
3 使用计算属性 当作变量来使用，多次使用只会执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p>{
{name}}</p>
<p>{
{name.substring(0,1).toUpperCase()+name.substring(1)}}</p>
<!-- <p>{
{upperName()}}</p>-->
<!-- <p>{
{upperName()}}</p>-->
<!-- <p>{
{upperName()}}</p>-->
<p>{
{getName}}</p>
<p>{
{getName}}</p>
<p>{
{getName}}</p>
<p>{
{getName}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: 'asdfasdf'
},
methods: {
upperName() {
console.log('我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
}
},
computed: {
getName() {
console.log('我执行了')
return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
},
}
})
</script>
</html>
3.1 通过计算属性重写过滤小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<input type="text" v-model="myinput" @input="handleChange"> {
{myinput}}
<br>
<div>
<p v-for="data in new_arr">{
{data}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
myinput:'',
arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
},
computed:{
new_arr(){
return this.arr.filter(item=>{
return item.indexOf(this.myinput) >-1
})
}
}
})
</script>
</html>
四、虚拟DOM 与diff算法 key的作用
1.Vue2.0 v-for 中 :key 有什么用呢？
其实呢不只是vue，react中在执行列表渲染时也会要求给每个组件添加key这个属性
key简单点来说就是唯一标识，就像ID一样唯一性
要知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面
而隐藏在背后的原理便是其高效的Diff算法
- 分层级比较：只做同层级的对比
- 通过key值比较：出现新的key就插入同组（循环中，尽量加
key，让key值唯一） - 通过组件/标签进行比较：然后进行替换
2.虚拟DOM的diff算法
虚拟DOM数据渲染图示
3.具体实现
① 把树按照层级分解
② 按照key值比较
③ 通过组件进行比较
<div id="box">
<div v-if="isShow">111</div>
<p v-else>222</p>
<!--
{tag:div,value:111}
{tag:p,value:222}
直接不比较，直接删除div，新增p
-->
<div v-if="isShow">111</div>
<div v-else>222</div>
<!--
{tag:div,value:111}
{tag:div,value:222}
比较都是div，只替换文本内容
-->
</div>