vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
準(zhǔn)備工作
首先還是創(chuàng)建一個(gè)新的頁(yè)面寫入基本代碼
v-bind單向綁定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備一個(gè)容器 --> <div id="root"> </div> <script type="text/javascript"> // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false </script> </body> </html>
簡(jiǎn)單寫一個(gè)輸入框綁定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備一個(gè)容器 --> <div id="root"> 單項(xiàng)數(shù)據(jù)綁定:<input type="text" :value="name"> </div> <script type="text/javascript"> // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'vue你好!' } }) </script> </body> </html>
頁(yè)面長(zhǎng)這樣
此時(shí)我們打開vue開發(fā)工具,動(dòng)態(tài)修改name的值,發(fā)現(xiàn)頁(yè)面的值變了
但是如果我們修改輸入框的值,開發(fā)工具里面的name不會(huì)隨著輸入框改變
因?yàn)関-bind是單向綁定的,想要實(shí)現(xiàn)這個(gè)功能,我們需要使用雙向綁定 v-model
v-model雙向綁定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備一個(gè)容器 --> <div id="root"> 單項(xiàng)數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br> 雙項(xiàng)數(shù)據(jù)綁定:<input type="text" v-model:value="name"> </div> <script type="text/javascript"> // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'vue你好!' } }) </script> </body> </html>
通過頁(yè)面我們可以發(fā)現(xiàn),我們輸入框會(huì)帶著下面的開發(fā)工具的值一起改變
既然雙向綁定這么厲害,那么我們是不是可以放棄單向綁定,一直 使用雙向綁定呢?
當(dāng)然是不可以的,我們?cè)倏匆粋€(gè)例子
首先是單向綁定,沒有任何問題
然后是雙向綁定,發(fā)現(xiàn)x已經(jīng)丟了,并且控制臺(tái)報(bào)錯(cuò)了
模板編譯失敗,v-model不支持這種類型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備一個(gè)容器 --> <div id="root"> 單項(xiàng)數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br> 雙項(xiàng)數(shù)據(jù)綁定:<input type="text" v-model:value="name"> <!-- 如下代碼是錯(cuò)誤的,因?yàn)関-model只能應(yīng)用在表單(輸入類)元素上 必須要有value值 --> <h2 v-model:x="name">你好??!</h2> </div> <script type="text/javascript"> // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'vue你好!' } }) </script> </body> </html>
總結(jié)
Vue中有兩種綁定方式
1 單項(xiàng)綁定(v-bind):數(shù)據(jù)只能從data流向頁(yè)面,可以簡(jiǎn)寫為:
2 雙項(xiàng)綁定(v-model):數(shù)據(jù)不能能從data流向頁(yè)面,還可以從頁(yè)面流向data
備注:
1雙向綁定一般都應(yīng)用在表單類元素上(比如input,select,radio等)
2 v-model:value可以簡(jiǎn)寫v-model,因?yàn)関-model默認(rèn)收集的就是value值
單向雙向綁定簡(jiǎn)寫如下
<!-- 簡(jiǎn)寫 --> 單項(xiàng)數(shù)據(jù)綁定:<input type="text" :value="name"><br> 雙項(xiàng)數(shù)據(jù)綁定:<input type="text" v-model="name">
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 準(zhǔn)備一個(gè)容器 --> <div id="root"> <!-- 單項(xiàng)數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br> 雙項(xiàng)數(shù)據(jù)綁定:<input type="text" v-model:value="name"> --> <!-- 簡(jiǎn)寫 --> 單項(xiàng)數(shù)據(jù)綁定:<input type="text" :value="name"><br> 雙項(xiàng)數(shù)據(jù)綁定:<input type="text" v-model="name"> <!-- 如下代碼是錯(cuò)誤的,因?yàn)関-model只能應(yīng)用在表單(輸入類)元素上 必須要有value值 --> <!-- <h2 v-model:x="name">你好??!</h2> --> </div> <script type="text/javascript"> // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。 Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'vue你好!' } }) </script> </body> </html>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼
這篇文章主要介紹了Vue axios全局?jǐn)r截 get請(qǐng)求、post請(qǐng)求、配置請(qǐng)求的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn)
本篇文章主要介紹了Vue2.0如何發(fā)布項(xiàng)目實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07vue使用el-upload實(shí)現(xiàn)文件上傳的實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用el-upload實(shí)現(xiàn)文件上傳,文中示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴們可以參考一下2024-01-01