10.31内容整理和概述
今日内容概要
内容目录
- Vue项目目录介绍
- ES6的导入导出语法
- Vue2项目开发规范
- axios实现前后端交互
- Django处理跨域问题
- mixin混入
- 插件
- scoped属性
- 浏览器存储数据
- 战略补充
Vue项目目录介绍
myfirstvue（不一定）：项目名字
node_modules：存储当前项目依赖的模块的文件夹 # 可以删除，重装：npm install
public：
favicon.ico：网站小图标
index.html：单页面应用的主页面(spa)
src： # 主编辑文件
assets：存放静态资源的文件夹
logo.png：Vue的logo图片
components：存放小组件的文件夹
HelloWorld.vue：Vue默认带的一个hello world组件
router：路由相关文件夹
index.js：路由的配置文件
store：Vuex相关文件夹
index.js：Vuex的相关配置
views：存放页面组件文件夹
AboutView.vue：Vue默认带的关于组件
HomeView.vue：Vue默认带的主页组件
App.vue：根组件
main.js：项目启动入口
.gitignore：git的忽略文件
babel.config.js：babel的配置
jsconfig.json：js的配置文件
package.json：标注当前项目所有的依赖
package-lock.json：锁定文件，用于锁定所有模块版本
README.md：项目介绍
vue.config.js：vue项目的配置文件
ES6的导入导出语法
本质：将导出属性封装成一个对象给导入文件使用
特点：
1.导入前必须导出
默认导入导出：
步骤：
1.在需要导出的js文件中，使用export defalut导出 # 导出哪些属性，哪些属性才能被导入使用
例子：
export default {
name: '彭于晏', # js内的属性
printName () { # js内的属性
console.log(this.name)
}
}
2.在导入目标js文件中导入，并命名
例子：import lpz(自定义名字) from './lqz/utils'(导出文件路径)
3.通过导入的文件就可以使用它的属性
例子：lpz.printName()
命名导入导出：
步骤：
1.在需要导出的js文件中，使用export const 自定义名字 导出
例子：
export const name = '刘亦菲'
export const printName = () => {
console.log('星象衔新宠')
}
2.在导入目标js文件中导入，并用相同的名字接收
例子：import {name,printName} from './lqz/utils'
3.直接使用
例子：
console.log(name)
printName()
补充：导出路径为文件夹时，默认导出当前文件夹的index.js文件
Vue2项目开发规范
Vue2项目规范：
1.以后的项目都是单页面组件
2.组件都是xx.vue，包含三部分：
1.<template></template>：编写html内容
2.<script></script>：编写js内容
3.<style></style>：编写css样式
3.项目入口：main.js
4.main.js执行流程： # 其他页面组件类同
1.把App.vue根组件导入
2.调用方法将App.vue组件中得数据和模板，插入到index.html中id为app的div中 # 方法：new Vue({render: h => h(App)}).$mount('#app')
3.编写js就在根组件导出的export default {}
4.编写html在根组件的<template>中
5.编写css在根组件的<style>中
axios实现前后端交互
axios安装：
代码：npm install axios --S
补充：
1.--S：将axios版本信息保存在配置项中
2.在axios后加上@版本号可以规定安装的axios版本，不写默认最新版本 # 例子：npm install axios@1.0.1 --S
axios使用步骤：
1.在组件中导入：import axios from 'axios'
2.在需要的位置发送请求链接后端接收数据，并编写逻辑
例子：
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.在settings.py中的INSTALLED_APPS注册新的app：'corsheaders'
3.在settings.py中的MIDDLEWARE注册新的中间件：'corsheaders.middleware.CorsMiddleware'
4.在settings.py中添加新的配置
配置代码：
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',
)
mixin混入
功能：把多个组件共用的配置提取成一个混入对象，供全局和局部使用，降低代码冗余
mixin混入使用步骤：
1.创建mixin文件夹和新的index.js
2.定义一个有名导出，将重复代码放入
3.局部导入：
1.导入mixin的导出 # 例子：import {hunhe} from "@/mixin";
2.增加mixins属性接收，数据类型为数组 # 例子：mixins:[hunhe,]
4.全局导入：
1.在main.js导入mixin的导出 # 例子：import {hunhe} from "@/mixin";
2.调用全局混入方法：Vue.mixin(hunhe)
5.如果组件自定义了和混入相同的配置，优先使用自定义配置
插件
插件功能：用于增强Vue
自己理解：插件内的东西，全局适用
案例：elementUI，vuex等
步骤：
1.创建plugins文件夹和新的index.js
2.在index.js中创立一个ES6的导出，创建install方法
3.在install方法编写方法逻辑
4.在main.js中导入插件
5.调用Vue.use(插件名)，自动触发插件的install方法
插件实现： # 老刘提供
1.全局共享属性：类比python，在类上放了一个属性，所有对象都能取到
例子： Vue.prototype.$name = 'lqz'
2.全局混入： # 另一种全局混入方式
例子：Vue.mixin(hunhe) # 将该方法放到install里
3.定义全局组件：
例子：elementUI
4.定义自定义指令：
例子： # 指令为V-fbind
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
插件案例：
# 插件代码
import Vue from "vue";
export default {
install(miVue) {
Vue.prototype.$name = 'lqz'
}
}
# mian.js配置代码
import plugins from '@/plugins'
Vue.use(plugin)
补充：
1.插件的install方法的参数是一个vue对象，可以替代导入的vue
原代码：Vue.prototype.$name = 'lqz'
新代码：miVue.prototype.$name = 'lqz' # 照上面的插件案例
2.插件支持传多个参数：
例子：
install(miVue,a,b,c) {...}
Vue.use(plugin,aa,bb,cc)
scoped属性
scoped属性：属于<style>的属性
scoped属性功能：令当前css样式只对当前组件有效，能解决组件污染问题
浏览器存储数据
浏览器存储数据方式：
1.localStorage：
功能：永久存储
应用举例：不登录加购物车
操作：
1.存储数据：localStorage.setItem(key,value) # 例子：localStorage.setItem('userinfo', JSON.stringify(person))
2.获取数据：localStorage.getItem(key) # 例子：let userinfo = localStorage.getItem('userinfo')
3.移除数据：localStorage.removeItem(key) # 例子：localStorage.removeItem('userinfo')
2.sessionStorage：
功能：临时存储，关闭页面数据消失
操作：
1.存储数据：sessionStorage.setItem(key,value) # 例子：sessionStorage.setItem('userinfo', JSON.stringify(person))
2.获取数据：sessionStorage.getItem(key) # 例子：let userinfo = sessionStorage.getItem('userinfo')
3.移除数据：sessionStorage.removeItem(key) # 例子：sessionStorage.removeItem('userinfo')
3.cookie：
功能：定时存储
操作：
1.存储数据：cookies.set(key,value,time) # 例子：cookies.set('name','lqz','7d')
2.获取数据：cookies.get(key) # 例子：console.log(cookies.get('name'))
3.移除数据：cookies.remove(key) # 例子：cookies.remove('name')
战略补充
js的序列化和反序列化：
序列化：JSON.stringify(数据)
反序列化：JSON.parse(数据)
浙公网安备 33010602011771号