Vue总结

  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模版中作为标签使用（相当于大量全局注册的组件）。