最近在學習vue，發現了vue的好多坑，比如怎麼更好的獲取input框輸入的值而減少獲取dom節點的消耗 ，以及怎麼繫結一個函式，去執行業務邏輯。

1、首先說說怎麼獲取input框的值

vue中提供了一個ref屬性，這裡需要在html程式碼中用ref屬性來繫結這個input框，再通過js程式碼來獲取input的值：

HTML程式碼：

<input type="text" v-model="test1" placeholder="請輸入賬號" maxlength="11"  ref="input1" >

js程式碼： 

this.test1 = this.$refs.input1.value;//獲取input1的值，減少獲取dom節點的消耗    
 

2、如何利用vue實現登陸功能：

這裡用到@click來繫結一個點選事件

html程式碼：

<template>
	<div>
		<ul>
			<li>
				<div>
					賬號：
					<input type="text" v-model="test1" placeholder="請輸入賬號" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " ref="input1" @blur="changeName(test1)"><br /> 密碼：
					<input type="password" v-model="test2" placeholder="請輸入密碼" ref="input2" @blur="changeName1(test2)"><br /> 驗證碼：
					<input type="text" v-model="test3" placeholder="請填寫驗證碼" ref="input3">
					<button @click="getYzm">{{codeText}}</button><br />
				</div>
			</li>
		</ul>
		<div @click="loginBtn()">點選登入</div>
	</div>
</template>
 

js程式碼：data用來存放資料，methods中存放上面定義的事件，如click事件。需要注意的是vue定義事件的寫法。

this.$message('請輸入驗證碼');//這個是element提供的一個訊息提示，類似於layer.msg();

<script type="text/javascript">
	export default {
		data() {
				return {
					test1: '',
					test2: '',
					test3: '',
					codeText: '獲取驗證碼',
				}
			},

			methods: {
				//獲取驗證碼
				getYzm() {
					let reg = /^1[0345789][0-9]{9}$/;
					if(this.test1 == '' || this.test2 == "") {//驗證當用戶輸入的手機號為空或者不正確時不能進行獲取驗證碼
						this.$message({
							message: '手機號密碼不能為空！',
							type: 'warning'
						});
					} else if(!reg.test(this.test1)) {
						this.$message.error("請輸入正確的手機號");
					} else {
						this.timer();
						console.log(this.test1);
					}

				},
				timer() {//驗證碼倒計時
					let num = 60;
					let that = this;
					that.codeText = num + "秒後重新發送";
					let time = setInterval(function() {
						if(num == 0) {
							clearInterval(time);
							time = null;
							that.codeText = "重發驗證碼";
						} else {
							num--;
							that.codeText = num + "秒後重新發送";
						}

					}, 1000);
				},
				//使用者名稱的失去游標判斷
				changeName(userName) {
					let name = userName;
					if(name == '' || name == undefined || name == null) {
						// 使用者名稱為空時，input框獲得焦點
						this.$refs.input1.focus();
					} else {
						console.log(name);
					}
				},
				//密碼框失去游標判斷
				changeName1(pass) {
					if(pass == '' || pass == undefined || pass == null) {
						// 密碼為空時，input框獲得焦點
						this.$refs.input2.focus();
					} else {
						console.log(pass);
					}
				},
				loginBtn() {
					//一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節點，然後在獲取input1的值。但是用ref繫結之後，我們就不需要在獲取dom節點了，直接在上面的input上繫結input1，然後$refs裡面呼叫就行。然後在javascript裡面這樣呼叫：this.$refs.input1  這樣就可以減少獲取dom節點的消耗了
					this.test1 = this.$refs.input1.value;//獲取input1的值，減少獲取dom節點的消耗    
					this.test2 = this.$refs.input2.value;
					this.test3 = this.$refs.input3.value;
					if(this.test3 == '') {
						this.$message.error('請輸入驗證碼');
					} else {
						this.$message({
							message: '恭喜你，登陸成功！',
							type: 'success'
						});
						console.log(this.test1);//打印出input框輸入的值
						console.log(this.test2);
						console.log(this.test3);

					}
				},

			}
	}
</script>
 

vue安裝element-ui

1.安裝命令：cnpm install element-ui --save

2.在main.js中加入如下程式碼：

import ElementUi from 'element-ui'
import '../node_modules/element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUi)

3. 輸入命令：npm run dev 執行專案