复习
"""
1、环境
node:官网下载安装包,傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org
vue/cli:cnpm install -g @vue/cli
2、项目创建
cd 存放项目的目录
vue create 项目名 => 需要安装的组件babel、vue-router、vuex
3、配置项目启动
pycharm打开项目,配置npm启动
4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境
5、vue-router配置路由:
<router-link to=""></router-link> | this.$router.push() 完成跳转
<router-view /> 完成页面组件的占位
在router/index.js中 完成路由配置 路径-视图组件 映射关系
两种路由传参
配置 跳转 获取
path:'/user' to="/user?pk=1" $route.query.pk
path:'/user/:pk' to="/user/1" $route.params.pk
:to="{name: 'user'}"
6、组件生命周期钩子:组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
created(){完成后台数据的请求}
mounted(){完成极其耗时的后台数据请求}
7、js原型
Vue.prototype.count = 100
所有Vue实例都可以访问count
"""
vue的ajax插件:axios
"""
1)安装插件(一定要在项目目录下):
>: cnpm install axios
2)在main.js中配置:
import axios from 'axios'
Vue.prototype.$axios = axios;
3)在任何一个组件的逻辑中发送ajax请求:
this.$axios({
url: 'http://127.0.0.1:8000/cars/',
method: 'get',
}).then(response => {
console.log(response);
// this.cars = response.data;
}).catch(error => { // 网络状态码为4xx、5xx
console.log(error);
});
"""
CORS跨域问题(同源策略)
"""
同源:http协议相同、ip服务器地址相同、app应用端口相同
跨域:协议、ip地址、应用端口有一个不同,就是跨域
Django默认是同源策略,存在跨越问题。
Django的解决方案:
1)Django按照cors模块:
>: pip install django-cors-headers
2)在settings注册模块,配置中间件:
INSTALLED_APPS = [
...
'corsheaders'
]
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
3)在settings开启允许跨越:
CORS_ORIGIN_ALLOW_ALL = True
"""
Vue配置ElementUI
"""
1)安装插件(一定要在项目目录下):
>: cnpm install element-ui
2)在main.js中配置:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3)使用:
灵魂:复制粘贴
"""
Vue配置jq+bs:见其课件
安装插件
jQuery
>: cnpm install jquery
vue/cli 3 配置jQuery:在vue.config.js中配置(没有,手动项目根目录下新建)
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
BootStrap
>: cnpm install bootstrap@3
vue/cli 3 配置BootStrap:在main.js中配置
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"