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>
我们需要在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的更多相关文章
- python 全栈开发,Day90(Vue组件,前端开发工具包)
昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...
- day90:luffy:路飞项目前端部署
目录 1.域名备案 2.域名解析 3.设置安全组 4.部署架构图 5.一些准备工作 6.docker 7.把前端项目通过nginx容器来运行 1.域名备案 腾讯云先要进行域名实名认证,实名认证三天后才 ...
- 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...
- 国内某Python大神自创完整版,系统性学习Python
很多小伙伴纠结于这个一百天的时间,我觉得完全没有必要,也违背了我最初放这个大纲上来的初衷,我是觉得这个学习大纲还不错,自学按照这个来也能相对系统的学习知识,而不是零散细碎的知识最后无法整合,每个人的基 ...
- 22期老男孩Ptython全栈架构师视频教程
老男孩Ptython全栈架构师视频教程 Python最新整理完整版22期视频教程 超60G课程容量<ignore_js_op> <ignore_js_op> <ignor ...
- sql改写优化:简单规则重组实现
我们知道sql执行是一个复杂的过程,从sql到逻辑计划,到物理计划,规则重组,优化,执行引擎,都是很复杂的.尤其是优化一节,更是内容繁多.那么,是否我们本篇要来讨论这个问题呢?答案是否定的,我们只特定 ...
随机推荐
- WEB服务器、HTTP服务器、应用服务器、IIS
转载:https://www.cnblogs.com/brant/p/7209042.html Web服务器: 基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.与 ...
- python基础之数据的三大结构
python的三大数据结构 1.顺序 2.分支 3.循环 # if语句联系# 如果age小于18岁,则打印信息“未成年”age = 17if age <= 18: print("未成年 ...
- 中软高科WEB前端面试题
一个朋友面试的题目,百度了一下这个中软高科貌似是一个培训机构...以下答案是我本人的理解,仅供参考 HTML+CSS 1.你能解释一下css的盒子模型吗? 有两种盒子模型:IE盒子模型,W3C盒子模型 ...
- PostGIS中生成GUID字段值
create extension "uuid-ossp" update base_region set region_id = uuid_generate_v4() update ...
- 贝塞尔曲线UIBezierPath简单使用
//常用属性 /* 1.CGPath: 将UIBezierPath类转换成CGPath 2.currentPoint: 当前path的位置,可以理解为path的终点 3.lineWidth: 线条宽度 ...
- Sender IP字段为"0.0.0.0"的ARP请求报文
今天在研究免费ARP的过程中,抓到了一种Sender IP字段为“0.0.0.0”的ARP请求报文(广播),抓包截图如下: 这让我很疑惑.一个正常的ARP请求不应该只是Target MAC字段为全0吗 ...
- centos7系统下hostname解析
hostnamectl 是在 centos7以上版本 中新增加的命令,它是用来修改主机名称的,centos7 修改主机名称会比以往容易许多. 首先了解下这个命令 # hostnamectl -h -h ...
- window下上传文件至linux(windows下如何访问linux)
========相信我,按照步骤来一定能成功====== 我将从三个方面来说明:为什么要搭建访问服务器.如何搭建访问服务器.windows如下访问 为什么要搭建访问Linux服务器 我们都知道,服务器 ...
- React路由 + 绝对路径引用
路由: 哈希路由(在url地址后加 #name) // 实现页面监听 window.onhashchange = function(){ console.log(‘hash:’,window.lo ...
- 【记录】GIT 常用命令记录
1. 查看所有的提交版本,包含当你co到之前提交版本后依旧可以看到以前的日志 git log --graph --pretty=format:'%h -%d %s (%cr)' --abbrev-co ...