Dia 04 Métodos de interação Vue-Front e Back End
Um, buscar
O projeto vue interage com o back-end, você pode usar ajax
1. Implementação Ajax usando jquery
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 back-end python
Este é um pequeno aplicativo baseado na estrutura do frasco principalmente
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 envia uma solicitação ao back-end
Front end 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 back-end 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()
Dois, 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. Back-end do 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()
Três, propriedades calculadas
1 Escreva o código js diretamente em { {}} e tente escrever o mínimo de código js possível em html.
2 Use a função { {function ()}} se for usada várias vezes, ela será executada várias vezes.
3 Use calculado atributos como variáveis. Execute uma vez
<!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 Filtrar casos pequenos reescrevendo atributos calculados
<!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>
Quarto, o papel do DOM virtual e da chave do algoritmo diff
1. Para que serve a chave no Vue2.0 v?
Na verdade, não é apenas o Vue. O React também requer a adição do atributo-chave a cada componente ao executar a renderização da lista.
Para simplificar, a chave é um identificador único, assim como um ID
Você sabe, vue e reagir ter implementado um conjunto de DOM virtual , de modo que podemos 不直接操作DOM元素
, nós 只操作数据
podemos重新渲染页面
E o princípio por trás disso é seu algoritmo Diff eficiente
- Comparação hierárquica : compare apenas no mesmo nível
- Por meio da comparação do valor-chave : insira uma nova chave no mesmo grupo (no loop, tente adicionar o máximo possível para
key
tornar o valor-chave único) - Compare por componente / rótulo : em seguida, substitua
2. O algoritmo diff do DOM virtual
Ícone de renderização de dados DOM virtual
3. Realização concreta
① Decompor a árvore de acordo com a hierarquia
② Compare de acordo com o valor-chave
③ Compare por meio de componentes
<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>