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.jx vue-router的配置
-store 装了vue自动生成的，如果不装就没有
index.js vuex的配置
-views 放了一堆组价：页面组件
AboutView.vue 关于页面组件
HomeView.vue 主页页面组件
-App.vue 根组件
-main.js 整个项目启动入口
.gitignore git的忽略文件
babel.config.js babel的配置
jsconfig.json js的配置
package.json 重要：类似于python项目requirements.txt 当前项目所有依赖
package-lock.json 锁定文件：package.json中写了依赖的版本，这个问价锁定所有版本
README.md 读我，项目的介绍
vue.config.js vue项目的配置文件
二、es6的导入导入导出语法
如果要导入，必须先导入
- 默认导出
- 命名异出
默认导出写法（export default）
1、写一个js，在js中定义变量、函数、最后使用export defalut导入
export default {
name:'小张',
printname () {
console.log(this.name)
}
}
2、在想使用的js中，导入
import 随便起 from './curry/utils'命名导出和导入（export const）
1、写一个js，在js中定义变量、函数，最后使用export 导出
export const name = '小王'
export const printName = () => {
console.log('小王要暴瘦')
}
2、在想使用的js 中。导入
import {printName} from './curry/utils'在包下可以建立一个名为index.js的文件，以后导入的时候，会默认找它
- 对比python中的
__init__.py
main默认配置这些的意思
三、vue项目的开发规范
以后写的组件，都是单页面组件 使用xx.vue以后写一个组件就是一个xx.vue这个又分页面组件和小组件
以后一个组件就是一个xx.vue，内部都有三部分
| <template></template> | html内容写在里面 |
| <script></script> | 写js内容 |
| <style></style> | 写css样式 |
main.js是整个入口
- 把App.vue根组件导入了
- 使用new Vue（{render：h=>(app)}）.$mount('#app')把App.vue组件中的数据和模板，插入到了index.html的id为app的div中了
- 只要在每个组件的export default{} 写之前学过的所有js的东西
- 只要在每个组件的template，写模板、插值语法、指令。。。
- 只要在每个组件的style，写样式
四、vue项目继承axios，vue项目前后盾打通
安装axios
- npm install axios --S
导入使用
- import axios from 'axios' （在script标签里导入）
发送请求，获取数据
axios.get('http://127.0.0.1:8000/books/').then(res => {
console.log(res.data)
this.bookList=res.data
})先用这种方式解决跨域（django项目）
- pip3 install django-cors-headers
- app中注册
INSTALLED_APPS = ( ... 'corsheaders', ... ) - 中间件注册
MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ] - 把下面的复制到配置文件中
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配置项
接收父传子自定义的属性
- 数组写法
- 对象写法
- 对象套对象写法
1.父组件
<template>
<div id="app">
<h1>App</h1>
<!-- <Child msg="父亲给你的"></Child>-->
<!-- <Child :msg="true"></Child>-->
<Child></Child>
</div>
</template>
<script>
// import Child from "@/components/Child"; // @ 代指 src路径
import Child from "./components/Child";
export default {
name: 'App',
components: {
Child
}
}
</script>
<style>
h1 {
background-color: aqua;
}
</style>子组件
<template>
<div>
<button>后退</button>
{{ title }}---{{ msg }}
<button>前进</button>
</div>
</template>
<script>
export default {
name: "Child",
// 普通使用
// props: ['msg'],
//属性验证
// props: {msg: String},
// 指定类型，必填和默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
},
data() {
return {
title: '首页'
}
},
created() {
console.log(typeof this.msg)
}
}
</script>
<style scoped>
</style>普通使用
props: ['msg']属性验证
props: {msg: String},指定类型，必选和默认值
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
},五、混入
# mixin(混入) 可以把多个组件共用的配置提取成一个混入对象
把多个组件中公用的东西，抽取出来，以后可以全局使用和局部使用
# 使用步骤
-1 写个mixin/index.js
export const hunhe = {
data() {
return {
name: '彭于晏'
}
},
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，第二个以后的参数是插件使用者传递的数据
# 使用步骤
-写一个 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样式
# 在styple上写 <style scoped> </style>，以后只针对于当前组件生效八、localStorage和sessionStorage
# window 浏览器对象有的东西
# 如果想在浏览器中存储数据，
永久存储：localStorage 不登录加购物车，没登录 搜索过的商品
关闭页面数据就没了(临时存储)：sessionStorage
设定一个时间，到时候就过期：cookie
# 补充：序列化和反序列化
// 对象转json字符串
// JSON.stringify(person)
// 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
# 第三方 样式库 常见的
-饿了么团队：elementui
-iview
-移动端的ui：vant
# 使用步骤
- 安装 npm i element-ui -S
-在main.js中引入