昨日回顾
# 1 计算属性
-属性放在data配置项中,方法放在methods中
-computed:{
方法名(){}
}
-把它当属性用，缓存：只有当该计算属性使用的变量发生变化时，它才重新运算
# 2 重写过滤案例
- 通过计算属性，重写过滤案例
-newDataList做成计算属性，v-for直接循环它
-newDataList使用的变量只要发生变化，它就会重新运算，使用了mytext，只要input输入内容，它就会重新运算，不需要加事件了
# 3 监听属性
- data中定义的属性，可以使用watch绑定一个方法，以后只要这个属性发生变化，就会触发方法的执行
- watch:{
page(){
}
}
# 4 组件：有自己的html，css，js，以后相用，直接注册使用即可
-全局，局部
-var child={template:``,data(){return {}},methods:{}}
-组件中注册：components:{child}
# 5 组件间通信-组件间数据，方法都是隔离的
-父传子：自定义属性
'lqz'>
-在子组件中：props:['myname']
-子传父：自定义事件
-子组件中某种情况下把子组件的数据传给父组件
'handleClick'>
-点击事件函数内部：this.$emit('自定义事件名字',name)
-ref属性：
-放在普通标签上： this.$refs.标签上的名字 原生dom对象
-放在组件上：this.$refs.组件上的名字 组件对象 它有变量，方法
# 6 动态组件
-不确定显示的组件是什么，动态变化的
is='变量'>
-
-默认插槽
-具名插槽：挖多个坑，给每个坑命个名
"b">
"b">
# 8 vue-cli
-对比djagno，创建djagno项目需要怎么做？
-装python解释器，安装模块django，django-admin创建项目
-nodejs，安装模块vue-cli
-npm install @vue/cli -g
-vue 可执行文件
-vue create项目名
-bable
-vuex
-vue-router
-编辑器选择
-jetbrains公司：Pycharm，goland，phpstorm，IDEA，webstorm
-pycharm+vue插件 开发前端
-vscode：微软出的，轻量级，免费
-eclipse my eclipse
-谷歌买了jetbrains授权， AndroidStadio
-sublime Text
-vim+插件
-vue项目运行的两种方式
-命令行中执行：npm run serve
-pycharm的绿色箭头运行
# 9 学过的配置项
- el(template)
- data ：组建中 方法
- methods
- 8个生命周期钩子
- components
- watch
- computed
今日内容
0 vue-cli创建项目
node.js环境
# 前端做成项目----》使用工具（vue-cli），创建出vue项目，单页面应用(spa)，组件化开发， 把 xx.vue，ts，saas，less-----》编译---》在浏览器中执行
# vue-cli创建项目开发，在项目中开发，最后上线，一定要编译--->纯粹的html，js，css
# 浏览器只能识别 js html css
# vue-cli 工具，使用nodejs写的，要运行，需要node环境
# 下载node解释器
-一路下一步
-环境变量：可执行文件路径 就在环境变量
-两个可执行文件：
-node： python
-npm： pip
# nodejs 怎么来的
-js只能运行在浏览器中，因为浏览器中有它的解释器环境
-基于谷歌浏览器的v8引擎，使它可以运行在操作系统之上 网络包，文件，数据库。。。 用c写的
-js语法 完成后端的编写，全栈
-号称性能高，大量使用协程
# 文件防篡改校验
-把文件生成md5值
-以后被下载下来，再生成md5值肯定是一样，如果不一样说明被篡改了，不能用了
-1 百度网盘
-秒传
-传到服务器上---》生成md5---》存着
-本地生成md5---》发送到服务端---》一查----》有---》不传了
- 屏蔽
-2 王小云 破解md5
# 解释型语言和编译型语言
-js，node，php，python 解释型语言 运行解释器之上 pyinstaller
-c，go，c++ 编译型语言 直接把源代码编译成不同平台的可执行文件
-cpython解释器用c写的----》编译成不同平台的可执行文件---》在不同平台双击运行即可
-win
-mac
-linux
-java：一处编码处处运行
-java 虚拟机 ---》虚拟机跨平台
-java字节码文件运行在虚拟机之上
-java写了代码----》编译成字节（区别与可执行文件 jar，war，.class）
创建vue-cli项目
# 创建vue项目使用什么？
-2.x 使用vue-cli ：https://cli.vuejs.org/zh/
-3.x 使用vue-cli
-vite只能创建vue3 效率非常高
# 按装vue-cli
npm 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项目
# 使用vue-cli创建项目(找个目录)
vue create myfirstvue # 速度很慢，等，可以ctrl+c停止 执行npm cache clean --force
# 很慢的原因
-从github拉一个空项目
-按照该项目所有的依赖，npm装
# 按下图操作
vue ui # 使用图形化界面创建项目 ，自己点击即可
1 vue项目目录介绍
myfirstvue # 项目名字
node_modules # 文件夹，内部有很多当前项目依赖的模块，可以删除，npm install
public # 文件夹
-favicon.ico # 网站小图标
-index.html # spa：单页面应用
src # 以后咱们写代码，都在这下面
-assets # 静态资源，js，css，图片 类似于static文件夹
logo.png # 静态资源的图片
-components # 组件：小组件，用在别的大(页面组件)组件中
-HelloWorld.vue # 默认了一个hello world组件
-router # 装了vue-router自动生成的，如果不装就没有
index.js # vue-router的配置
-store # 装了vuex自动生成的，如果不装就没有
index.js # vuex的配置
-views # 放了一堆组件，页面组件
AboutView.vue # 关于 页面组件
HomeView.vue # 主页 页面组件
-App.vue # 根组件
-main.js # 整个项目启动入口
.gitignore # git的忽略文件 不用动
babel.config.js # babel的配置 不用动
jsconfig.json # 配置文件 不用动
package.json # 重要：类似于python项目的requirements.txt 当前项目所有依赖
package-lock.json # 锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本
README.md # 读我，项目的介绍
vue.config.js # vue项目的配置文件
node_modules
# node_modules是个文件夹，内部有很多当前项目依赖的模块（第三方模块）
# 没有node_modules项目不能运行
# 发送给别人的时候需要删除【上传git要忽略掉】，删除了使用cnpm install可以重新安装回来
比如创建python项目时，如果勾选了虚拟环境，会创建一个venv文件夹：
这个venv文件夹，放置了一个python解释器的环境，如果你再下了第三方依赖，是安装在这个venv文件夹下的python环境的。好处是，每一个项目都不会互相影响。相当于每一个python项目都有一个自己的解释器。
而这个node_modules也是类似的效果，存放了很多项目的第三方依赖模块。node_modules是可以删除的（这个文件比较大），如果你要提交到仓库、发送给别人，需要把它删除掉。但是你把node_modules删除掉了，项目就无法启动了（缺乏第三方依赖）。但是可以使用npm install命令，该命令会根据package.json文件给你重新装上这些依赖。
补充：webpack是代码编译的工具 ---> 编译成只有html、js、css
index.html
public # 文件夹
-favicon.ico # 网站小图标
-index.html # spa：单页面应用
-assets # 静态资源，js，css，图片 类似于static文件夹
现在我们写的项目只有一个index.html页面。
首页页面组件、登录页面组件、注册页面组件。
查看index.html内容：
所有组件都在这个div内部切换，也就实现首页、登录页面、注册页面切换。这个div很重要，不要在这个标签内写东西。
通过<%= BASE_URL %>可以找到在public文件夹下的小图标。
网站名字是在package.json里面定义的：
noscript：
如果你的网站禁用了js：
就会显示上面的提示语句：
app.vue
# app.vue是根组件
根组件的内容会直接替换到index.html页面下的这个div内。
package.json
# package.json当前项目的依赖项
如果删除，npm install就不知道装什么了。
package-lock.json
package.json写了一些项目依赖的版本。
这些依赖的版本添加了上箭头^，这表示安装时会装3版本里最新的3.6.2。但是总是安装最新的版本，可能会出现版本不兼容问题。
lock文件可以对版本进行锁定：
以后安装就按照这个锁定版本进行安装，而不是按照package.json文件安装，这样不会出现问题。所以我们也不要动这个lock文件。
总结：以后经常用的就两个views (写页面)，components（写组件）。
2 es6的导入导出语法
# node.js中如果要导入，必须先导出
-默认导出
-命名导出
# python创建包，只需要在其他py文件中导入
# 默认导出写法
# 语法
-导出语法
export default 一般是个对象
-导入语法
import 别名 from '路径'
以后 别名 就是 导出的对象
# 示例
1.在js文件中定义变量，函数，最后使用export defalut导出
export default {
name: '彭于晏',
printName () {
console.log(this.name)
}
}
2 在想使用的js中，导入
import 随便起 from './lqz/utils'
# 命名导出和导入
-导出语法 可以导出多个
export const name = '刘亦菲'
export const printName = () => {
console.log('星象衔新宠')
}
-导入语法
import {printName} from './lqz/utils'
# 在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它
-对比python中得__init__.py
main.js文件介绍
# 找到index.html 中的id为app的div，以后都在App.vue中写
new Vue({
render: h => h(App)
}).$mount('#app')
main.js是项目的入口，程序运行的时候是从这里开始执行的：
解释main.js的代码含义：
Vue提供了一些开发过程中的提示，通过如上配置项可以选择是否需要开启这些提示。
这里等同于el:'#app'，但这是如何做到的呢？
$mount这里就是去public/index.html挂载了那个id='app'的div。
注意public、index这两个名字必须是固定的。
render后面对应的是一个箭头函数，传入了一个h，返回一个h(app)。
而这个app是导入进来的：
也就是导入了App.vue下的内容：
导入这个app之后，用h(app)执行了一下，进行了挂载。
本质是在App.vue中写的代码，会原封不动的插入到index.html内的div：
前期准备
在src中新建一个文件夹，并创建一个utils.js文件：
在utils.js内写代码：
我们想在main.js中引入utils.js文件，并使用其中的变量和函数，那么应该怎么做？
需要先在util.js导出，别的文件才能导入，这一点和python不一样：
默认导出
默认导出用的最多，只能导出一次。
这相当于导出了一个对象。（还可以使用es6的语法将其简写）
只有在export default导出的，在别的文件才能导入。
使用默认导出，没有给导出的对象取一个名字。
关于默认导出，我们可以这样导入：
main.js导入了之后这个xxx，xxx就是之前导出的对象：
尽量使用包名作为导入对象的名字：
执行项目：
f没有导出所以会报错。
默认导出的其他写法：
这里的this指代当前对象，this.name='彭于晏'。
命名导出
使用命名导出，name相当于一个变量：
在main.js导入：
使用命名导出时，导入的时候可以导入多个名字。
注意：同一个需要导出的文件中，默认导出和命名导出不能混用。
index文件的特殊含义
将我们需要导入的包中的文件改名为index.js：
这样导入的时候就可以直接导包了（如果包下文件名不是index不能这样做）：
这个index.js就类似于python中的__init__。(导包的时候会自动执行__init__文件)
3 vue项目开发规范
# 以后写的组件，都是单页面组件 也就是xx.vue文件
# 以后写一个组件就是一个xx.vue xx.vue --分为-> 页面组件和小组件
# 以后一个组件就是一个xx.vue文件，xx.vue文件内部都有三部分
- # html内容写在里面
-并且必须套在一个div标签里
- # 写js内容
- # 写css样式
# main.js 是整个项目的入口
1 把App.vue根组件导入了
2 使用new Vue({render: h => h(App)}).$mount('#app') 把App.vue组件中得数据和模板，插入到了index.html的id为app的div中了
3 以后，只要在每个组件的export default {} 写之前学过的所有js的东西
4 以后，只要在每个组件的template，写模板，插值语法，指令...
5 以后，只要在每个组件的style，写样式...
Vue项目编写步骤
# 1 以后只需要写xx.vue
-页面组件
-小组件 给页面组件用的
# 2 组件中导出
export default {
name: 'HelloWorld',
data() {
return {
xx: '彭于晏'
}
},
}
# 3 在别的组件中要用，导入，注册
# 导入
import HelloWorld from '../components/HelloWorld.vue'
# 注册
export default {
components: {
HelloWorld
}
}
# 4 注册以后，在这个组件中就可以使用导入的组件 ，写在
# 自定义属性
"传进来的p"/>
查看HomeView.vue（页面组件）：
查看HelloWorld.vue（小组件）：
注意这里导出都需要使用默认导出，导出一个对象，在其他页面直接使用这个对象进行注册。
正常情况下，想要使用局部组件，需要在配置项components写组件相关信息：
但是，我们可以通过导入的方式，把HelloWorld（子）中的组件到HomeView（父）中注册：
组件注册成功之后，就可以在HomeView使用了：
子组件的msg属性，是通过父组件标签里写的自定义属性传过来的：
main.js导入根组件
main.js导入了App.vue根组件：
根组件中也需要有template、script、style三种标签。如果根组件中没有script标签，会导致挂载时没有数据，只有一个template配置项。
在根组件script标签内写导出的内容：
不用给导出的对象写template属性，这里会自动将上面template标签的内容挂载到这个对象上。
根组件的内容会通过new Vue({render: h => h(App)}).$mount('#app')这行代码，最终挂载到index.html的div标签内。
以后开发组件，只需要在template标签内写就可以了：
跟之前的写法一样，只是换了写代码的位置。
4 vue项目集成axios、vue项目前后端打通
# 安装axios
-npm install axios -S
# 导入使用
# 发送请求，获取数据
axios.get('http://127.0.0.1:8000/books/').then(res => {
console.log(res.data)
this.bookList=res.data
})
# 先用这种方式解决跨域（django 项目）
1 pip3 install django-cors-headers
2 app中注册：
INSTALLED_APPS = (
...
'corsheaders',
...
)
3 中间件注册
MIDDLEWARE = [
...
'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',
)
在App.vue根组件写代码：
# 安装axios
-npm install axios -S
-npm install -S axios
-npm install -S axios@1.0.1 # 安装老版本
'''-S 表示将axios模块保存到package.json中'''
# 导入使用
import axios from 'axios'
在App.vue的script标签内导入axios：
通过axios发送请求：
处理跨域问题，参照上面的配置即可。
在template标签内使用插值语法，显示后端的数据：
前后端交互流程分析：
4.1 前后端交互版登录功能
登录功能：
写事件函数，通过axios发送post请求：
后端写登录接口：
前端发送的post请求里面携带的是json字符串，所以使用原生django应该在request.body里面接受。
5 props配置项
# props配置项: 在里面写接受父传子自定义的属性
# props配置项有三种写法:
-1 数组写法
-2 对象对象写法
-3 对象套对象写法
# 写法总结
# 方式一：使用数组
props: ['msg'],
# 方式二：使用对象
props: {msg: String}, // 属性验证
# 方式三：使用对象，指定类型、默认值和必填
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
}
新建组件child.vue:
在根组件引入组件：
在根组件中注册：
在根组件中使用：
根组件通过自定义属性进行父传子（可以写多个自定义属性）：
子组件通过props配置项接受数据（数组写法）：
子组件通过props配置项接受数据（对象写法）：
可以进行属性的验证，虽然报错，但前端还是显示。
子组件通过props配置项接受数据（对象套对象写法）：
这里设置了，如果自定义属性没填写数值，那么默认值是老王，且控制台不会报错：
如果设置了required:true，自定义属性不填，控制台会报错，但是前端还是会渲染默认值老王。
6 混入
# mixin(混入) 可以把多个组件共用的配置提取成一个混入对象
-把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用
# 使用步骤
-1 定义混入对象，新建mixin包，下新建index.js
-2 在 index.js中写代码（组件中会用到的，比如data，methods、配置项）
export const hunhe = {
data() {
return {
name: '彭于晏'
}
},
methods: {
handlePrintName() {
alert(this.name)
}
},
}
-3 局部导入：在组件中
import {hunhe} from "@/mixin";
# 配置项：
mixins:[hunhe,]
-4 全局使用，在main.js 中 以后所有组件都可以用
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)
// Vue.mixin(lqz2) 多个混入需要注册多次
// Vue.mixin(lqz3)
-5 在组件中，直接使用即可
局部使用mixins
新建一个组件，并将其导入到根组件：
写根组件代码：
写child组件代码：
可见根组件和子组件有同样的函数handlePrintName。
在src新建mixin文件夹，在此文件夹下新建index.js文件，写如下代码：
这里的函数，直接将组件中的函数部分复制过来。
在根组件中导入混入对象，开始使用：
再写一个mixins配置项：
如果一个组件的配置项里既有mixins，又有methods，这两个可以一起用吗？
注意：如上示例中，混入导入的和methods中的函数都是同一个名字。
直接说结论：先使用methods中的函数，如果在methods中找不到，再用mixins的。
扩展：
混入不仅仅可以抽取methods中的函数，还可以抽取data()数据。
查找顺序和之前的一样，先使用组件自己的数据，如果没有数据，再去mixins中找数据。
create()这种生命周期钩子函数也可以抽取到mixins。
全局引入mixins
需要在main.js中导入mixin包：
全局引入之后，相当于在所有组件中都加入了mixins配置项，所有组件就都可以使用混入的函数和数据了。
mixins具体使用情景:
比如有一个记录用户浏览记录的功能，通过引入mxins，可以实现在每个组件都可以使用这个功能。
7 插件
# 功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
- elementui相当于是Vue的插件
# 使用步骤
-新建包plugins，新建index.js
import Vue from "vue";
import axios from "axios";
import {hunhe} from '@/mixin'
export default {
install(miVue) {
// console.log(miVue)
// 1 vue 实例上放个变量
// Vue.prototype.$name = 'lqz' // 类比python，在类上放了一个属性，所有对象都能取到
// Vue.prototype.$ajax = axios
// 2 使用插件，加入混入
// 全局使用混入
// Vue.mixin(hunhe)
// 3 定义全局组件
// 4 定义自定义指令 v-lqz
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
}
}
2 在main.js 中使用插件
import plugins from '@/plugins'
Vue.use(plugins) // 本子，使用use，会自动触发插件对象中得install
3 以后再组件中可以直接用插件中写的东西
# 插件可以做的事：
1 了解，自定义指令(不了解没关系)
2 定义全局变量，以后在任何组件中都可以使用到,借助于Vue.prototype往里放 ,以后所有组件只要this.$ajax 就是axios对象
3 使用全局混入
4 自定义全局组件
使用插件给Vue对象添加属性
在src中新建一个plugins文件夹，再新建一个Index.js，:
在Index.js文件写代码：
插件是包含install方法的一个对象。如上图我们在index.js导出这个对象。install方法的第一个参数是Vue实例，第二个以后的参数是插件使用者传递的数据
需求：在Vue实例上存放一个变量，在任意位置通过this.变量名就可以获取到这个变量的数据。（本质上增强了Vue的功能）
导入Vue，这里的Vue是源码中的Vue构造函数（把他当作python中的类）：
在Vue类上存放了一个属性$name，以后Vue类产生的对象，都可以拿到这个属性。
使用插件，在main.js中导入插件：
并且使用对插件使用Vue.use()，相当于自动触发插件对象中的install方法。Vue.use()会给自动插件的第一个参数传入Vue构造方法（相当于python中的类）。
还可以给插件传更多的参数如：Vue.use(plugins, 1, '你好')
在插件中接受;
在根组件里打印this：
这个this是当前的组件对象。查看控制台，发现并没有我们添加的$name属性。
那到底如何使用插件，给Vue对象添加属性呢？使用原型prototype。
修改插件代码：
这样在根组件就可以找到$name属性：
这里有个类似python中属性查找属性的问题。我们使用Vue.prototype.$name='lqz'将属性放入prototype。Vue对象查找属性时，会先在自己身上找，如果找不到，就会去prototype找$name属性。prototype类比python中的类。
使用插件引入axios：
这样写，在任意页面都可以通过this.$ajax直接使用axios，不用每次使用都导入了。
为什么属性的名字前，都需要加一个$?
防止和组件内部的属性名冲突。
插件配合混入
之前我们是在main.js使用Vue.mixin()实现全局混入。
通过插件实现全局混入：
也相当于所有组件都添加了mixin配置项。
在插件定义全局组件
elementui:
elementui插件定义很多全局组件，我们可以直接使用：
使用插件定义自定义指令
# v-model v-bind v-for v-if 都是Vue提供的指令
我们可以通过插件，自定义指令
如上的v-fbind指令可以在input输入框上使用：
第三方插件可能也会对指令进行扩充。
8 scoped样式
# 父组件写了style，子组件都会使用父组件的style
如果在根组件中写了样式，会在所有页面组件都生效，这样不太好，所有需要使用scoped。
# 父组件的样式，在子组件中会生效，在style上写 让该样式只在当前组件中生效
# 示例
我们在根组件app.vue写样式：
这个样式会污染到所有的子组件，比如我们导入一个child组件，这个组件是没有样式的：
查看浏览器可以发现两个组件都有样式：
这时候就需要给根组件添加scoped属性，这表示该样式只针对当前组件有效：
如何写一个样式，令所有组件都生效：使用全局样式，在assets下创建css文件夹。
在main.js引入css文件即可实现样式全局生效：
9 localStorage和sessionStorage
# 是window浏览器对象(BOM)有的东西
localStorage和sessionStorage和Vue没有必然联系。
# 如果想在浏览器中存储数据：
有三个地方：
1.永久存储：localStorage 不登录加购物车，没登录 搜索过的商品
2.临时存储：sessionStorage 关闭页面数据就没了
3.设定一个时间，到时候就过期：cookie
# 补充：序列化和反序列化
// 对象转json字符串
// JSON.stringify(person)
// json字符串转对象
// JSON.parse()
# 都是在浏览器存储数据的--》存数据有什么用？
-登录成功 token存在本地
-不登录加入购物车功能，迪卡侬存在了localStorage中
-组件间通信----》 跨组件
# localStorage
-永久存储，除非清空缓存，手动删除，代码删除
-localStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-localStorage.getItem('userinfo')
-localStorage.clear() // 清空全部
-localStorage.removeItem('userinfo')
# sessionStorage
-关闭浏览器，自动清理
-sessionStorage.setItem('userinfo', JSON.stringify(this.userInfo))
-sessionStorage.getItem('userinfo')
-sessionStorage.clear() // 清空全部
-sessionStorage.removeItem('userinfo')
# cookie
-有过期时间，到过期时间自动清理
-借助于第三方 vue-cookies
-cookies.set('userinfo', JSON.stringify(this.userInfo))
-cookies.get('userinfo')
-cookies.delete('userinfo')
查看浏览器中存储的数据：
cookies:
Session Storage \ local storage::
如何往这三个地方放数据？
localStorage操作
前期准备：
写事件函数，往localStorage中放数据：
查看浏览器：
写事件函数，从localStorage中取数据：
获取到的数据是字符串类型：
写事件函数，删除/清空localStorage中的数据:
注意：clear()会清空所有本地存储，不建议使用。
localStorage的用处：
- 保存登录信息（token保存在cookies中更好，因为可以设置过期时间）。
- 记录历史搜索。（没登录）
- 组件间通信
迪卡侬案例：
用户没有登录，还是能添加购物车。迪卡侬官网将购物车数据存放在浏览器的localStorage：
sessionStorage操作
使用方法和localStorage很相似，不再赘述。
关闭标签页，会导致sessionStorage里存储的数据被删除。
切换网址，只要不关闭标签页，不会导致sessionStorage被删除：
cookies操作
# 安装Vue cookies第三方插件：
cnpm install vue-cookies -S
# 导入：
import cookies from 'vue-cookies'
存储cookies:
还可以给set方法多传几个参数，定义cookies的过期时间：
7d表示七天。
获取cookies:
删除cookies：
还有一个vue-cookie组件，可以实现相同的功能;
代码：
localStorage操作
sessionStorage操作
cookie操作
10 集成elementui
# 在vue上，css样式，用的最多的是elementui，但是还有其他的
-elementui 做网页端 样式用的多 vue2的 饿了吗团队开发的
-elementui-plus 第三方团队继续基于vue3写的
-vant 做app的样式 基于Vue3
-iview pc端用www.iviewui.com 基于Vue3
vant3:
iview:
elementui使用
# 使用步骤
1 安装
cnpm i element-ui -S
2- 在main.js中引入插件
- 完整引入 （导致项目过大）
- 按需引入 （专业前端）
2.1 配置完整引入 在 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI) // 以后在咱们组件中直接使用elementui提供的全局组件即可
3 在组件中使用
-去官网看到好的，复制贴到你的项目中
导入elementui：
执行插件：
使用elementui的样式和组件：
栅格系统：
自定义样式：
效果：
练习
需求：
1 创建出vue项目 ok
2 使用导入导出语法，把 登录功能的发送请求，抽取到一个包中。 ok
3 把登录功能写完 ok
-导入导出
-默认导出
-命名导出
4 创建一个组件，显示一张图片，图片地址通过父组件传入
在HomeView中使用这个组件 ok
5 在图片页组件，加一个button，点击把图片地址显示在父组件中 （子传父） ok
6 使用插槽，随便定制一个图片样子 ok
----------
7 使用vue项目把查询所有汽车 v-for循环显示出来
登录功能
前期准备：
路由：
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
component: () => import('@/views/loginView') // 导入login视图
},
loginView.vue:
我是登录页面
请输入名字：
请输入密码：
test_import\index.js:
import axios from "axios"; // 这里必须导入axios,因为别的包会直接调用下面的函数，而下面的函数需要使用这个axios
// 默认导出
export default {
handleSend() {
axios.post('http://127.0.0.1:8000/api/v1/login/', {
username: this.username,
password: this.password
}).then(res => {
this.data = res.data
if (res.data.code === 1000) {
alert(res.data.msg)
window.location.href = 'http://localhost:8080/'
} else {
alert(res.data.msg)
}
})
}
}
// 有名导出
export const handleSend2 = function handleSend2() { // 这里如果使用匿名函数,由于匿名函数没有this,在别的组件中使用会导致获取不了数据。
axios.post('http://127.0.0.1:8000/api/v1/login/', {username: this.username, password: this.password}).then(res => {
this.data = res.data
if (res.data.code === 1000) {
alert(res.data.msg)
window.location.href = 'http://localhost:8080/'
} else {
alert(res.data.msg)
}
})
}
父子通信展示图片
前期准备：
imgFather.vue:
{{ text }}
imgShow.vue:
![]()
使用插槽展示图片
前期准备：
为页面组件注册路由：
{
path: '/testSlot',
name: 'testSlot',
component: () => import('@/views/testSlot') // 导入testSlot视图
},
imgSlot.vue:
testSlot.vue:
这是一张小姐姐图片：
__EOF__
