vue-(5)

内容概览

• 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项目的配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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__
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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，写样式
1
2
3
4
5
6
7
8
9
10
11
12

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',
        )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

props配置项

// 接收父传子自定义的属性
1. 数组写法
	props:['msg']
2. 对象写法,属性验证
	props:{msg:String}  // 指定数据类型为字符类型
3. 对象套对象写法,指定类型,是否必填,默认值
	props:{
		type:String,  // 指定数据类型
		required:true,  // 是否为必填
		default:'xxx'  // 默认值
	}
1
2
3
4
5
6
7
8
9
10
11

混入

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

插件

// 功能:用于增强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. 在组件中就可以直接使用到插件中写的东西了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

scoped样式

在style上写 ，以后样式就只针对于当前组件生效

localStorage与sessionStorage

# window 浏览器对象有的东西
# 如果想在浏览器中存储数据，
	永久存储：localStorage   不登录加购物车，没登录 搜索过的商品
    关闭页面数据就没了(临时存储)：sessionStorage
    设定一个时间，到时候就过期：cookie
1
2
3
4
5

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

继承elementUI

# 第三方 样式库  常见的
	-饿了么团队：elementui
    -iview
    -移动端的ui：vant
# 使用步骤
	- 安装	npm i element-ui -S
	-在main.js中引入
1
2
3
4
5
6
7