vue框架:

路飛項目
1.vue框架:
    前臺html+css+js框架,是不一樣於js與jq的數據框架
    指令| 實例成員| vue項目
    
2.drf框架:
    django的插件,完成先後臺分離項目後臺接口編寫的框架
    序列化組件| 三大認證組件|
    分頁,篩選,過濾,排序|請求,解析,響應
    
3.路飛項目:
    前臺vue完成,後臺由drf框架完成先後臺分離項目
    git| 短信認證| celery異步任務| 項目上線
-----------------------------------------------------------------------------------    
js對象(字典)補充:
let b = 20;
let dic = {
    a:10,   //字典自己就是對象,key都是字符串形式能夠省略引號
    b(b:b)        // 值爲變量時,且與key同名,能夠簡寫
    };
console.log(dic)

vue:    
    1.what是:用於構建用戶界面的漸進式JavaScript框架(選擇性控制)
    
    2.why.學: 
        1.是三大主流框架之一: Angular  React  Vue
        2.有先進的前端設計模式: MVVM
        3.能夠徹底脫離服務器端,之前端代碼複用的方式渲染整個頁面,組件化開發
        4.結合了其餘框架的優勢,輕量級,中文API,數據驅動,雙向綁定,單頁面應用
        5.虛擬DOM ***
         缺點:沒其餘兩個框架完善,在趨於完善中
    3.vue環境: 本地導入,cdn導入
    
        注: 漸進式框架:根據需求,能夠決定vue框架控制項目的具體方位,能夠爲一個標籤,也能夠爲一個頁面,甚至能夠爲一個項目
            new Vue({el:'.xxx'})
        
    4.掛載點:
        1.html頁面:html與body不能做爲掛載點,css3選擇器語法
        2.一個vue對象掛載點以後只索引一個匹配結果,因此一般用id標識 
    
    實例成員:
        1.實例成員,data爲vue環境提供數據,數據採用字典{}形式;
        2.fiters: 過濾器函數fn(a,b)-----> {{a | fn(b)}} | {{a,b | fn}}
        3.method:事件方法
        ------------------------------------
        computed: 設置 方法屬性,該方法屬性在頁面渲染後,綁定的方法中任意變量發生改變(都被監聽),都會回調綁定的方法,
            eg: 一個變量依賴多個變量
            
        
        watch: 設置已有屬性的監聽事件,監聽的變量改變就會回調綁定的方法啊
            eg:多個變量依賴一個變量
            
        props:聲明組件的自定義屬性
        emit: 爲組建自定義事件發送數據
            
        
    
    指令:
        文本: {{}}  | v-text | v-html
        事件: v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)"
        屬性: v-bind:stylt="myStyle" | :class="[c1,c2]" | :class="{active: isActive}"
        表單指令: v-model="變量"
        -----------------------------
        v-once:
        v-cloak: 防止頁面加載 抖動
        v-show: 綁定的頁面爲布爾類型,隱藏時,在頁面中以 display:none 渲染
        v-if|v-else-if|v-else: 前分支成立會屏蔽後分支,else分支不須要條件
        v-for: 遍歷
            字符串:  v-for="(ch,index) in str"
            數組:    v-for="(ele,index) in arr"
            對象:    v-for="(value,key,index) in obj"
        
組件：
    1.定義：一個包含html，css，js獨立的集合體，能夠完成頁面解析的代碼複用
    2.組件分爲根組件，全局組件，局部組件
        根組件：
        全局組件:
            vue.component("組件名",{實例成員萌})    
        局部組件:必須在使用該組件的父組件中註冊
            let 組件名 = {實例抽根菸}
    3.組件都有本身template(根組件能夠省略採用掛在點),
      子組件能夠複用,因此數據要作局部化處理data(){ return{} }:
      在哪一個組件模板中出現的變量,就由當前組件提供變量對應 的值
    
    4.組件信息交互
        父傳子:提供綁定自定義屬性
        子傳父:提供自定義事件攜帶
        
        
        
        
Vue 項目搭建:
    1.安裝 node
        官網下載安裝包,傻瓜式安裝:https://nodejs.org/zh-cn/
    2.換源安裝cnpm
        npm install -g cnpm --registry=https://registry.npm.taobao.org
    3.安裝腳手架
        cnpm install -g @vue/cli
    4.若是2或3安裝出錯   清除緩存處理
        npm cache clean  --force
        
        
Vue 項目建立:
    vue create 項目名;
    在pycharm中配置npm項目
    
項目目錄


main.js:程序的入口文件
    加載vue環境
    加載插件環境: 路由,倉庫,ajax,cookie,element-ui...
    加載自定義環境:全局樣式(global.css),全局配置(settings.js)
    渲染根組件

.vue文件形式組件
    template標籤:內部有且只有一個跟標籤
    script標籤: export default{},導出該局部內容
    style標籤: scope屬性,實現樣式的組件化
    
    
項目運行生命週期:
    main.js => router.js => 連接 => 頁面組件 =>替換根組件中的router-view 
    標籤完成頁面渲染 => 經過 router-link | this.$router.push()切換路由
    (連接) => 完成渲染組件的替換 => 頁面的跳轉


新建頁面的三步驟:
    1.建立頁面組件
    2.設置組件路由
    3.設置路由跳轉
    
    
組件的生命週期鉤子:組件從生成到銷燬整個過程的一些特殊時間節點回調的函數

this.$router:路由跳轉
this.$route:路由數據(this.$route.path)



vue-router插件:****

路由跳轉:
    this.$router.push('/course');
    this.$router.puth({name:course});
    this.$router.go(-1);
    this.$router.go(1);
    <router-link :to="/course">課程頁</router-link>
    <router-link :to='{name:'course'}">課程頁</router-link>
    
    
路由傳參

    第一種:
        配置:path:'/path/:pk' =>請求: '/path/${pk} =>取值:this.$route.params.pk
    第二種:
        配置:path:'/path',name='path' =>請求:{name:'path',query={pk:值}} =>取值 this.$route.query.pk
        
    
完成跨組件傳參的方式:
    1. localStarage:            永久存儲數據
    2. sessionStorage:          臨時存儲數據(刷新頁面數據不重置)
    3. cookie:                  臨時或永久數據(由過時時間決定)
    4. vuex的倉庫(store.js):    臨時存儲數據(刷新頁面數據重置)
    
vuex倉庫插件***

store.js配置文件
    export default new Vuex.Store({
        state: {
            title: '默認值'
        },
        mutations: {
            // mutations 爲 state 中的屬性提供setter方法
            // setter方法名隨意，可是參數列表固定兩個：state, newValue
            setTitle(state, newValue) {
                state.title = newValue;
            }
        },
        actions: {}
    })
        
在任意組件中給倉庫變量賦值
    this.$store.state.title = 'newTitle'
    this.$store.commit('setTitle','newTitle')
    
在任意組件中取倉庫變量的值
    console.log(this.$store.state.title)
    
    
vue-cookie插件:***
    安裝:
        >:cnpm install vue-cookies
    
    main.js配置:
        第一種:
        import cookies from 'vue-cookies'      // 導入插件
        Vue.use(cookies);                    // 加載插件
        new Vue({
            // ...
            cookies,                        // 配置使用插件原型 $cookies
        }).$mount('#app');

        第二種*****
        import cookies from 'vue-cookies'    // 導入插件
        Vue.prototype.$cookies = cookies;    // 直接配置插件原型 $cookies
                
    使用:
        增(改): key,value,exp(過時時間)
            時間:  1s | 1m | 1h | 1y
            this.$cookies.set('token',token,'1y');
            
        查:key
            this.$cookies.get('token');
        
        刪: key
            this.$cookies.remove('token')
            
    注: cookie通常是用來存儲token的
        1.token: 安全認證的隨機字符串
        2.有後臺產生,存儲於後臺的(session表中,文件,內存緩存),存儲於前臺的(cookie中)
        3.服務器先生成反饋給前臺(登陸認證過程),
          前臺提交給後臺完成認證(須要登陸後的請求)
         
        4.先後臺分離項目:後臺生成token,返回給前臺 ==>前臺本身存儲,
          發送攜帶token請求 ==> 後臺完成token校驗 ==>後臺獲得登陸用戶
          
          
axios插件:****
    安裝:   
        cnmp install axios
    main.js配置:
        import axios from 'axios' //導入插件
        Vue.prototype.$axios = axios; 直接配置插件原型 
    使用:
        this.axios({
            url:'請求接口',
            method:'get|post',
            data:{post提交的數據},
            params:{get提交的數據},
            header:{請求頭}    
            }).then(function(response){
                請求成功的回調函數}).catch(function(error){
                請求失敗的回調函數})
    
    案例:
        // get請求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'get',
            params: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });

        // post請求
        this.$axios({
            url: 'http://127.0.0.1:8000/test/ajax/',
            method: 'post',
            data: {
                username: this.username
            }
        }).then(function (response) {
            console.log(response)
        }).catch(function (error) {
            console.log(error)
        });
        
跨越問題(同源策略):
    後臺接收到前臺的請求，能夠接收前臺數據與請求信息，發現請求的信息不是自身服務器發來的請求，拒絕響應數據，這種狀況稱之爲 - 跨域問題（同源策略 CORS）

    致使跨域狀況有三種
     1) 端口不一致
     2) IP不一致
     3) 協議不一致

    Django如何解決 - django-cors-headers模塊
     1) 安裝：pip3 install django-cors-headers
     2) 註冊：
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]
     3) 設置中間件：
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]
     4) 設置跨域：
    CORS_ORIGIN_ALLOW_ALL = True


element-ui插件:
    下載=>配置=>使用
    下載:
        cnpm install element-ui
        
    配置main.js:
        import ElementUI from 'element-ui'
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    
    使用:
        依照官網 https://element.eleme.cn/#/zh-CN/component/installation api

View Code