VUE

什么是vue？

可以独立完成前后端分离式web项目的JavaScript框架

为什么要用vue?

三大主流框架之一：Angular React Vue

先进的前端设计模式：MVVM

可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发。

vue项目的创建

1.环境搭建

安装node.js

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

安装cnpm

#npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

#cnpm install -g @vue/cli

清空缓存处理

#npm cache clean --force

2.项目的创建

#vue create 项目名
#要提前进入目标目录(项目应该创建在哪个目录下)
#选择自定义方式创建项目，选取Router, Vuex插件

在pycharm中开发vue:

#Edit-conf----》点+  选npm-----》在script对应的框中写：serve

3.vue项目的目录结构

#node_modules: 项目依赖
#public: 共用资源
    #--favicon.ico 网页的图标
    #--index.html 主页面
#src:项目目标，书写代码的地方
    #--assets:静态文件
    #--components：组件
    #--views: 视图组件
    #--App.vue:根组件
    #--main.js:项目主入口js
    #--router.js:路由相关，配置路由
    #--store.js:vuex相关，状态管理器
#package.json:项目的依赖文件

#注：上传项目只需要把package.json文件上传即可，后续可以通过npm install来下载项目的依赖，就会自动生成node_modules文件夹

组件

每个组件通常有三个部分组成：template(写一些html代码)，style(样式)，script(js代码)。

创建组件：

'''
创建一个Course.vue文件
配置路由：route.js中
    import Course from '.views/Course.vue'
    routes: [
        {
            path: '/course',
            name: 'course',
            component: Course
        },]
    
    在vue文件中：
     <router-link to="/course">免费课程</router-link>  实现路由跳转
    
'''

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Course from './views/Course.vue'


Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        },
        {
            path: '/courses',
            name: 'courses',
            component: Course
        },
        
    ]
})

显示数据：

'''
在script中：
    data:function() {
        return {
            courses:['python','linux','java']
        }
}
在template中就可以使用return的变量
    {{ courses }}
    用v-for显示数据
    <ul>
        <li v-for="course in courses">{{course}}</li>
    </ul>
'''    

与后台交互：

'''
通过axios来发送请求，类似与ajax

安装：npm install axios

axios使用：
1.在main.js中：
    导入axios:
        import axios from 'axios'
    放到全局变量中：
        Vue.prototype.$http=axios
2.在组件中使用（在script中，写在methods中）：
    this.$http.request({
        url:请求的地址
        method:请求方式
}).then(function(response){
        //请求成功会回调该匿名函数
        //取实际返回的值response.data中取
}).catch(function(error){
        //请求出现错误，回调该匿名函数
})
'''

代码实现：

import Vue from 'vue'
import router from './router'
import store from './store'
import axios from 'axios'
import App from './App.vue'


Vue.prototype.$http = axios;
Vue.prototype.$url = 'http://127.0.0.1:8000/';


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

<template>
    <div class="about">
        <div class="header">
            <Header></Header>
        </div>
        <el-row>
            <el-col :span="20" :offset="2" style="padding: 30px 0;">
                <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 0;" class="course-list">
                        <ul>
                            <li>课程分类：</li>
                            <li>全部</li>
                            <li v-for="course in courses">{{ course.title }}</li>
                        </ul>
                        <hr style="margin: 0">
                        <ul>
                            <li>筛选：</li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" v-for="course in courses" :offset="2" style="padding: 30px 0;">
                <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 14px;height: 200px">
                        <img :src="course.course_img" class="image" style="height: 200px;float: left">
                        <h3>{{ course.title }}</h3>
                        <div class="bottom">
                            <el-button type="text" class="button">立即购买</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

</template>
<script>
    import Header from '../components/Header'

    export default {
        name: 'about',
        components: {
            Header
        },
        data: function () {
            return {
                courses: [],

            }
        },
        methods: {

            init: function () {

                let _this = this;
                this.$http.request(
                    {
                        url: 'http://127.0.0.1:8000/courses/',
                        method: 'get',
                    })
                    .then(function (response) {
                        _this.courses = response.data.data
                    })
                    .catch(function (response) {
                        }
                    )
            }
        },
        mounted: function () {
            this.init()
        }
    }
56
</script>

<style>
    .header {
        height: 71px;
    }

    body {
        background-color: #f6f6f6;
    }
    ul {
        list-style: none;
        height: 49px;
    }
    .course-list li {
        line-height: 49px;
        height: 49px;
        padding: 0 20px;
        float: left;
    }
    .el-menu--horizontal > .el-menu-item.is-active {
        border-bottom: 4px solid orange;
    }
</style>

Element-ui

在vue项目中使用：

安装：npm i element-ui -S

使用：

#1.在main.js中
        import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
#2.选择你要的模板，直接在官网上copy，再进行修改

element-ui官网