Vue生命期钩子，Vue组件，Vue-Cli创建项目
| 钩子函数 | 描述 |
| beforeCreate | 创建Vue示例之前调用 |
| created | 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount | 渲染DOM之前调用 |
| mounted | 渲染DOM之后调用 |
| beforeUpdate | 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated | 重新渲染完成之后调用 |
| beforeDestroy | 销毁之前调用 |
| destroyed | 销毁之后调用 |
后端
from flask import Flask, make_response
?
app = Flask(__name__)
?
?
@app.route('/')
def index():
res = make_response('hello world')
# 运行所有域向我发请求(解决跨域问题)
res.headers['Access-Control-Allow-Origin']='*'
return res
?
?
if __name__ == '__main__':
app.run()
前后端交互之fetch
Title
?
?
?
-
![]()
{{film.name}}
?
?
?
计算属性
计算属性的特点：只要返回的结果没有发生变化，那么计算属性就只会被执行一次
?
计算属性的应用场景：由于计算属性会将返回的结果缓存起来，所以如果返回的数据不经常发生变化
那么使用计算属性的性能就会比使用函数的性能高
重写过滤案例
Title
?
?
?
- {{data}}
?
?
?
虚拟dom优化问题
1 v-for循环的时候，经常看到有个自定义属性 key
?
2 key是一个唯一值，为了虚拟dom替换的时候，效率高
组件化开发介绍
Vue的两大核心：1.数据驱动界面改变，2.组件化
什么是组件？什么是组件化?
在前端开发中组件就是把一个很大的界面拆分为多个小的界面，每一个小的界面就是一个组件
将大界面拆分成小界面就是组件化
?
组件化的好处：
可以简化Vue实例的代码
可以提高复用性
-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
-组件把js，css，html放到一起，有逻辑，有样式，有html
Vue中如何创建组件？
创建组件构造器
注册已经创建好的组件
使用注册好的组件
全局组件：整个项目中都能使用的组件
局部组件：只能再局部使用
注册全局组件
Title
?
?
注册局部组件
?
Title
?
组件间通信
1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听
父传子
在子组件上新增属性在子组件中：定义，myname要跟新增的属性名一致 props:['myname'] 在子组件中就可以使用myname变量了，从父组件传入的 注意加不加:的区别
Title
?
?
?
?
通过事件实现子传父
Title
?
?
?
通过ref实现父子通信
Title
?
通过事件总线实现组件通信
Title
?
?
动态组件
Title
?
?
?
?
?
?
Vue-cli创建项目
1 安装node环境：最新是14
- 跟python比较
- node python
- npm pip3
- 安装cnpm，淘宝做的npm，以后使用npm的地方，都是用cnpm
2 安装cli脚手架
-cnpm install -g @vue/cli
3 创建项目
vue create my-project # 命令行
# OR
vue ui #图形化界面
目录介绍
├─ node_moduls:项目依赖，当前项目的所有第三方包，（上传项目的时候不需要用：把项目给别人，这个文件夹删掉）
npm install 就会又把依赖重新装上
pi3 install -r request.txt
├─ public文件夹:(你不用动)
├─ favicon.ico 网站图标
└─ index.html 项目入口页面，单页面开发（整个vue项目就这一个页面，一般不会动它）
├─ src文件夹：代码文件夹（经常动，书写你的所有代码）
├─ assets文件夹 ：存储项目中自己的一些静态资源，图片，js，css
├─ components文件夹：存储项目中的自定义组件（组件，小组件，公共组件）
├─ router文件夹：存储VueRouter路由相关文件（装了Router才有，否则没有，页面跳转）
├─ store文件夹：存储Vuex相关文件（vuex才有的，状态管理器）
├─ views文件夹：存储项目中的自定义组件（大组件，页面级组件，路由级别组件）
├─ App.vue：根组件
└─ main.js：整个项目的入口js
├─ .gitignore # git的忽略文件，讲到git才知道
├─ babel.config.js # 不用动
├─ package.json #依赖的模块
├─ package-lock.json #依赖的模块
└─ README.md # 介绍
项目组件介绍（重点）
每一个组件都有三部分
# html内容写在这
// template 用于编写当前组件的结构代码的
?
?
?
# js内容
// script 用于编写当前组件的业务代码的
?
# style的内容
// style 用于编写当前组件额样式代码的
把vue项目编译成纯html，css，js
webpack:模块化 打包：npm run build 在项目路径下有个dist文件夹：html，css，js