内容概览
- vue项目目录介绍
- es6的导入导出语法
- vue项目开发规范
- vue项目集成axios
- props配置项
- 混入
- 插件
- scoped样式
- localStorage与sessionStorage
- 集成elementUI
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项目的配置文件
es6的导入导出语法
/*
如果想要导入,需要导入的文件必须先导出
导出有两种方式：
默认导出
命名导出
*/
// 默认导出写法
1. 写一个js,在js中定义变量、函数,最后使用export default导出
let name='小明'
export default {
name // 等同于'name':name
}
// 也可以直接传值
export default {
name:'小明',
printName(){
console.log(this.name)
}
}
2. 在想要使用的js中导入
import 自定义名字 from './test/utils'
自定义名字.name
自定义名字.printName()
// 命名导出和导入
1. 写一个js,在js中定义变量,函数,最后使用export导出
export const name = '小红'
export const printName = () => {console.log('xxx')}
2. 在想使用的js中导入
import {name} from './test/utils'
import {printName} from './test/utils'
// 在包中可以创建一个index.js文件,类似于python的__init__
vue项目开发规范
// 以后写组件,都是单页面组件;使用xxx.vue以后,写一个组件就是一个vue文件,页面组件和小组件
// 一个.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项目前后端连通
1. 安装axios
-npm install axios -S
2. 导入使用
import axios from 'axios'
3. 发送请求,获取数据
axios.get('http://127.0.0.1:8000/books/').then(res => {
this.booksDetail = res.data
console.log(res.data)
})
4. 当前解决跨域问题的方式(django项目中解决)
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配置项
// 接收父传子自定义的属性
1. 数组写法
props:['msg']
2. 对象写法,属性验证
props:{msg:String} // 指定数据类型为字符类型
3. 对象套对象写法,指定类型,是否必填,默认值
props:{
type:String, // 指定数据类型
required:true, // 是否为必填
default:'xxx' // 默认值
}
混入
mixin(混入)可以将多个组件公用的配置提取成一个混入对象
// 把多个组件公用的抽取出来,然后选择全局使用或局部使用
// 使用步骤
1. 写一个mixin/index.js
export const hunhe = {
data(){
return {
name:'小明'
}
},
methods:{
handlePrint(){
console.log(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 {hunhe} from "@/mixin";
import axios from 'axios'
import Vue from "vue";
export default {
install(miVue) {
console.log(miVue)
// 1. 在vue实例上添加变量
Vue.prototype.$name = '小明' // 对比python,相当于在类属性中添加了一个属性类,所有对象都能够取到
Vue.prototype.$ajax = axios // 将axios放入Vue实例中,就可以this.$ajax直接使用了
// 2. 在插件中加入混入
// 全局使用混入
// Vue.mixin({
// data() {
// return {name: '小明'}
// }
// })
Vue.mixin(hunhe) // 两种写法
// 3. 定义全局组件(elementUI)
// 4. 定义自定义指令 v-xxx
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
// Vue.use(plugins, 'xxx', 19) // 第二个以后的参数需要install方法接收
3. 在组件中就可以直接使用到插件中写的东西了
scoped样式
在style上写 <style scoped> </style> ，以后样式就只针对于当前组件生效
localStorage与sessionStorage
# window 浏览器对象有的东西
# 如果想在浏览器中存储数据，
永久存储：localStorage 不登录加购物车，没登录 搜索过的商品
关闭页面数据就没了(临时存储)：sessionStorage
设定一个时间，到时候就过期：cookie
<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">点我向sessionStorage放数据</button>
<button @click="getSessionStorage">点我获取sessionStorage数据</button>
<button @click="removeSessionStorage">点我删除sessionStorage放数据</button>
<h1>cookie操作</h1>
<button @click="saveCookie">点我向cookie放数据</button>
<button @click="getCookie">点我获取cookie数据</button>
<button @click="removeCookie">点我删除cookie放数据</button>
</div>
</template>
<script>
import cookies from 'vue-cookies' // 想要控制cookie需要先下载 npm install vue-cookies -S
export default {
name: 'App',
methods: {
// localStorage操作
saveStorage() {
localStorage.setItem('username', 'oscar')
},
getStorage() {
let username = localStorage.getItem('username')
console.log(username)
},
removeStorage() {
localStorage.removeItem('username') // localStorage.clear() 清空
},
// sessionStorage操作
saveSessionStorage() {
sessionStorage.setItem('username', 'oscar')
},
getSessionStorage() {
let username = sessionStorage.getItem('username')
console.log(username)
},
removeSessionStorage() {
sessionStorage.removeItem('username') // sessionStorage.clear()
},
// cookie操作
saveCookie() {
cookies.set('name', 'lqz', 10) // 默认按秒计, 7d为7天
},
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中引入
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
