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. CSS之设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

  2. element-ui select组件中复选时以字符串形式显示

    我使用的element-ui的版本是1.4.13. 如上图所示,使用el-select组件,要实现可搜索.可复选.可创建条目时,展示样式是如上图所示,输入框的高度会撑开,影响页面布局,按照产品的需求, ...

  3. Windows下判断jdk是否安装好以及环境变量是否配置好

    cmd下执行: 1.java 2.javac 3.where java 如果三个都没问题,说明安装成功&环境变量配置成功

  4. logo.ico在html网页中的实现

    <!doctype html><html> <head> <meta charset="utf-8"/> <title> ...

  5. AWT初步— 事件处理模型

    之前学习的内容只能形成一个用户界面,而用户不能对其有实际的操作,也就是说用户界面没有任何功能.要能够让图形界面接收用户的操作,就必须给各个组件加上事件处理机制.在事件处理的过程中,主要涉及三类对象: ...

  6. tab 页形式展现多张报表

    业务系统中,很多报表都是沿用之前 EXCEL 的报表样式,原来以 sheet 格式显示的表,客户在 web 端展现的时候也希望也有同样的格式,润乾在实现这种效果和 EXCEL 一样简单灵活,轻松将数据 ...

  7. gson解析json

    json介绍 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript 规范的一个子集,采用完全独立于编程语言的文本 ...

  8. 关于string指针

    string str("hello world"); string *pstr = &str; cout << pstr[0] << endl; c ...

  9. 百度纯CSS生成菜单

    首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a ...

  10. Java的学习路线建议(转)

    https://www.cnblogs.com/huaxingtianxia/p/5724093.html