一、vue的简单使用，数据双向绑定和事件绑定以及带参跳转

直接看代码很效果图，目的就是要记录大概的写法，毕竟刚刚接触

<template>

<div class="layout">

    <div class="outer_label">

      <p class="title" id="title">

        {{ message }}

      </p>

      <img class="inner_label login_logo" src="../../../static/images/logo.gif">

    </div>

    <div class="login_form">

      <el-input v-model="input" placeholder="用户名"></el-input>

      <el-input class="input_password" v-model="password" type="password" placeholder="密码"></el-input>

      <!-- <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button> -->

      <div class="login_btn">

        <el-button @click="handleSubmit" class="btn">登录</el-button>

      </div>

      <div style="margin-top: 10px">

      <a href="#"> <span style="float: right;color: #A9A9AB">忘记密码？</span> </a>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'Login',

  data(){

    return {

      message: '小沈说事',

      password:'',

      input:'',

  }

  },

  methods:{

    handleSubmit(){

      alert("登录成功"+this.password+this.input)

    }

  }

}

</script>

代码 效果图

3、带参跳转教程