Vue表單雙向綁定
什么是雙向數據綁定
Vue.js 是一個 MVVM 框架，即數據雙向綁定，即當數據發生變化的時候，視圖也就發生變化，當視圖發生變化的時候，數據也會跟着同步變化。這也算是 Vue.js 的精髓之處了。
值得注意的是，我們所說的數據雙向綁定，一定是對於 UI 控件來說的，非 UI 控件不會涉及到數據雙向綁定。單向數據綁定是使用狀態管理工具的前提。如果我們使用 vuex，那么數據流也是單項的，這時就會和雙向數據綁定有沖突。
在表單中使用雙向數據綁定
你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質上不過是語法糖。
它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。
注意：v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數據作為數據來源。你應該通過 JavaScript 在組件的 data 選項中聲明初始值!
-
單行文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
// v-model：綁定資源
<input type="text" v-model="message">
// 取出數據
<p>{{message}}</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el: "#app",
data: {
message: "hello Vue"
}
})
</script>
</body>
</html>
在輸入框輸入數據，下面的標簽內容也會跟着發生變化：
-
多行文本
<div id="app"> 多行文本：<textarea v-model="message"></textarea> 多行文本是：{{message}} </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 實現與Model雙向綁定，動態更新視圖 var vm = new Vue({ el:"#app", data: { message : "" } }); </script>
-
單復選框
<div id="app"> 單復選框： <input type="checkbox" id="checkbox" v-model="checked"> {{checked}} </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 實現與Model雙向綁定，動態更新視圖 var vm = new Vue({ el:"#app", data: { checked : false } }); </script>
<div id="app"> 下拉框： <select v-model="selected"> <!--<option disabled value="">請選擇</option>--> <option>A</option> <option>B</option> <option>C</option> </select> <span>選中的值: {{ selected }}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> //viewModel 實現與Model雙向綁定，動態更新視圖 var vm = new Vue({ el:"#app", data: { selected : false } }); </script>
注意：如果 v-model 表達式的初始值未能匹配任何選項， 元素將被渲染為“未選中”狀態。在 iOS 中，這會使用戶無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。
第一個Vue 組件
注意：在實際開發中，我們並不會用以下方式開發組件，而是采用 vue-cli 創建 .vue 模板文件的方式開發，以下方法只是為了讓大家理解什么是組件。
使用 Vue.component() 方法注冊組件,格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view層 模板-->
<div id="app">
<zhangzhixi></zhangzhixi>
</div>
<script type="text/javascript">
// 定義Vue組件
Vue.component(
// 組件名稱
"zhangzhixi", {
// 組件模板
template: "<li>Hello World!</li>"
})
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
說明：
- Vue.component()：注冊組件
- zhangzhixi：自定義組件的名字
- template：組件的模板
使用 props 屬性傳遞參數：
像上面那樣用組件沒有任何意義，所以我們是需要傳遞參數到組件的，此時就需要使用 props 屬性了！
注意：默認規則下 props 屬性里的值不能為大寫；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view層 模板-->
<div id="app">
<!--組件：傳遞給組件中的值props-->
<zhangzhixi v-for="array in arrays" v-bind:zhixi="array">
</zhangzhixi>
</div>
<script type="text/javascript">
// 定義Vue組件
Vue.component(
// 組件名稱
"zhangzhixi",
{
// "prop"表示組件屬性名稱
props: ['zhixi'],
// 組件的模板
template: '<li>{{zhixi}}</li>'
})
var app = new Vue({
el: '#app',
data: {
arrays: [
"抽煙",
"喝酒",
"燙頭"
]
}
})
</script>
</body>
</html>
說明：
v-for="array in arrays"：遍歷Vue實例中定義的名為 arrays的數組，並創建同等數量的組件v-bind:zhixi="array"：將遍歷的array項綁定到組件中props定義的名為zhixi屬性上；
