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>

    我们需要在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按钮点击安装即可

day90的更多相关文章

  1. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  2. day90:luffy:路飞项目前端部署

    目录 1.域名备案 2.域名解析 3.设置安全组 4.部署架构图 5.一些准备工作 6.docker 7.把前端项目通过nginx容器来运行 1.域名备案 腾讯云先要进行域名实名认证,实名认证三天后才 ...

  3. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

  4. 国内某Python大神自创完整版,系统性学习Python

    很多小伙伴纠结于这个一百天的时间,我觉得完全没有必要,也违背了我最初放这个大纲上来的初衷,我是觉得这个学习大纲还不错,自学按照这个来也能相对系统的学习知识,而不是零散细碎的知识最后无法整合,每个人的基 ...

  5. 22期老男孩Ptython全栈架构师视频教程

    老男孩Ptython全栈架构师视频教程 Python最新整理完整版22期视频教程 超60G课程容量<ignore_js_op> <ignore_js_op> <ignor ...

  6. sql改写优化:简单规则重组实现

    我们知道sql执行是一个复杂的过程,从sql到逻辑计划,到物理计划,规则重组,优化,执行引擎,都是很复杂的.尤其是优化一节,更是内容繁多.那么,是否我们本篇要来讨论这个问题呢?答案是否定的,我们只特定 ...

随机推荐

  1. 教你读懂vue源码技术教程

    由于 Vue 的源码采用 ES6,所以你至少应该掌握 ES6 才能看得懂,其次你最好对 package.json 中的字段的作用有所了解.由于 Vue 使用 Rollup 构建,所以你不了解 Roll ...

  2. loadsh常用函数

    此篇文章会记录常用的lodash函数 防抖函数:_.debounce() 创建一个去缓冲函数,该函数将自上次调用函数以来经过设置的等待毫秒后调用func. 去缓冲函数带有一个取消方法来取消延迟的fun ...

  3. mysql 之库, 表的简易操作

    一. 库的操作 1.创建数据库 创建数据库: create database 库名 charset utf8;   charset uft8  可选项 1.2 数据库命名规范: 可以由字母.数字.下划 ...

  4. uCrop图片裁剪

    uCrop使用 github地址 https://github.com/Yalantis/uCrop然后clone或下载到本地,运行之. 效果预览 app/build.gradle compile ' ...

  5. CentOS7:搭建配置SVN服务器

    1. 安装 CentOS通过yum安装subversion. $ sudo yum install subversion subversion安装在/bin目录: $ which svnserve / ...

  6. LNMP下动静分离部署phpmyadmin软件包

    LNMP环境肯定是先要配置好的.可以参考我之前的博客.那我们直接进行配置,我这里使用了三台机器进行动静分离部署,第一台负责nginx反向代理,第二台负责php-fpm应用程序以及mariadb的服务器 ...

  7. MATLAB三维作图——隐函数

    MATLAB三维作图——隐函数 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 对于三维隐函数,没有显式表达式,无法通过Matlab现成的3-D画图函数 ...

  8. 【18】如何把数据存储到MongoDB数据库

    如何把数据存储到MongoDB数据库 时间:2018.10.31                   edit by :北鼻 一.mongoDB环境安装 需要使用mongoDB数据库的话需要安装环境, ...

  9. v-bind指令动态绑定class和内联样式style

    动态绑定class—概述 数据绑定(v-bind指令)一个常见需求是操作元素的 class 列表.因为class是元素的一个属性,我们可以用 v-bind 处理它们 我们只需要计算出表达式最终的字符串 ...

  10. 「雅礼集训 2017 Day7」事情的相似度

    「雅礼集训 2017 Day7」事情的相似度 题目链接 我们先将字符串建后缀自动机.然后对于两个前缀\([1,i]\),\([1,j]\),他们的最长公共后缀长度就是他们在\(fail\)树上对应节点 ...