<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>使用者名：</span>
<span>
//lazy 修飾符，input狀态發生改變時 change 事件之後進行同步：
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
偵聽器
1、采用偵聽器監聽使用者名的變化
2、調用背景接口進行驗證
3、根據驗證的結果調整提示資訊
*/
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
checkName: function(uname) {
// 調用接口，但是可以使用定時任務的方式模拟接口調用
var that = this;
setTimeout(function(){
// 模拟接口調用
if(uname == 'admin') {
that.tip = '使用者名已經存在，請更換一個';
}else{
that.tip = '使用者名可以使用';
}
}, 2000);
}
},
watch: {
uname: function(val){
// 調用背景接口驗證使用者名的合法性
this.checkName(val);
// 修改提示資訊
this.tip = '正在驗證...';
}
}
});
</script>
</body>
</html>
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)