vue的基本学习

总结

v-text标签： 设置标签内容
v-html标签
v-on指令： 为元素绑定事件；绑定的方法定义在methods属性中；通过this关键字可以访问定义在data中的数据
@后面的是指令的名字 比如 click就是点击事件；简写@click

v-show： 布尔值来作用于显示或不显示此标签
v-if： 布尔值来作用于显示或不显示此标签

vue项目

目录文件：

首先我们要启动服务，在package.json文件中找到"serve": “vue-cli-service serve”,然后在终端中执行命令npm run serve

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

main.js文件： 配置路由文件

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router/index";
import echarts from 'echarts'
import axios from 'axios'
import qs from 'qs';

// axios.defaults.baseURL = 'http://localhost:8088'
Vue.prototype.$qs = qs;
Vue.prototype.$http = axios
// 导入全局样式表
import './assets/css/global.css'

Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts;

new Vue({
  render: h => h(App),
  router, //使用路由配置
}).$mount('#app')

上面可以看到所有的路由配置为router，而import router from “./router/index”;这句代码可以看到router是在router文件夹下的index.js里配置的。所以我来到router文件夹下的index.js中配置具体路由。
index.js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Config from '../views/Config.vue'
import Application from '../views/Application.vue'
import Zhuye from '../views/Zhuye'
import Success from '../views/Success.vue'
import Error from '../views/Error.vue'
import Extraction from '../views/Extraction.vue'
import Move from '../views/Move.vue'
import Login from '../components/Login.vue' //从文件引入的路径
import Main from '../views/main.vue'
import App from '../App.vue'
import Index from '../components/Index.vue'
import Main2 from '../views/main2.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  //配置默认的路径，默认显示登录页
  {
    path: '/',
    redirect: '/login'
  }, {
    path: '/',
    component: Main,
    meta: { title: '主页' },
    children: [ //子路由
      {
        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: '/config',
        name: 'config',
        component: Config //路径，指向引入的路径
      },
    ]},
]

const router = new VueRouter({
  routes
})

export default router

找到引入文件的路径，取文件夹下找到此文件，在文件中编写前端界面
编写前端界面时可以使用element-ui组件，我在做此前端界面时使用了组件中的布局容器，按钮，表单等。
根据上面我们启动服务时，先进行登录，进入主页，点击导航栏，main界面跟着进行变化，这时候我们应将路由出口赋给main
**app.vue文件:**配置路由出口文件

<template>
  <div id="app">
    <!-- 路由的出入口，路由的内容将被显示在这里 -->
    <router-view/>
  </div>
</template>
 
<script>
  export default {
    name: 'App'
  }
</script>

首页：

<template>
  <div id="app" height="100%">
    <el-container>
      <el-header
        ><img
          src="../assets/logo.jpg"
          style="
            width: 100px;
            height: 60px;
            float: left;
            margin-left: 150px;
            margin-top: 1px;
          " />
        <span style="float: left; margin-left: 380px; color: grey"
          >欢迎使用ATM提款机</span
        >
        <i class="el-icon-setting"></i
      ></el-header>
      <el-container>
        <el-aside width="200px"
          ><el-menu default-active="/home" class="el-menu-vertical-demo" router>
            <el-menu-item index="/zhuye">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <span>个人查询</span>
              </template>
              <el-menu-item index="/config">余额查询</el-menu-item>
              <el-menu-item index="/application">历史查询</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <span>账户操作</span>
              </template>
              <el-menu-item index="/about">存钱</el-menu-item>
              <el-menu-item index="/extraction">取钱</el-menu-item>
              <el-menu-item index="/move">转账</el-menu-item>
            </el-submenu>
          </el-menu></el-aside
        >
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
  <style>
.el-header {
  /* background-color: ; */
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-icon-setting {
  float: right;
  margin-top: 20px;
}
</style>
  

转账界面：

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="卡号">
        <el-input v-model="form.userid" />
      </el-form-item>
      <el-form-item label="转账">
        <el-input v-model="form.money"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
import axios from "axios";

export default {
  data() {
    return {
      form: {
        userid: "",
        money: "",
      },
    };
  },
  methods: {
    onSubmit() {
      axios//使用axios来进行前后端连接
        .post("http://localhost:8081/update", {//使用post接口
          // /gr/goods/add
          userid: this.form.userid,
          money: this.form.money,
        })
        .then(function (res) {})
        .catch(function (error) {
          // 请求失败处理
          console.log(error);
        });
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>