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                     路由傳參一、path:'url:id'； this.$route.params.id能夠拿到連接中 :變量 變量中的數據 $route數據$router路徑
114                     
115                 router-link：to 路由尋址
116                     二、<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模版中做爲標籤使用（至關於大量全局註冊的組件）。