一  VUE的安装与项目创建

1.1、安装nodeJS

1.2、安装脚手架

  • vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

  • 安装全局vue::npm install -g @vue/cli
  • 在指定目录下创建vue项目:

1.先在cmd界面中选择到要创建项目文件夹下: cd /D E:\vue_project

2.vue create my-project(项目名称)

3.在cmd中创建的时候的一些选项:

4.项目创建成功显示的结果如下,然后切到创建的项目文件夹下:cd project_t

5.运行项目:  npm run serve

或者可以用图形化界面创建: vue ui

二  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 是根据它来安装依赖的  

三  Pycharm开发vue项目

1.需要安装vue.js插件
  -setting--->plugins--->左下方install---->去搜索---->下载--->重启
2.运行vue项目
  -editconfigration--->+--->npm--->run serve

四  与django打通数据

1.每个组件会有三个部分:

-template
-style
-script

2.新组件创建

  • -创建一个组件
  • -去路由做配置:
import Course from './views/Course.vue'
{
path: '/course',
name: 'course',
component: Course
}
  • 在views的app中
<router-link to="/course">专题课程</router-link>

3.显示数据

  • script中:
  export default {
data:function () {
return{ course:['python','linux'],
aa:'我是aa'
}
}

4.方法绑定

<button @click="init">点我</button>

-script
methods: {
init: function () {
alert('111')
}
}

5.vue中向django后台发送数据

相当于ajax:

-axios
-安装:npm install axios
-使用:
-先在main中配置:
import axios from 'axios'
Vue.prototype.$http=axios
-在组件中:
this.$http.request().then().catch()
this.$http.request({
url:请求的地址
method:请求方式
}).then(function(response){
....函数回调处理
})
-注意:
this需要在上面重新赋值给一个变量
请求成功函数内部:
_this.course=response.data

 

VUE的安装与Django之间打通数据的更多相关文章

  1. 解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  2. Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  3. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  4. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  5. Vue之组件之间的数据传递

    Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...

  6. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  7. (转)Vue 爬坑之路(二)—— 组件之间的数据传递

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...

  8. vue 组件之间的数据传递

    父组件传数据给子组件 创建数据 获取json数据 子组件传数据给父组件 1. 子组件使用$emit监听数据 getAreaValues(){ this.$emit('getAreaValues', { ...

  9. vue的安装配置与项目创建

    1,安装vue必须先安装node.js.  --------去官网安装node.js 因为npm依赖node.js环境,使用npm的时候需要安装node.js.安装node.js的时候npm会默认安装 ...

随机推荐

  1. 字符集导致乱码问题,gi安装问题

    今天是2014-4-24,今天中午收到一个天津网友问的一个安装gi的问题,和一个网友问的字符集问题:在此整理一下 问题一: gi安装问题: 问题描写叙述: 在安装gi的时候提示:"INS-2 ...

  2. org.apache.hadoop.hbase.DoNotRetryIOException: Class org.apache.phoenix.coprocessor.MetaDataEndpointImpl cannot be loaded Set hbase.table.sanity.checks to false at conf or table descriptor if you want

    https://stackoverflow.com/questions/38495331/apache-phoenix-unable-to-connect-to-hbase 这个坑不该啊 首选配置hb ...

  3. SQL select查询原理--查询语句执行原则<转>

    1.单表查询:根据WHERE条件过滤表中的记录,形成中间表(这个中间表对用户是不可见的):然后根据SELECT的选择列选择相应的列进行返回最终结果. 1)简单的单表查询 SELECT 字段 FROM ...

  4. 递归删除子目录下所有.la后缀文件

    删除当前目录及其子目录下的后缀名.la的所有文件 find ./ -name '*.la' | xargs rm -f

  5. eclipse代码补全按键修改成Tab

    https://www.eclipse.org/downloads/compare.php?release=oxygen 下载eclipse带有源文件的版本 打开Eclipse,点击 window - ...

  6. Java Spring Boot: Unable to determine jdbc url from datasource

    如果你和我一样从github或码云上下载了一个几年前别人写的demo代码,想用来做学习用.编译的时候遇到下面这样的错误,然后死命上网查各种方案,百试不灵.试尽了各种方案,就是还连接不上数据库.你可以试 ...

  7. JQuery EasyUI DataGrid动态合并(标题)单元) 一

    JS: /** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如:&q ...

  8. 重新=》easyui DataGrid是否可以动态的改变列显示的顺序

    $.extend($.fn.datagrid.methods,{ columnMoving: function(jq){ return jq.each(function(){ var target = ...

  9. yum 安装 influxdb/telegraf

    环境:centos 7 参考官网教程:http://docs.influxdata.com/telegraf/v1.9/introduction/installation/ 添加 yum 源: vim ...

  10. 第二百七十三节,Tornado框架-文件上传

    Tornado框架-文件上传 第一.普通表单上传文件 self.request.files["fafafa"] 获取上传文件信息,参数["上传文件框的name名称&quo ...