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