Vue

 一、vue环境配置及基本使用

vue环境搭建

#1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

#2) 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

#3) 安装脚手架
cnpm install -g @vue/cli


#注：如果2/3两步出错
npm cache clean --force

 

 创建vue

#4) 进入要存放项目的目录(CMD)
    cd /d D:\vue         #cd /d 然后把文件压托到cmd,/d 不用进D盘，快速切到D盘

#5) 创建项目
vue create 项目名

#创建后，用pycharm，打开文件即可



#6) 进入项目目录
cd 项目名

#7) 启动项目
npm run serve

#8) 停止项目
ctrl+c

pycharm开发vue环境设置

#需要安装vue.js插件
    setting--->plugins--->左下方install---->去搜索---->下载--->重启
#运行vue项目
    editconfigration(启动django的小三角）--->+--->npm--->run serve 

 

 

vue目录结构

#node_modules:项目依赖(以后项目要传到git上,这个不用传，后期需要用npm install)
#publish--->index.html  是总页面
#src :项目开发        
        #assets:静态资源
        #components:组件
        #views:视图组件
        #APP.vue:根组件
        #main.js :总的入口js
        #router.js :路由相关,所有路由的配置,在这里面
        #store.js  :vuex状态管理器
#package.json:项目的依赖,npm install 是根据它来安装依赖的


    #每个组件会有三部分:
        template
        style
        script

新建组件

#1、创建组件
    在views中创建一个vue文件
#2、去路由做配置（router.js中）
            import Course from './views/Course.vue'      
            {
              path: '/course',         
              name: 'course',
              component: Course}
#使用（App.vue中）
    <router-link to="/course">创建项目</router-link>

 

#自己创建的vue文件中
<template>
  <div class="about">
    <h1>课程</h1>
    {{person}}
    {{qqq}}
    <p v-for="c in li">    #可以循环取值，
      {{c}}
    </p>

  </div>
</template>


<script>        #注意在script标签内
  export default {
      data:function () {
          return{
              li:[1,2,3,4],
              person:{name:'pdun',age:1},
              qqq:'我是qqq',
          }
      }
  }


</script>

 

<template>
  <div class="about">
    <h1>课程</h1>
    <button @click="text">点我</button>   #绑定时间，点击alert(123)
  </div>
</template>


<script>
  export default {
      methods:{
          text:function () {
              alert('123')
          }
      }
  }


</script>

 

ajax前后台交互

前台

#安装:npm install axios
#使用:
#先在main中配置:
    import axios from 'axios'
    Vue.prototype.$http=axios        #$http可以自定义任何名称
#在组件中:
methods{
    #this.$http.request().then().catch()  里边立刻放参数，如下
    this.$http.request({
        url:请求的地址
        method:请求方式
    }).then(function(response){
        ....函数回调处理
    })
}
-注意:
    this需要在上面重新赋值给一个变量
    请求成功函数内部:
        _this.course=response.data