一、鍵盤事件，當(dāng)按鍵盤時，在控制臺輸出提示
清原網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
html 源碼：
重慶分公司
重慶分公司
VueLearn-cnblogs/xpwi
鍵盤 Events
js 源碼：
//實(shí)例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
},
methods:{
logName: function(){
console.log("你這正在輸入名字！");
},
logAge: function(){
console.log("你這正在輸入年齡！");
}
}
});上面代碼是當(dāng)用戶點(diǎn)擊輸入框后，只要按下鍵盤就會在控制臺打印一次提示，實(shí)際應(yīng)用的并不多，下面介紹當(dāng)用戶按下回車鍵時，才觸發(fā)
二、健值修飾符
下面在時間后面加上：.enter
就可以實(shí)現(xiàn)只監(jiān)聽 enter 鍵，就可以實(shí)現(xiàn)，當(dāng)用戶在輸入完成，按下回車鍵時，觸發(fā)我們自定義的事件
三、雙向數(shù)據(jù)綁定 input，selecet，textarea
適用：input，selecet，textarea 三種標(biāo)簽
js 文件種拿到 html 文件種輸入的數(shù)據(jù)，然后 html 中拿到 js 文件中的數(shù)據(jù)
源代碼 html 文件：
VueLearn-cnblogs/xpwi
鍵盤 Events
已確認(rèn)信息：
姓名：{{name}}
年齡：{{age}}
源代碼 js 文件：
//實(shí)例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name : "",
age : ""
},
methods:{
notice: function(){
//console.log("你這正在輸入年齡！");
//this.name 是 js 文件上面定義的一個 name 變量
this.name = this.$refs.userName.value;
this.age = this.$refs.userAge.value;
alert("姓名:" + this.name + " 年齡：" + this.age);
}
}
});四、雙向數(shù)據(jù)綁定 input，selecet，textarea （二）
上面數(shù)據(jù)綁定是在按下 輸入回車鍵的時候，來回的同步數(shù)據(jù)，下面介紹另一種方式，實(shí)現(xiàn)雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定第二種方法：
源代碼 html 文件：
VueLearn-cnblogs/xpwi
鍵盤 Events
同步數(shù)據(jù)：
姓名：{{name}}
年齡：{{age}}
源代碼 js 文件：
//實(shí)例化 vue 對象
new Vue({
//注意代碼格式
//el：element 需要獲取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
name : "",
age : ""
},
methods:{
notice: function(){
//console.log("你這正在輸入年齡！");
//this.name 是 js 文件上面定義的一個 name 變量
this.name = this.$refs.userName.value;
this.age = this.$refs.userAge.value;
alert("姓名:" + this.name + " 年齡：" + this.age);
}
}
});總結(jié)
以上所述是小編給大家介紹的Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
