詳解vue 表單綁定與組件
一、什么是雙向數(shù)據(jù)綁定
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" id="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" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="join" value="Join" v-model="checkedNames">
<label for="join">Jack</label>
<input type="checkbox" id="mike" 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" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" 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ì)以一棵嵌套的組件樹的形式來組織：
- 例如，你可能會(huì)有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個(gè)組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。
1、第一個(gè)Vue組件
注意：在實(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)注腳本之家其它相關(guān)文章！
相關(guān)文章
在開發(fā)中我們想要給一個(gè)組件的顯示和消失添加某種過渡動(dòng)畫,可以很好的增加用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過渡動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺(tái)管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁面中使用搜索功能,本文就來介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法示例
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
利用vue重構(gòu)有贊商城的思路以及總結(jié)整理
這篇文章主要介紹了利用vue重構(gòu)有贊商城的思路以及總結(jié)整理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+Vant實(shí)現(xiàn)7天日歷展示并在切換日期時(shí)實(shí)時(shí)變換功能
本文介紹了如何利用Vue和Vant框架結(jié)合moment.js插件來實(shí)現(xiàn)一個(gè)7天日歷展示功能,在這個(gè)功能中,用戶可以在切換日期時(shí)看到界面的實(shí)時(shí)變化,此外,文章還提供了代碼實(shí)現(xiàn)和效果測(cè)試的詳細(xì)步驟,幫助開發(fā)者能夠順利完成類似的項(xiàng)目開發(fā)2024-10-10
對(duì)于插槽的概念和使用,這是vue的一個(gè)難點(diǎn),這需要我們靜下心來,慢慢研究,下面這篇文章主要給大家介紹了關(guān)于vue默認(rèn)插槽的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要給大家介紹了關(guān)于VUE配置history路由模式配置的相關(guān)資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號(hào),而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對(duì)Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11