day90

Vue项目简介

　　　最终效果：Vue通过axios发请求给Django后台，Django返回数据给Vue

　　创建项目：

	创建vue项目:
		-安装node.js
		-vue脚手架
		-vue create 项目名字
	pycharm开发vue项目
		-需要安装vue.js插件
			-setting--->plugins--->左下方install---->去搜索---->下载--->重启
		-运行vue项目
			-editconfigration--->+--->npm--->run serve 
			
	vue目录结构:
		-node_modules:项目依赖(以后项目要传到git上,这个不能传)
		-publish--->index.html  是总页面
		-src :项目
			-assets:静态资源
			-components:组件
			-views:视图组件
			-APP.vue:根组件
			-main.js :总的入口js
			-router.js :路由相关,所有路由的配置,在这里面
			-store.js  :vuex状态管理器
		-package.json:项目的依赖,npm install 是根据它来安装依赖的
	每个组件会有三部分:
		-template
		-style
		-script

　　新建组件：

　　　　在views文件下创建一个新的组件

<template>
    <div class="course">
        <button class="btn" @click="ck">点击查看</button>
        <h1>课程列表</h1>
        <p>{{ course}}</p>
        <p>{{info}}</p>
        <p v-for="c in course">{{c}}</p>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                course: ['aa', 'bb'],
                info: ['郑棒', '徐都会']
            }
        },
        methods: {
            clk: function () {
                alert('123')
            },
            ck: function () {
                let _this = this;
                this.$http.request({
                    url: 'http://127.0.0.1:8001/test/',
                    method: 'post',
                }).then(function (response) {
                    _this.course = response.data
                }).catch(function () {
                    alert('请求失败')
                })
            }
        },
    }
</script>

View Code

　　　　我们需要在router中配置路由

import Course from './views/other.vue'
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/course',
            name: 'course',
            component: Course,
        }
    ]
})

　　　　并且在主组件上配置

 

　　　　data对应的数据页面上可以直接通过{{ 变量名 }}使用

data: function () {
            return {
                course: ['aa', 'bb'],
                info: ['郑棒', '徐都会']
            }
        }

　　method对应的是一些函数方法，tmeplate中的标签可以直接绑定(@click="ck")

methods: {
            clk: function () {
                alert('123')
            },
            ck: function () {
　　　　　　　　　　// 为了能直接在组件直接能使用course所以要将this赋值进去，不然在里面直接使用this指向的是该方法
                let _this = this;
                this.$http.request({
                    url: 'http://127.0.0.1:8001/test/',
                    method: 'post',
                }).then(function (response) {
                    _this.course = response.data
                }).catch(function () {
                    alert('请求失败')
                })
            }
        },

　为pycharm配置Vue高亮：

 若没有下载过，右边框中有一个install按钮点击安装即可

 

 

转载于:https://www.cnblogs.com/yaoxiaofeng/p/10158584.html