表严肃 php,vue.js 创建一个组件

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

webpack

组件的定义

登录

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)

})

}

}

}

.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%;

}

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

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

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

//这里是组件的引用

import Controller from './components/controller'

import Login from './components/login'

export default {

//组件的注册

components: {

Login,

Controller},

name: 'App',

// 定义数据对象

data () {

return {

}

},

// 定义事件对象 methods

methods: {

}

}

/*css*/

/*铺满*/

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

width: 100%;

}

运行后