Día 04 Métodos de interacción Vue-Front y Back End
Uno, buscar
El proyecto vue interactúa con el backend, puedes usar ajax
1. Implementación de 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 backend de Python
Esta es una pequeña aplicación basada en el marco del matraz 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 envía una solicitud al backend
2.1 vue frontal
<!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 backend de 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()
Dos, 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.- backend de 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()
Tres propiedades calculadas
1 Comentario js código directamente en { {}} y trate de escribir tan poco js código como sea posible en html.
2 función Uso { {function ()}} si se usa varias veces, se ejecuta varias veces.
3 Uso calcula atributos como variables. Ejecutar una 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 pequeños reescribiendo 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>
Cuarto, el papel del DOM virtual y la clave del algoritmo diff
1. ¿Cuál es el uso de la clave en Vue2.0 v-for?
De hecho, no se trata solo de Vue. React también requiere agregar el atributo clave a cada componente al realizar la representación de la lista.
En pocas palabras, la clave es un identificador único, como una identificación.
Usted sabe, Vue y reaccionar han implementado un conjunto de DOM virtuales , por lo que podemos 不直接操作DOM元素, que 只操作数据puede重新渲染页面
Y el principio detrás de esto es su eficiente algoritmo Diff.
- Comparación jerárquica : solo compare en el mismo nivel
- Mediante la comparación de valores clave : inserte una nueva clave en el mismo grupo (en el ciclo, intente agregar tanto como sea posible para
keyque el valor clave sea único) - Comparar por componente / etiqueta : luego reemplazar
2. El algoritmo diff del DOM virtual
Icono de representación de datos DOM virtual
3. Realización concreta
① Descomponer el árbol según la jerarquía
② Comparar según el valor clave
③ Comparar a través 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>