1 Vue 前端集成框架 用于分离项目前端内容，实现前后端分离，有独立服务器？在哪？服务器or客户端？
2 算法
3 单页面实现渐进式控制 类似编程语言中的解释型语言
4 知识
5 单页面应用组件化开发
6 Django项目分为：
7 前后台不分离项目：
8 1）后台渲染页面：模板语音 {{}} {%%}
9 2）csrf-token => form post 请求
10 3）render、HTTPResponse、redirect => JSONResponse
11 4）ajax => 页面的局部刷新
12
13 前后台分离项目：
14 1）前台页面自己渲染 - 自己搭建运行的服务器
15 2）ajax完成数据请求
16 3）drf - django rest framework - restful - 接口
17 4）vue - 数据驱动
18 DOM驱动
19 JQ： 内容 样式 事件 操作：选择器获取标签、设置钩子（事件）、内容样式操作
20 数据驱动
21 Vue
22 cbv
23 fbv
24 MVVM设计模式 model view 把control分为VC和MC
25 Vue优点
26 1）单页面 - 硬件要求低
27 2）组件化开发
28 3）数据驱动
29 4）数据的双向绑定
30 5）虚拟DOM（内存DOM，效率高）
31 6）轻量级
32 new Vue({
33 el:'',
34 data:{
35 var:'val'#{{var}}
36 },
37 methods:{
38 func_name:function(){
39 #@event='func_name'
40 }or
41 func_name(){
42 #@event='func_name'
43 }
44 }
45 })
46 Vue学习分为三部分：
47 指令：写在标签的属性区域内（插值表达式除外）
48
49 文本指令：变量值在成员组的data中绑定
50 插值表达式：{{变量或表达式}}
51 v-text='var' #原文本会被msg替换
52 v-html='var'
53 v-once='var' #使文本固定，{{var}}与搭配使用
54 事件指令： 组件methods中绑定
55 v-on:event='func_name' #监听，‘v-on：’可以简写为‘@’
56 斗篷指令 v-cloak #不太懂唉
57 属性指令：
58 v-bind:att='var or val' #绑定，与实例成员data对应，可以简写:
59 表单指令：
60 v-model='var' #双向绑定，v-model存储的值为<input>标签的value值，与实例成员data对应，改变同步
61 条件指令：
62 v-if v-else-if v-else #v-if="条件表达式"
63 v-show='var' #var==None 则隐藏
64 循环指令：
65 v-for= '(val key index) in vars指令基于一个数组来渲染一个列表，可以使用:key绑定来绑定其中数据以便加以改变
66 todolist：
67
68 实例成员：
69 el
70 data
71 methods 方法，通用与任何函数，响应式依赖：访问一次缓存，执行一次函数#重过程
72 computed 非响应式依赖：一次缓存可多次访问，只有当因变量改变，才执行一次函数#重结果
73 watch 如果多个变量依赖于一个变量，多随一 #侦听器
74
75 组件：组件是可复用的 Vue 实例，且带有一个名字，通用选项有：data、computed、watch、methods 以及生命周期钩子。
76 根组件：通过new Vue 创建的Vue根实例，特有el选项
77 子组件：作为标签使用，每使用一次创建一个新实例，为了独立维护组件data里的变量，组件的 data 选项必须是一个函数，返回data对象：data:function(){return {count: 0}}
78 全局注册：Vue.component('my-component-name', { ... options ... })，注册之后的全局使用
79 局部注册：
80 父传子 props:[]
81 子传父 $emit('func_name',var)
82
83 Vue实例生命周期与钩子：
84 beforeCreate(){}
85 created(){}
86 beforeMount(){}
87 mounted(){}
88 Vue项目：
89 目录：element-ui https://element.eleme.cn/#/zh-CN
90 node_modules：项目依赖
91 public：公用文件
92 favicon.ico：页面标签图标
93 index.html：项目的唯一页面(单页面)
94
95 src：项目开发文件目录
96 assets：静态资源
97 css|js|img
98 components：小组件
99 *.vue
100 export default{}?
101 views：视图组件
102 *.vue
103 App.vue：根组件
104 main.js：主脚本文件
105 router.js：路由脚本文件 - vue-router
106 store.js：仓库脚本文件 - vuex
107
108 *.xml|json|js：一系列配置文件
109 README.md：使用说明
110 功能：
111 vue-router：路由
112 router.js 路由分发
113 路由传参1、path:'url:id'； this.$route.params.id可以拿到链接中 :变量 变量中的数据 $route数据$router路径
114
115 router-link：to 路由寻址
116 2、<router-link :to="'/course/detail?id=' + course.id">； this.$route.query.id拿到参数
117 router-view：视图替换
118 this.$router.go(-1) //返回历史记录的前一页
119 vuex：
120 store.js 全局可访问
121
122 vue-cookie：
123 安装：
124 >: cd 项目目录
125 >: cnpm install vue-cookie --save
126 配置：
127 main.js
128 import cookie from 'vue-cookie'
129 Vue.prototype.$cookie = cookie;
130
131 使用：
132 token是后台返回的
133 设置cookie
134 this.$cookie.set(key, value, time)
135 取出cookie
136 this.$cookie.get(key)
137 删除cookie
138 this.$cookie.delete(key)
139 axios：#Axios是一个HTTP 库，可以用在浏览器和 node.js 中。
140 安装：
141 >: cd 项目目录
142 >: cnpm install axios --save
143 配置：
144 main.js
145 import Axios from 'axios'
146 Vue.prototype.$axios = Axios;
147 跨域问题这里解决：
148 '''
149 1）安装django-cors-headers模块
150
151 2）在settings.py中配置
152 # 注册app
153 INSTALLED_APPS = [
154 ...
155 'corsheaders'
156 ]
157 3）添加中间件
158 MIDDLEWARE = [
159 ...
160 'corsheaders.middleware.CorsMiddleware'
161 ]
162 4）允许跨域源
163 CORS_ORIGIN_ALLOW_ALL = True
164 '''
165 前后端交互：
166 GET：
167 this.$axios({
168 url: 'http://localhost:8000/test/data/',
169 method: 'get',
170 params: {
171 usr: 'zero',
172 pwd: '000'
173 }
174 }).then((response) => {
175 console.log(response.data)
176 }).error((error) => {
177 console.log(error)
178 });
179 POST：
180 this.$axios({
181 url: 'http://localhost:8000/test/data/',
182 method: 'post',
183 data: {
184 username: 'owen',
185 password: '123'
186 }
187 }).then((response) => {
188 console.log(response.data)
189 }).error((error) => {
190 console.log(error)
191 });
192 element-ui
193 安装：>: npm i element-ui -S
194 配置：
195 main.js
196 import ElementUI from 'element-ui' #js文件
197 Vue.use(ElementUI)#全局使用，如Vue.user(Router)
198
199 import 'element-ui/lib/theme-chalk/index.css';#样式文件
200 使用：element-ui文件里有大量组件及其内部小组件，vue模版中作为标签使用（相当于大量全局注册的组件）。
