目录
回顾
1. 组件使用
局部
全局
2.组件间通信
一旦组件话开发--->>> 组件间通信
父传子：自定义属性
子传父：自定义事件
ref属性：
普通标签 this.$resfs.名字 dom对象，进行dom操作
组件上：this.$refs.名字 组件对象，使用组件数据，调用函数
3.计算属性
1.使用函数，页面刷新，函数会重新运算
2.想把函数当属性用
computed:{
price(){
}
}
3.通过计算属性，重写过滤案例
newDataList做成计算属性，v-for直接循环它
newDataList使用的变量只要生变化，他就会重运算，使用了mytext,只要input输入内容，他就会重新运算，不需要加事件了
4.监听属性
1 data中定义的属性，可以使用watch绑定一个方法，以后只要这个属性发生变化，就会触发方法的执行
5.插槽
slot：匿名插槽、具名插槽
6.动态组件
component --->>> is='字符串'
7.keep-alive
做缓存，保证组件不被销毁
8.学过的配置项
el(temlate)
data:组建中、方法
methods
8个生命周期钩子
components
watch
computed
vue-cli创建项目
# 前端做成项目--->>> 使用工具(vue-cli)，创建出vue项目，单页面应用(spa)，组件话开发，那xx.vue, ts,sass,less --->>> 编译 --->>> 在浏览器中执行
# 浏览器执行识别 js html css
# vue-cli 工具，使用nodejs写的，要运行，需要node环境
# 下载node解释器
一步下一步
环境变量：可执行文件路径，就在环境变量
两个可执行文件：
node 相当于python
npm 相当于pip
# nodejs 怎么来的
js只能运行在浏览器中，因为浏览器中有它的解释器环境
基于谷歌浏览器的v8引擎，使它可以运行在操作系统之上 网络包，文件，数据库。。。 都是用C写的
js语法 完成后端的编写，全栈
号称性能高，大量使用协程
创建vue项目使用什么
2.x 使用vue-cli: https://cli.vuejs.org/zh/
3.x 使用vue-cli
vite只能创建vue3 效率非常高
# 安装vue-cli
nmp install -g @vue/cli # 非常的慢
# 使用cnpm替换npm cnpm淘宝出的工具，下载的时候，去淘宝镜像下载，速度快
# -g 表示装全局
#--registry=https://registry.npm.taobao.org 指定淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后使用cnpm 代替npm
cnpm install -g @vue/cli
如上完成后，在cmd控制台就可以输入vue命令(装了djagno可以使用Django-admin创建Django项目)
vue 创建项目
使用vue-cli创建项目(找个目录), vue create myfirstvue
速度很慢，等。可以ctrl+c停止 执行npm cache clean --force
很慢的原因：从GitHub拉一个空项目，按照项目所有的依赖，由npm装
按下图操作
1.找个目录
2.自定义选择
3.按空格选中
4.选择vue2
5.选择In package.json
6.再输入y同意，取名字保存就行了
再从路径位置用pycharm打开
7.运行项目的两种方式
-
在命令行中执行(注意路径)
npm run serve
-
使用pycharm，点击绿色箭头执行
vue项目目录介绍
# vue 项目目录介绍
myfirstvue # 项目名
node_modules # 非常多第三方模块，以后把项目复制给别人时【上传git要忽略掉】，这个文件夹删掉，很多小文件，项目的依赖，项目要运行，没有它不行 如果没有只需要进入到对应文件位置cmd执行 cnpm install，会根据package.json的依赖包，按装好依赖。node_modules 在pycharm上显不显示跟版本有关系，实际文件中是有node_modules文件但是不显示
public # 文件夹
-favicon.ico # 网站小图标
-index.html # spa 单页面应用，以后整个vue项目都是用这一个html，但你不用动他
src # 文件夹--以后咱们都动这里面的
-assets # 静态资源，以后前端用的图片，js，css。。都放在这里
logo.png # 图片
-components # 以后在这里放组件， xx.vue, 小组件
HelloWorld.vue # 提供的展示组件
-router # 安装了Router，就会有这个文件夹，下面有个index.js
index.js
-store # 安装了Vuex，就会有这个文件夹，下面有个index.js
-index.js
-views # 页面组件
-AboutView.vue
-HomeView.vue
-App.vue # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在App.vue
-main.js # 项目的启动入口
.gitignore # git的忽略文件，后面学了git就会了
babel.config.js # bable配置文件，不用动
jsconfig.json # 配置文件，不用动
package.json #不用动，安装了第三方模块，它自动增加
package-lock.json # 锁定文件，忽略掉
README.md # 用户手册
vue.config.js # vue的配置文件
es导入导出语法
App.vue main.js About.vue写了什么
看xx.vue组件学到的重点
以后开发vue项目，都按照这个模式来
1.新建xx.vue
2.在xx.vue中就三块内容
# 1.以后组件的html内容，都写在这里
<template></template>
# 2.以后该组件使用的样式，都写在这
<style></style>
# 3.以后js的东西，都写在这
<script></script>
mian.js学到的
找到index.html 中的id为app的div,以后都在App.vue中写
new Vue ({
render:h => h(App)
}).$mount('#app')
# 导入导出语法
导入导出语法
# python 创建包，在其他py文件中导入
# js 从es开始，也支持报的导入和导出
### 默认导出语法(用的最多)，只能导出一个，一般导出一个对象
导出语法
export default 一般是个对象
导入语法
import 别名 from '路径'
以后 别名 就是 导出的对象
### 命名导出导入
导出语法 可以导出多个
export const name = '彭于晏'
export const add = (a, b) => {
console.log(name)
return a + b
}
export const age = 19
导入语法
import {name, add} from './lqz/s1'
console.log(name)
console.log(add(33, 44))
### 导入的简写形式
包下的 index.js 导入的时候，不用写到index.js的路径 ---> 他等同于python的__init__.py
列如：
# 包是
wyf 包是wyf
index.js 包下的js文件index.js
导入的时候 导入的时候可以简写，因为index.js在js中有特殊含义，可以简写
import wyf from './lqz'
vue项目编写步骤
# 1 以后只需要写xx.vue
-页面组件
-小组件 给页面组件用的
# 2 组中导出
export default {
name:'HelloWord',
data(){
return {
xx：'彭于晏'
}
},
}
# 3 在别的组件中要用，导入，注册
# 导入
import HelloWorld from '../components/HelloWorld.vue'
# 注册
export default {
components: {
Helloworld
}
}
# 4 注册以后，在这个组件中就可以使用导入的组件，写在<template>
# 自定义属性
<HelloWorld msg='传进来的p'/>
@就是src的绝对路径
'@/components/HelloWorld.vue' 这是绝对导
'../components/HelloWorld.vue' // 相对导
小练习-登录功能
App.vue动了
<template>
<div id="app">
<router-view/>
</div>
</template>
main.js
// 没有动
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
访问根路径
# 访问根 显示 HomeView.vue 这个页面组件
-HomeView使用了Helloworld.vue
-自定义属性
# 访问 /about 会显示AboutView.vue页面组件
使用axios
1 安装
cnpm install axios -S # 带着-S会自动把当前依赖加入到package.json中
2 导入（按照的第三方模块，直接导入）
import axios from 'axios'
3 使用
handleClick() {
console.log(this.username, this.password)
axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(res => {
// console.log(res)
alert(res.data.msg)
})
}
解决跨域
1 装模块
pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/
2 注册app
'corsheaders'
3 中间件修改
'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'token'
)
补充
# 文件防篡改校验
把文件生成md5值
以后别下载下来，再生成md5值肯定是一样的，如果不一样说明被篡改了，不能用了
1.百度网盘
秒传
传到服务器上 ---> 生成md5 ---> 存着
本地生成md5 ---> 发送发到服务端 ---> 一查 ---> 有 ---> 不传了
# 解释型语言和编译型语言
-js，node，php，python 解释型语言 运行解释器之上 pyinstaller
-c，go，c++ 编译型语言 直接把源代码编译成不同平台的可执行文件
-cpython解释器用c写的----》编译成不同平台的可执行文件---》在不同平台双击运行即可
-win
-mac
-linux
-java：一处编码处处运行
-java 虚拟机 ---》虚拟机跨平台
-java字节码文件运行在虚拟机之上
-java写了代码----》编译成字节（区别与可执行文件 jar，war，.class）