今日学习内容
一、vue项目目录介绍
myfirstvue 项目名字
-node_modules 文件夹，内部有很多当前依赖的模块，可以删除，但是想恢复就需要敲：npm install
-publice 文件夹
* favicon.icon
| 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 babel.config.js jsconfig.json |
-git的忽略文件 -babel的配置 |
|
| package.json | 重要：类似于python项目的requirements.txt 当前项目所有依赖 | |
| package-lock.json | #锁定文件：package.json中写了依赖的版本，这个文件锁定所有版本 | |
| README.md | # 读我，项目的介绍 | |
| vue.config.js | # vue项目的配置文件 | |
二、es6的导入导出语法
如果要导入，必须先导出
- 默认导出
- 命名导出
默认导出导入写法
-
写一个
js，在js中定义变量、函数，最后使用export defalut导出export default { name:"肖战", printName(){ console.log(this.name) } } -
在想使用的js中导入
import xxx from './xz/utils'
命名导出导入写法
-
写一个js，在js中定义变量、函数，最后使用
export导出export const name = '刘诗诗' export const printName = () =>{ console.log('妙蛙~~~~') } -
在想使用的js中导入
import {printName} from './xz/utils'
在包下可以建立一个名为index.js的文件，以后导入的时候，会默认找它。
对比python中得 __init__.py
三、vue项目开发规范
以后写的组件，都是单页面组件，使用 xx.vue 以后写一个组件就是一个 xx.vue，页面组件和小组件
以后一个组件就是一个 xx.vue， 内部都有三个部分
-<template></template> # html内容写在里面
-<script></script> # 写js内容
-<style></style> # 写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项目集成axios，vue项目前后端打通
安装axios
1. 安装axios
npm install axios --S
2. 导入使用
import axios from 'axios'
3. 发送请求，获取数据
axios.get('http://127.0.0.1:8000/books/').then(res => {
console.log(res.data)
this.bookList = res.data
})
解决跨域问题（drf）
1. pip 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',
)
前后端交互版登录功能
五、props配置项
接受父传子自定义的属性
- 数组写法
- 对象写法
- 对象套对象写法
写法总结
普通使用: props:['msg']
属性验证: props:{msg:String},
指定类型，必填和默认值
props:{
msg:{
type:String, //类型
required:true, //必要性
default:'老王' // 默认值
}
}
六、混入
mixin（混入）可以把多个组件共用的配置提取成一个混入对象
- 把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用
使用步骤
1. 写一个mixin/index.js
export const hunhe = {
data(){
return{
name = 'xz'
}
},
methods: {
handlePrintName() {
alert(this.name)
}
},
}
2. 局部导入：在组件中
import {hunhe} from "@/mixin";
mixins:[hunhe,]
3. 全局使用，在main.js 中 以后所有组件都可以用
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)
七、插件
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二以后的参数是插件使用者传递的数据
使用步骤
1. 写一个 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. 以后再组件中可以直接用插件中写的东西
八、scoped样式
在 style 上写 <style scoped> </style> 以后只针对当前组件生效
九、localStorage和sessionStorage
-
window浏览器对象的东西 -
如果想在浏览器中存储数据
1. 永久存储：localStorage 不登录加购物车，没登录，搜索过的商品 2. 关闭页面数据就没了（临时存储）：sessionStorage 3. 设定一个时间，到时候就过期：cookie -
补充：序列化和反序列化
1. 对象转json字符串 JSON.stringify(person) 2. json字符串转对象 JSON.parse().
<template>
<div id="app">
<h1>localStorage操作</h1>
<button @click="saveStorage">点我向localStorage放数据</button>
<button @click="getStorage">点我获取localStorage数据</button>
<button @click="removeStorage">点我删除localStorage放数据</button>
<h1>sessionStorage操作</h1>
<button @click="saveSessionStorage">点我向localStorage放数据</button>
<button @click="getSessionStorage">点我获取localStorage数据</button>
<button @click="removeSessionStorage">点我删除localStorage放数据</button>
<h1>cookie操作</h1>
<button @click="saveCookie">点我向localStorage放数据</button>
<button @click="getCookie">点我获取localStorage数据</button>
<button @click="removeCookie">点我删除localStorage放数据</button>
</div>
</template>
<script>
import cookies from 'vue-cookies'
export default {
name: 'App',
data() {
return {}
},
methods: {
saveStorage() {
var person = {
name: '彭于晏',
age: 38
}
localStorage.setItem('userinfo', JSON.stringify(person))
},
getStorage() {
let userinfo = localStorage.getItem('userinfo')
console.log(userinfo)
console.log(typeof userinfo)
},
removeStorage() {
// localStorage.clear()
localStorage.removeItem('userinfo')
},
saveSessionStorage() {
var person = {
name: '彭于晏',
age: 38
}
sessionStorage.setItem('userinfo', JSON.stringify(person))
},
getSessionStorage() {
let userinfo = sessionStorage.getItem('userinfo')
console.log(userinfo)
console.log(typeof userinfo)
},
removeSessionStorage() {
// localStorage.clear()
sessionStorage.removeItem('userinfo')
},
saveCookie() {
cookies.set('name','lqz','7d') // 按秒计
},
getCookie() {
console.log(cookies.get('name'))
},
removeCookie() {
cookies.remove('name')
}
}
}
</script>
<style scoped>
h1 {
background-color: aqua;
}
</style>
十、集成elementui
第三方、样式库、常见的
1. 饿了么团队：elementui
2. iview
3. 移动端的ui：vant
使用步骤
1. 安装 npm i element-ui -S
2. 在main.js