詳解vue 表單綁定與組件
Vue.js是一個(gè)MV VM框架， 即數(shù)據(jù)雙向綁定， 即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候， 視圖也就發(fā)生變化， 當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。這也算是Vue.js的精髓之處了。 值得注意的是，我們所說的數(shù)據(jù)雙向綁定，一定是對(duì)于UI控件來說的非UI控件不會(huì)涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提。如果我們使用vue x那么數(shù)據(jù)流也是單項(xiàng)的，這時(shí)就會(huì)和雙向數(shù)據(jù)綁定有沖突。
1、為什么要實(shí)現(xiàn)數(shù)據(jù)的雙向綁定在Vue.js中，如果使用vuex， 實(shí)際上數(shù)據(jù)還是單向的， 之所以說是數(shù)據(jù)雙向綁定，這是用的UI控件來說， 對(duì)于我們處理表單， Vue.js的雙向數(shù)據(jù)綁定用起來就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單項(xiàng)，方便跟蹤；局部性數(shù)據(jù)流使用雙向，簡(jiǎn)單易操作。
二、在表單中使用雙向數(shù)據(jù)綁定你可以用v-model指令在表單、及元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇， 但v-model本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。 注意：v-model會(huì)忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過JavaScript在組件的data選項(xiàng)中聲明初始值!
1、單行文本<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 輸入的文本：<input type='text' v-model='message' value='hello'>{{message}}</div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ message:'' } });</script></body></html>2、多行文本
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 多行文本：<textarea v-model='pan'></textarea> 多行文本是：{{pan}}</div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ pan:'Hello hello!' } });</script></body></html>3、單復(fù)選框
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 單復(fù)選框： <input type='checkbox' v-model='checked'> <label for='checkbox'>{{checked}}</label></div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ checked:false } });</script></body></html>4、多復(fù)選框
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 多復(fù)選框： <input type='checkbox' value='Jack' v-model='checkedNames'> <label for='jack'>Jack</label> <input type='checkbox' value='Join' v-model='checkedNames'> <label for='join'>Jack</label> <input type='checkbox' value='Mike' v-model='checkedNames'> <label for='mike'>Mike</label> <span>選中的值：{{checkedNames}}</span></div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ checkedNames:[] } });</script></body></html>5、單選按鈕
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 單選框按鈕 <input type='radio' value='One' v-model='picked'> <label for='one'>One</label> <input type='radio' value='Two' v-model='picked'> <label for='two'>Two</label> <span>選中的值：{{picked}}</span></div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ picked:’Two’ } });</script></body></html>6、下拉框
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> 下拉框: <select v-model='pan'> <option value='' disabled>---請(qǐng)選擇---</option> <option>A</option> <option>B</option> <option>C</option> <option>D</option> </select> <span>value:{{pan}}</span></div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> var vm = new Vue({ el:'#app', data:{ pan:'A' } });</script></body></html>
注意：v-model表達(dá)式的初始值未能匹配任何選項(xiàng)，元系將被渲染為“未選中”狀態(tài)。 在iOS中， 這會(huì)使用戶無法選擇第一個(gè)選項(xiàng)，因?yàn)檫@樣的情況下，iOS不會(huì)觸發(fā)change事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。
三、什么是組件 組件是可復(fù)用的Vue實(shí)例， 說白了就是一組可以重復(fù)使用的模板， 跟JSTL的自定義標(biāo)簽、Thymeleal的th:fragment等框架有著異曲同工之妙，通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織：
注意：在實(shí)際開發(fā)中，我們并不會(huì)用以下方式開發(fā)組件，而是采用vue-cli創(chuàng)建，vue模板文件的方式開發(fā)，以下方法只是為了讓大家理解什么是組件。 使用Vue.component()方法注冊(cè)組件，格式如下：
<div id='app'> <pan></pan></div><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script type='text/javascript'> //先注冊(cè)組件 Vue.component('pan',{template:’<li>Hello</li>’ }); //再實(shí)例化Vue var vm = new Vue({ el:'#app', });</script>
說明：
Vue.component()：注冊(cè)組件 pan：自定義組件的名字 template：組件的模板 2、使用props屬性傳遞參數(shù)像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數(shù)到組件的，此時(shí)就需要使用props屬性了！ 注意：默認(rèn)規(guī)則下props屬性里的值不能為大寫；
<!DOCTYPE html><html lang='en' xmlns:v-bind='http://www.w3.org/1999/xhtml'><head> <meta charset='UTF-8'> <title>Title</title></head><body><div id='app'> <!--組件，傳遞給組件中的值：props--> <cpn v-for='item in items' v-bind:itemChild='item'/></div><!--1.導(dǎo)入vue.js--><script src='https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js'></script><script> // 定義一個(gè)vue組件component組件 Vue.component('cpn',{ props: [’itemChild’], template: `<li>{{itemChild}}</li>` }) var vm = new Vue({ el: ’#app’, data: { items: [’海賊王’,’火影忍者’,’刀劍神域’] } });</script></body></html>
說明：
v-for='item in items'：遍歷Vue實(shí)例中定義的名為items的數(shù)組，并創(chuàng)建同等數(shù)量的組件 v-bind:itemChild='item'：將遍歷的item項(xiàng)綁定到組件中props定義名為item屬性上；= 號(hào)左邊的itemChild為props定義的屬性名，右邊的為item in items 中遍歷的item項(xiàng)的值以上就是詳解vue 表單綁定與組件的詳細(xì)內(nèi)容，更多關(guān)于vue 表單綁定與組件的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法2. IntelliJ IDEA設(shè)置自動(dòng)提示功能快捷鍵的方法3. IntelliJ IDEA設(shè)置編碼格式的方法4. JS實(shí)現(xiàn)炫酷雪花飄落效果5. Ajax對(duì)xml信息的接收和處理操作實(shí)例分析6. 用XML和XSL來生成動(dòng)態(tài)頁(yè)面7. Ajax報(bào)錯(cuò)400的參考解決辦法8. 谷歌Chrome瀏覽器開發(fā)者工具教程—JS調(diào)試篇9. Ajax實(shí)現(xiàn)頁(yè)面無刷新留言效果10. WML開發(fā)教程之 WAP網(wǎng)站服務(wù)器配置方法
網(wǎng)公網(wǎng)安備