vue.js 创建一个组件

环境请确定自己是编译模式编写vue （可以看这里）

webpack

组件的定义

<template>
  <!--登录组件-->
  <div id="login" class="login-box" v-if="ifLogin">
    <el-input class="login-input" v-model="user" placeholder="请输入管理员账号"></el-input>
    <br/>
    <el-input class="login-input" v-model="password" placeholder="请输入管理员密码" type="password"></el-input>
    <br/>
    <el-button class="login-btn" v-on:click="onLogin" type="primary" >登录</el-button>
  </div>

</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      user: '',
      password: '',
      ifLogin: true
    }
  },
  methods: {
    // 登录
    onLogin: function () {
      var there = this
      var instance = this.$http.create({
        headers: {'content-type': 'application/x-www-form-urlencoded'}
      })
      instance.post('https://easy-mock.com/mock/5aa916df93041f109b6e8fba/example/login/login', {
        firstName: there.user,
        lastName: there.password
      })
        .then(function (response) {
          console.log(response.data.data.iflogin)
          console.log(response)
          there.ifLogin = !response.data.data.iflogin
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>
  .login-input{
    width: 20%;
    margin-top: 2rem;
  }
  .login-btn{
    margin-top: 2rem;
    width: 20%;
  }
  .login-box{
    position: absolute;
    z-index: 1000;
    background-color: rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 10%;
  }

</style>

这是一个简单的登录组件点击登录后消失（需要安装饿了吗ui）

如果不想安装UI组件那么把上面的 ->> el-input el-button 分别改成 input 和 button <<--

现在在app.vue 中引用这个模板注意注释

<template>
  <div id="App" >
    <!--登录组件（这里是组件的使用）-->
    <login></login>
    <!--控制面板组件-->
    <controller></controller>
  </div>
</template>

<script>
//这里是组件的引用
import Controller from './components/controller'
import Login from './components/login'
export default {
//组件的注册
  components: {
    Login,
    Controller},
  name: 'App',
  // 定义数据对象
  data () {
    return {

    }
  },
  // 定义事件对象 methods
  methods: {

  }

}
</script>

<style>
/*css*/
  /*铺满*/
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    height: 100%;
    width: 100%;
  }

</style>

运行后

vue.js 创建一个组件

猜你喜欢