Vue第三篇

Vue第三篇

複習

"""
v-if | v-show  "tag == 0"
    v-if | v-else-if | v-else

v-for="obj in objs"

<div :abc="obj">{{ obj }}</div>

computed：監聽綁定函數中的全部變量，返回值給綁定的變量
watch：監聽綁定的變量

let localTag = {  # => <local-tag>
    template: `只能有一個根標籤`,
    data: funtion() {
        return {

        }
    },
    methods: {
    
    },...
}
new Vue({
    components: {
        localTag: localTag
    }
})


Vue.component('globalTag', {})



父傳子
<子 :abc="msg"></子>
父 {
    data: {
        msg: '信息'
    }
}
子 {
    props: ['abc']
}


子傳父
<子 @ooo="fn"></子>
父 {
    methods: {
        fn: function(a, b) {
        }
    }
}
子 {
    data: fn {
        a: 'aaa',
        b: 'bbb'
    },
    methods: {
        // 子組件中觸發 xyz
        xyz: function() {
            // 觸發ooo自定義事件
            this.$emit('ooo', a, b)
        }
    }
}

"""

Vue項目須要自建服務器：node

"""
1.用C++語言編寫，用來運行JavaScript語言
2.node能夠爲前端項目提供server (包含了socket)
"""

npm:包管理器 - 爲node拓展功能的

# 換國內源，加速下載
# 管理員命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org
# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

# 索引npm的指令均可以換成cnpm
# npm install vuex => cnpm install vuex

vue cli環境：腳手架 - 命令行快速建立項目

"""
cnpm install -g @vue/cli

若是報錯：npm cache clean --force
"""

建立Vue項目

"""起步
1.cd 到目標目錄
2.建立項目：vue create 目錄名
"""


""" 建立項目的過程
提示下載原：選擇淘寶鏡像

具體配置：上下鍵切換，空格鍵選擇，回車鍵進入下一步
1.第二個選項進入自定義配置
2.Babel jsES6語法轉換ES5，Router路由 Vuex組件數據交互 Formatter格式化代碼
3...有提示選擇大寫，沒提示默認第一個便可
"""

啓動項目

""" 終端啓動
1.進入項目：cd到項目目錄
2.啓動項目：npm run serve
"""

""" pycharm配置
1.按照vue.js插件，重啓
2.配置項目的npm啓動項
"""

項目目錄

"""
node_modules：依賴
public：共有資源
    ico：頁面標籤的logo
    html：單頁面 - 整個項目的惟一頁面
src：代碼主體
...：項目、插件等相關配置
"""

""" src
assets：靜態資源
components：小組件
views：視圖組件
App.vue：根組件
main.js：主腳本文件
router.js：路由腳本文件 vue-router
store.js：倉庫腳本文件 vuex
"""

組件

<template>
    <!-- 只能有一個根標籤 -->
</template>

<script>
    export default {
        name: "Main",
        data: function() {
            return {
                
            }
        },
        ...
    }
</script>

<style scoped>
    /* scoped */
</style>

在根組件中渲染頁面組件

<!-- Main.vue 主頁組件 -->
<template>
    <div class="main">
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data: function () {
            return {
                title: '主頁'
            }
        }
    }
</script>

<style scoped>
    .main {
        height: 100vh;
        background-color: orange;
    }
    h1 {
        margin: 0;
        color: red;
    }
</style>

<!-- App.vue根組件 -->
<template>
    <div id="app">
        <!-- 3.使用 -->
        <Main></Main>
    </div>
</template>
<script>
    // 1.導入
    import Main from '@/views/Main'
    export default {
        // 2.註冊
        components: {
            Main: Main
        }
    }
</script>
<style>
    html, body {
        margin: 0;
    }
</style>

Django跨域問題

什麼是跨域

'''
一般狀況下，A網頁訪問B服務器資源時，不知足如下三個條件其一就是跨域訪問
1. 協議不一樣
2. 端口不一樣
3. 主機不一樣
'''

Django解決跨域

'''
安裝django-cors-headers模塊

在settings.py中配置
# 註冊app
INSTALLED_APPS = [
    ...
    'corsheaders'
]
# 添加中間件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
# 容許跨域源
CORS_ORIGIN_ALLOW_ALL = True
'''