1.相關組件安裝 axios iview js-cookie crypto-jsvue
2.子父組件傳值、監聽窗體大小改變、記住密碼 、自定義組件(事件 、props)ios
created:實例已經建立完成以後被調用。在這一步,實例已完成如下的配置:數據觀測(data observer),屬性和方法的運算, watch/event 事件回調。然而,掛載階段還沒開始,$el 屬性目前不可見。vuex
mounted:el 被新建立的 vm.$el 替換,並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素,當 mounted 被調用時 vm.$el 也在文檔內。axios
destroyed:Vue 實例銷燬後調用。調用後,Vue 實例指示的全部東西都會解綁定,全部的事件監聽器會被移除,全部的子實例也會被銷燬。cookie
computed:計算屬性,只在初始化時被調用。app
methods: 裏面是用來定義函數的,很顯然,它須要手動調用才能執行。而不像watch和computed。less
watch:相似於監聽機制+事件機制iview
父組件:函數
1 <style lang="less"> 2 @import "./login.less"; 3 </style> 4 5 <template> 6 <div class="login"> 7 <div class="header Cblue"> 8 <div class="wrapper clearfix"> 9 <h1>VUE+IVIEW V1.0</h1> 10 <span class="QRspan"> 11 <Icon type="logo-googleplus" size="24" /> 12 <span>關注公衆號</span> 13 <img class="QRimg" src="../../assets/images/qr.png" /> 14 </span> 15 </div> 16 </div> 17 <div class="content" :style="{height: screenHeight}"> 18 <div class="wrapper"> 19 <img class="bg1" src="../../assets/images/bg1.png" /> 20 <div class="loginBox"> 21 <div class="logo"> 22 <img src="../../assets/images/logo.png" /> 23 </div> 24 <div class="formDiv"> 25 <login-form @on-success-valid="handleSubmit" :username="localusername" :userpwd="localuserpwd"></login-form> 26 </div> 27 </div> 28 </div> 29 </div> 30 <div class="footer"> 31 <div class="wrapper"> 32 <span>Copyright © 2019-2020 Lin.Su</span> 33 </div> 34 </div> 35 </div> 36 </template> 37 38 <script> 39 import LoginForm from '_c/login-form' 40 import { mapActions } from 'vuex' 41 export default { 42 components: { 43 LoginForm 44 }, 45 data () { 46 return { 47 screenHeight: '' 48 } 49 }, 50 methods: { 51 ...mapActions(['handleLogin', 'svaeUserInfo']), 52 handleSubmit ({ userName, password, remember }) { 53 this.handleLogin({ userName, password }).then(res => { 54 const user = res.userinfo 55 user.pwd = password 56 if (res.code === 200) { 57 this.svaeUserInfo({ user, remember }) 58 this.$router.push({ 59 name: this.$config.homeName 60 }) 61 } else { 62 this.$Message.error({ 63 content: res.msg, 64 duration: 10 65 }) 66 } 67 }).catch(err => { 68 if (err.message === 'NetWorkeError') { 69 this.$Message.error({ 70 content: '接口服務異常', 71 duration: 10 72 }) 73 } 74 }) 75 }, 76 getHeight () { 77 let windowHeight = document.documentElement.clientHeight 78 this.screenHeight = windowHeight - 102 - 138 + 'px' 79 } 80 }, 81 created () { 82 window.addEventListener('resize', this.getHeight) 83 this.getHeight() 84 }, 85 mounted () { 86 const that = this 87 window.onresize = () => { 88 that.getHeight() 89 } 90 }, 91 computed: { 92 localusername () { 93 var userinfo = JSON.parse(this.$store.state.user.userinfo) 94 if (userinfo) { 95 return userinfo.username 96 } 97 return '' 98 }, 99 localuserpwd () { 100 var userinfo = JSON.parse(this.$store.state.user.userinfo) 101 if (userinfo) { 102 return userinfo.pwd 103 } 104 return '' 105 } 106 }, 107 watch: { 108 screenHeight (val) { 109 this.screenHeight = val 110 } 111 } 112 } 113 </script> 114 115 <style> 116 </style>
子組件ui
1 <template> 2 <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit"> 3 <FormItem prop="userName"> 4 <Input v-model="form.userName" placeholder="請輸入用戶名"> 5 <span slot="prepend"> 6 <Icon :size="16" type="ios-person"></Icon> 7 </span> 8 </Input> 9 </FormItem> 10 <FormItem prop="password"> 11 <Input type="password" v-model="form.password" placeholder="請輸入密碼"> 12 <span slot="prepend"> 13 <Icon :size="14" type="md-lock"></Icon> 14 </span> 15 </Input> 16 </FormItem> 17 <FormItem label="記住密碼"> 18 <i-switch v-model="form.remember" size="large"> 19 <span slot="open">開</span> 20 <span slot="close">關</span> 21 </i-switch> 22 </FormItem> 23 <FormItem> 24 <Button @click="handleSubmit" type="primary" long>登陸</Button> 25 </FormItem> 26 </Form> 27 </template> 28 <script> 29 export default { 30 name: 'LoginForm', 31 props: { 32 userNameRules: { 33 type: Array, 34 default: () => { 35 return [{ required: true, message: '帳號不能爲空', trigger: 'blur' }] 36 } 37 }, 38 passwordRules: { 39 type: Array, 40 default: () => { 41 return [{ required: true, message: '密碼不能爲空', trigger: 'blur' }] 42 } 43 }, 44 userpwd: { 45 type: String, 46 default: '' 47 }, 48 username: { 49 type: String, 50 default: '' 51 } 52 }, 53 data () { 54 return { 55 form: { 56 userName: this.username, 57 password: this.userpwd, 58 remember: false 59 } 60 } 61 }, 62 computed: { 63 rules () { 64 return { 65 userName: this.userNameRules, 66 password: this.passwordRules 67 } 68 } 69 }, 70 methods: { 71 handleSubmit () { 72 this.$refs.loginForm.validate(valid => { 73 if (valid) { 74 this.$emit('on-success-valid', { 75 userName: this.form.userName, 76 password: this.form.password, 77 remember: this.form.remember 78 }) 79 } 80 }) 81 } 82 } 83 } 84 </script>
3.效果展現