vue学习笔记

今日内容概要

• vue项目目录介绍
• es6的导入导出语法
• vue项目开发规范
• vue项目集成axio
• vue项目前后端打通
• 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 defalut 导出
    export default {
        name: '彭于晏',
        printName () {
            console.log(this.name)
         }
     }
2. 在想使用的js中导入
    import 随便起 from './lqz/utils'

命名导出和导入

1. 写一个js ,在js中定义变量，函数，最后使用export  导出
    export const name = '刘亦菲'
    export const printName = () => {
        console.log('wjl')
    }
2. 在想使用的js中导入
    import {printName} from './lqz/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项目集成axio

# 第一步，安装
npm install axios -S

# 第二步：main.js 配置
# 导入
import axios from 'axios'
# 类的原型中放入变量
Vue.prototype.$axios = axios;

# 第三步：在任意组件中使用
# this.$axios   就是axios对象
this.$axios.get().then(res=>{})


如果，没有在main.js中配置，使用如下：
# 导入使用
import axios from 'axios'

# 发送请求，获取数据
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',
        )

vue项目前后端打通

前后端交互版登录功能

<template>
  <div id="app">
    <h1>登录功能</h1>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="password"></p>
    <button @click="handleSubmit">登录</button>{{msg}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      bookList: [],
      username: '',
      password: '',
      msg:''
    }
  },
  methods: {
    handleSubmit() {
      axios.post('http://127.0.0.1:8000/user/', {
        username: this.username,
        password: this.password
      }).then(res => {
        console.log(res.data)
        if(res.data.code==100){
          // 登录成功 跳转到百度
          location.href='http://www.baidu.com'
        }else {
          this.msg=res.data.msg
        }
      })
    }
  },
  created() {
    axios.get('http://127.0.0.1:8000/books/').then(res => {
      this.bookList = res.data
    })
  }
}
</script>
<style>
h1 {
  background-color: aqua;
}
</style>

props配置项

利用props配置项由 父组件 向 子组件 传值操作，步骤如下：

（1）在父组件中使用子组件的标签里面通过属性绑定向子组件传值，如下代码：

<Demo name="xxx"><Demo/>

（2）子组件通过props配置项接收，如下代码：

第一种方式（只接受值）：
props:["name"]

第二种方式（接收值并且限制值的类型）：
props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：
props:{
    name:{
        type:String,//限制类型
        required:true,//限制必要性
        default:"老王"//指定默认值
    }}

在此提出一个注意点，props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么可以考虑一下两种方式：

方式一：将props内接收的值赋值给本地data，代码如下：

props: ['demo'],
data: function () {
        return {
            counter: this.demo
        } }

方式二：若prop 以一种原始的值传入且需要进行转换，可以定义一个计算属性，代码如下：

props: ['demo'],
computed: {
  normalizedSize: function () {
    return this.demo.reverse()
  }
}

混入

# 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这里的插件，并不是说我们去写一个第三方程序，然后通过命令行或者其他方式进行安装。
说简单点，本次所说的插件就是一个json对象；一般我们都会创建一个js(如plugins.js)文件，然后在里面编写插件的内容，比如：

# 功能：用于增强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 定义全局组件(全局过滤器)
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })

        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;
            },
        });
    }
}

vue进行规定，install函数是必须得有的。而函数体则是插件的内容。
既然插件已经有了，现在就要应用插件，一般在main.js中进行应用，如下：

//引入插件
import plugins from './plugins'
//应用（使用）插件
Vue.use(plugins)  // 本质，使用use，会自动触发插件对象中得install

以后在组件中可以直接用插件中写的东西

scoped样式

# 在styple上写 <style scoped>  </style>，以后只针对于当前组件生效
作用：让样式在局部生效，防止冲突

写法：<style scoped>  </style>

总结：可以防止在两个组件中使用了相同名字的style样式而导致后面引入的样式覆盖了前面的样式的冲突，但在App.vue文件中最好不要使用，因为App.vue通常存放所有的style样式，大多数情况都是用来在全局使用的。此外可以使用npm view webpack versions命令查看webpack的历史版本，使用npm i less-loader@版本号配置less-loader，当ledd-loader版本高于webpack版本不少时安装可能会报错。

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">点我向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'
export default {
  name: 'App',
  data() {
    return {}
  },
  methods: {

    saveStorage() {
      let 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() {
      let 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>
</style>

集成elementui

# 第三方 样式库  常见的
    饿了么团队：elementui
    iview
    移动端的ui：vant
# 使用步骤
    1. 安装
    npm install element-ui -S
    2. 在main.js中引入
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI)