vue项目目录结、es6导入导出语法、vue 项目开发规范、vue项目集成axios,vue项目前后端打通、props配置项(接受父传子自定义的属性)、混入（mixin）、插件、scoped样式
vue项目目录结构
myfirstvue # 项目名字
-node_modules # 有很多小文件，该项目的依赖，项目传给别人，这个文件夹要删掉，如果这个文件夹没有， npm install 生成，并且装好该项目的依赖
-public # 文件夹
-favicon.ico # 网站顶部小图标
-index.html # 单页面开发，整个项目就这一个html
-src # 文件夹，内容重要，以后咱们代码主要在这写，组件，js，css。。
assets # 公共图片，js，css，都可以放在这里
components # 小组件，放在页面组件中使用的小组件， xx.vue
store # 安装了vuex，就会生成，下面有个index.js
router # 安装了vue-router，就会生成，下面有个index.js
views # 页面组件，放了一个个页面组件
App.vue # 根组件
main.js # 整个项目的入口
.gitignore # git版本管理忽略文件
babel.config.js # babel的配置，不用管
jsconfig.json
package.json # 项目的配置，和依赖模块都在这
package-lock.json
README.md # 项目的介绍
vue.config.js # vue的配置信息
es6导入导出语法
在一个js中使用另一个js中的代码（变量、函数）
每个模块中，只允许使用唯一的一次export default，否则会报错
默认导出与导入
// 定义导出内容
export default 标识符; // 此处的标识符代表之前定义的某个变/常量、函数或类，
import 导入标识符 from 路径; // 导入标识符可以与导出时使用的标识符不同，此时即视为隐式重命名
import { default as 新标识符 } from 路径; // 对只有默认导出的模块重命名必须使用default关键字以及大括号
默认导出案例：
export default {
name,printName,f
}
import zxr from './zxr/utils'
console.log(zxr.name)
zxr.printName()
匿名默认导出与导入，注意一个模块只能存在一个默认导入
... // 定义导出内容
export default { ... }; // 大括号内部可包含部分或所有之前定义的内容
// 对只有匿名默认导出的模块，必须重命名，且必须使用default关键字以及大括号
import { default as 新标识符 } from 路径;
命名导出导入
逐个导出与按需导入：
export 类型关键字1 标识符1 = 值1;
export 类型关键字2 标识符2 = 值2;
... // 更多导出
import { 标识符1 as 新标识符，标识符1，... } from 路径; // 此处的标识符与导出模块相同
批量导出与按需导入：
... // 定义导出内容
export { 标识符1，标识符2, ... };
import { 标识符1 as 新标识符，标识符1，... } from 路径; // 此处的标识符与导出模块相同
批量导入并再导出后，按需导入：
import ...
import ...
...
export { 标识符1，标识符2, ... };
export { 标识符a，标识符b, ... };
// 虽然分开导出看起来有点怪，但是可以直接复制导入模块的导出语句，不用重新写一遍，比较方便。但仅限开发自己的模块时，三方模块还是需要手写再导出语句，除非能拿到导出源码
import { 标识符1 as 新标识符，标识符1，标识符a，... } from 路径; // 此处的标识符与导出模块相同
在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它
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项目集成axios,vue项目前后端打通
创建一个django项目
models.py
from django.db import models
# Create your models here.
class Book(models.Model):
name = models.CharField(max_length=32)
price = models.CharField(max_length=32)
publish = models.CharField(max_length=32)
views.py
from django.shortcuts import render
from rest_framework.generics import ListAPIView
from rest_framework.viewsets import ViewSetMixin
# Create your views here.
from app01.models import Book
from app01.serializer import BookSerializer
class BookView(ViewSetMixin, ListAPIView):
queryset = Book.objects.all()
serializer_class = BookSerializer
serializer.py
from rest_framework import serializers
from app01.models import Book
class BookSerializer(serializers.ModelSerializer):
class Meta:
model = Book
fields = "__all__"
vue项目
# 安装axios
-npm install axios --S
# 导入使用
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',
)
登录功能
views.py
import json
from django.http import JsonResponse
from django.shortcuts import render
import json
def login(request):
username = json.loads(request.body).get('username')
password = json.loads(request.body).get('password')
if username == 'zxr' and str(password) == '123':
return JsonResponse({'code': 100, 'msg': '登录成功'})
else:
return JsonResponse({'code': 101, 'msg': '用户名或密码错误'})
url.py
path('user/', views.login),
App.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='https://www.baidu.com/'
}else{
this.msg= res.data.msg
}
})
}
},
created() {
axios.get('http://127.0.0.1:8000/books/').then(res => {
console.log(res.data)
this.bookList = res.data
})
}
}
</script>
<style>
</style>
props配置项(接受父传子自定义的属性)
1）数组写法(普通使用)
props: ['msg'],
2）对象对象写法(属性验证)
props: {msg: String},
3）对象套对象写法（指定类型，必填和默认值）
props: {
msg: {
type: String, //类型
required: true, //必要性
default: '老王' //默认值
}
},
混入（mixin）
可以把多个组件共同的配置提取成一个混入对象
局部混入
1.新建一个文件夹mixin
2.在mixin里新建一个index.js文件（使用index这个名字的话就是在导入的时候只需要导入到文件夹就可以了）
3.里面可以放一些公用的东西
4.export const hunhe = {
methods:{
handlePrintName(){
alert(this.name)
}
},
}
5.在需要使用的地方只需要写入：
import {hunhe} from "@/mixin";
mixins:[hunhe,] // 列表可以写多个
全局混入
在main.js中写入
import {hunhe} from "@/mixin";
Vue.mixin(hunhe)
插件
1）功能：用于增强Vue
2）本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件
"""创建文件plugins，创建index.js"""
import Vue from "vue";
export default {
install(a) {
console.log('执行了插件', a)
// 定义指令
//定义全局指令：跟v-bind一样，获取焦点,使用的时候用V-fbind
Vue.directive("fbind", {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value;
},
});
//定义混入，所有vc和vm上都有name和lqz
Vue.mixin({
data() {
return {
name: '彭于晏',
age: 19,
};
},
});
// 原型上放方法，所有vc和vm都可以用hello
Vue.prototype.hello = () => {
alert("你好啊");
};
}
}
使用插件
"""在main.js中"""
import plugins from "@/plugins";
Vue.use(plugins) // 本质使用use,会自动触发插件对象中得install
App.vue
<template>
<div>
{{name}}
<input type="text" v-fbind:value="v">
<br>
<button @click="hello">点我</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
v:'xxx'
};
},
};
</script>
scoped样式
1）作用：让样式在局部生效，防止冲突。
2）写法：
<style scoped> // 只针对当前组件有效
浙公网安备 33010602011771号