Vue插件

目录

vue项目目录结构

es6导入导出语法

Vue项目开发规范单页面组件写法

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

前后端交互之登录功能

props配置项

父组件通过自定义属性与子组件通信

混入

插件

scoped样式

localStorage,sessionStorage 和 cookie

Vue使用elementui

---

vue项目目录结构

项目名
├── node_modules -- 项目的依赖
├── public -- 文件夹
├    ├── favicon.ico -- 网站顶部小图标
├    └── index.html -- 单页面开发，项目唯一页面
├── src -- 文件夹，主要代码都在里面
├    ├── assets -- img，js，css，都可以放在这里
├    ├── components -- 小组件，放在页面组件中的
├    ├── store -- 安装了vuex就会生成
├    ├── router -- 安装了vue-router就会生成，配置路由
├    ├── views -- 页面组件存放在这
├    ├── App.vue -- 根组件，靠它和唯一的页面连接的
├    └── main.js -- 整个项目的入口 
├── .gitignore -- git版本管理
├── babel.config.js -- babel的配置，不用管
├── jsconfig.json
├── package.json -- 项目的配置，和依赖的模块都在这
├── package-lock.json
├── README.md -- 项目的介绍
└── vue.config.js -- vue的配置信息
 

项目传给别人，node_modules这个文件夹要删掉，别人通过npm install 生成，装好该项目的依赖。

es6导入导出语法

在一个js文件中想要使用另一个js文件中的变量、函数等，就要用到导入导出语法。

导出

每个模块中，只允许使用唯一的一次export default，否则会报错。

export default 对象

导入

js后缀不用写，如果文件夹内有一个index.js，只导入文件夹，就相当于导入了文件夹下的index.js。

// 全部导入
import 起个名字  from 'js文件名'
// 单独导入
import {变量}  from 'js文件名'

举例：

a.js:

const name = 'yietong'
const age = 22
export default {
    name:name
}

b.js:

import aa from './a'
console.log(aa.name)  // 正常取出
console.log(aa.age)  // 没有值，因为没导出

Vue项目开发规范单页面组件写法

vue项目中的每一个vue后缀的文件都是一个组件。

一个vue组件包含以下内容：

• template：html内容
• script：js内容
• style：css样式

比如Vue项目views文件夹下的HomeVie.vue文件：

<template>
  <div class="home">
    <h1>{
  { aa }}</h1>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @就相当于/src，这里导入HelloWorld.vue组件
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  // 组件属性写在这
  data() {
    return {
      aa: 'abcd'
    }
  },
  components: {
    HelloWorld
  }
}
</script>
<!--scoped表示这个css样式只作用于当前组件-->
<style scoped>
img {
  width: 100px;
}
</style>

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项目前后端打通

安装axios

npm install axios --S

main.jsz导入使用

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，