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
'''