一:Axios
1.简介
① Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
② axios官网:axios中文网|axios API 中文文档 | axios
2.实例
json文件:film.json(这里只是一部分,原代码太多了…)
https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying
后端:main.py
import json
from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/film')
def index():
print('请求来了')
with open('film.json', mode='rt', encoding='utf-8') as f:
dic = json.load(f)
res = jsonify(dic)
res.headers['Access-Control-Allow-Origin'] = '*'
return res
if __name__ == '__main__':
app.run()
前端:index.html
Vue与后端交互
加载的数据:
-
电影:{{item.name}}
导演:{{item.director}}
服务器托管网
let vm = new Vue({
el: '#box',
data: {
dataList: []
},
methods: {
handleClick() {
axios.get("http://127.0.0.1:5000/film/").then(res => {
console.log(res.data.data.films) // axios 自动包装data属性 res.data
this.dataList = res.data.data.films
}).catch(err => {
console.log(err);
})
}
}
})
三:计算属性
计算属性是基于它们的依赖进行缓存的
计算属性只有在它的相关依赖发生改变时才会重新求值
计算属性就像
Python
中的property
,可以把方法/函数
伪装成属性
1.通过计算属性实现名字首字母大写
首字母大写
模板插值:
{{myText.substring(0,1).toUpperCase()+myText.substring(1)}}
普通方法:{{getNameMethod()}}
计算属性:{{getName}}
var vm = new Vue({
el: '#box',
data: {
myText: 'darker',
},
computed: {
getName() { // 依赖的状态改变了,会重新计算
return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
}
},
methods: {
getNameMethod() {
return this.myText.substring(0, 1).toUpperCase() + this.myText.substring(1)
服务器托管网}
}
})
2.通过计算属性重写过滤案例
通过计算属性重写过滤案例
- {{data}}
var vm = new Vue({
el: '#box',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
computed: {
newList() {
return this.dataList.filter(item => {
return item.indexOf(this.myText) > -1 // 返回索引大于1的元素:>-1 就表示包含在其中
})
}
}
})
四:虚拟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值比较
③ 通过组件进行比较
111
222
111
222
3.我理解的图
二:生命周期
钩子函数 | 描述 |
---|---|
beforeCreate | 创建Vue实例之前调用 |
created | 创建Vue实例成功后调用(可以在此处发送异步请求后端数据) |
beforeMount | 渲染DOM之前调用 |
mounted | 渲染DOM之后调用 |
beforeUpdate | 重新渲染之前调用(数据更新等操作时,控制DOM重新渲染) |
updated | 重新渲染完成之后调用 |
beforeDestroy | 销毁之前调用 |
destroyed | 销毁之后调用 |
create
let vm = new Vue()
mount
挂载,把div挂载到组件中
update
let vm = new Vue({
el: '#box',
data: {
isShow: true // 修改这个内容
},
methods: {
handleClick() {
console.log('我是根组件')
}
}
})
1.bedoreCreate
2.created
3.beforeMount
4.mounted(用得最多)
这时候可以向后端发送数据了
5.beforeUpdate
6.updated
7.beforeDestroy
8.destroyed
组件销毁 – 给组件写一个定时器
setTimeout() // 延迟3s干什么事
setInterval() // 延迟3s干什么事
测试代码
生命周期
Vue.component('child', {
template: `
{{name}}
服务器托管,北京服务器托管,服务器租用,机房机柜带宽租用
![服务器托管](http://www.fwqtg.net/wei.jpg)
咨询:董先生
电话13051898268 QQ/微信93663045!
上一篇: 网络安全(黑客)技术——自学2024
下一篇: 【Java】多pdf文件合并为一个.docx文件