Vue的表單雙綁和組件你了解嗎

更新時間：2022年03月29日 14:46:54 作者：林中靜月下仙

這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1、什么是雙向數(shù)據(jù)綁定

Vue.js是一個MV VM框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。這也算是Vue.js的精髓之處了。

值得注意的是，我們所說的數(shù)據(jù)雙向綁定，一定是對于UI控件來說的非UI控件不會涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提。如果我們使用vue x那么數(shù)據(jù)流也是單項的，這時就會和雙向數(shù)據(jù)綁定有沖突。

（1）為什么要實現(xiàn)數(shù)據(jù)的雙向綁定

在Vue.js中，如果使用vuex，實際上數(shù)據(jù)還是單向的，之所以說是數(shù)據(jù)雙向綁定，這是用的UI控件來說，對于我們處理表單， Vue.js的雙向數(shù)據(jù)綁定用起來就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單項，方便跟蹤；局部性數(shù)據(jù)流使用雙向，簡單易操作。

2、在表單中使用雙向數(shù)據(jù)綁定

你可以用v-model指令在表單、及元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但v-model本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。

注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過JavaScript在組件的data選項中聲明初始值!

（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="../js/vue.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>&nbsp;&nbsp;多行文本是：{{pan}}
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            message:"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">
    &nbsp;&nbsp;
    <label for="checkbox">{{checked}}</label>
</div>
 
<script src="../js/vue.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">
    &nbsp;&nbsp;
    <label for="jack">Jack</label>
    <input type="checkbox" id="join" value="Join" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="join">Jack</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    &nbsp;&nbsp;
    <label for="mike">Mike</label>
    <span>選中的值：{{checkedNames}}</span>
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            checkedNames:[]
        }
    });
</script>
</body>
</html>

（6）單選按鈕

<!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="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            picked:'Two'
        }
    });
</script>
</body>
</html>

（7）下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    性別：
    <input type="radio" name="sex" value="男" v-model="pan">男
    <input type="radio" name="sex" value="女" v-model="pan">女
    <p>選中了：{{pan}}</p>-->
 
    下拉框:
    <select v-model="pan">
        <option value="" disabled>---請選擇---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>value:{{pan}}</span>
 
 
 
</div>
 
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            pan:"A"
        }
    });
</script>
</body>
</html>

注意：v-model表達(dá)式的初始值未能匹配任何選項，元系將被渲染為“未選中”狀態(tài)。在iOS中，這會使用戶無法選擇第一個選項，因為這樣的情況下，iOS不會觸發(fā)change事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。

3、什么是組件

組件是可復(fù)用的Vue實例，說白了就是一組可以重復(fù)使用的模板，跟JSTL的自定義標(biāo)簽、Thymeleal的th:fragment等框架有著異曲同工之妙，通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：

例如，你可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。

（1）第一個Vue組件

注意：在實際開發(fā)中，我們并不會用以下方式開發(fā)組件，而是采用vue-cli創(chuàng)建，vue模板文件的方式開發(fā)，以下方法只是為了讓大家理解什么是組件。

使用Vue.component()方法注冊組件，格式如下：

<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">
    //先注冊組件
    Vue.component("pan",{
        
        template:'<li>Hello</li>'
 
    });
    //再實例化Vue
    var vm = new Vue({
        el:"#app",
    });
</script>

說明：

Vue.component()：注冊組件
pan：自定義組件的名字
template：組件的模板

（2）使用props屬性傳遞參數(shù)

像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數(shù)到組件的，此時就需要使用props屬性了！

注意：默認(rèn)規(guī)則下props屬性里的值不能為大寫；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div id="app">
    <!--組件：傳遞給組件中的值：props-->
  <pan v-for="item in items" v-bind:panh="item"></pan>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    //定義組件
    Vue.component("pan",{
        props:['panh'],
        template:'<li>{{panh}}</li>'
 
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items:["java","Linux","前端"]
        }
    });
</script>
</body>
</html>

說明：

v-for="item in items"：遍歷Vue實例中定義的名為items的數(shù)組，并創(chuàng)建同等數(shù)量的組件
v-bind:panh="item"：將遍歷的item項綁定到組件中props定義名為item屬性上；= 號左邊的panh為props定義的屬性名，右邊的為item in items 中遍歷的item項的值