Vue 混入 插件 localStorage和sessionStorage

Vue 混入 插件 localStorage和sessionStorage

1、vue项目目录介绍

node_modules： 文件夹，内部很多当前项目依赖的模块，可以删除，npm install
public： 文件夹

• favicon.ico 网站小图标
• index.html spa：单页面应用

src： 以后写的代码都在这下面

• assets： 静态资源，js，css，图片 类似于static文件夹
  • logo.png 静态资源的图片
• components 组件：小组件，用在别的大（页面组件）组件中
  • helloworld.vur 默认了一个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项目的配置文件

2、es6的导入导出语法

如果要导入，必须先导出
默认导出
命名导出

默认导出写法
写一个js，在js中定义变量，函数，最后使用export defalut 导出

export default {
    name:'彭于晏',
    printName(){
        console.log(this.name)
    }
}

在想使用的js中，导入

import 随便起 from './lqz/utils'

命名导出和导入
写一个js，在js中定义变量，函数，最后使用export 导出

export const name = '刘亦菲'
export const printName = () => {console.log('新宠')
                               }

在想使用的js中导入

import {printName} from './lqz/utils'

**在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它 **
对比python中得__init__.py

3、项目开发规范

以后写的组件，都是单页面组件 使用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，写样式

4、vue项目集成axios,vue项目前后端打通

1. 安装axios
   npm insatall 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})
   

先用这种方式解决跨域（django 项目）

1. pip3 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',
           )
   

5、props配置项

接收父传子
数组写法
对象写法
对象套对象写法

写法总结
普通使用
props:['msg'],

属性验证
pprops:{msg:String}

指定类型，必填和默认值

props:{
    msg:{
        type:String,  //类型
        required:true,  //是否必要
        deffault:'老王'  //默认值
    }
}

6、混入

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)
   

7、插件

功能：用于增强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;
                },
            });

        }
    }

8、scoped样式

在styple上写 <style scoped>  </style> #以后只针对于当前组件生效

9、 localStorage和sessionStorage

window浏览器有的东西
如果想在浏览器中存储数据，
永久存储：localStorage 不登陆加购物车，没登录 搜索过的商品
关闭页面 数据就没了（临时存储）：sessionStorage
设定一个事件，到时候就过期：cookie

补充：序列化和反序列化
对象转json字符串

//对象转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>

10、继承elementui

第三方 样式库 常见的
饿了么团队：elementui
iview
移动端的ui：vant

使用步骤
安装 npm i elemeent-ui -S
在main.js中引入