表單輸入綁定

時間 2019-11-12

標籤表單輸入綁定欄目 HTML 简体版

原文原文鏈接

vue的核心：聲明式的指令和數據的雙向綁定。html

那麼聲明式的指令，已經給你們介紹完了。接下來咱們來研究一下什麼是數據的雙向綁定?vue

另外，你們必定要知道vue的設計模式：MVVM設計模式

M是Model的簡寫，V是View的簡寫，VM就是ViewModel。app

單向綁定和雙向綁定的區別？

單向綁定很是簡單，就是把Model綁定到View，當咱們用JavaScript代碼更新Model時，View就會自動更新。框架

有單向綁定，就有雙向綁定。ide

若是用戶更新了View，Model的數據也自動被更新了，這種狀況就是雙向綁定。ui

什麼狀況下用戶能夠更新View呢？填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，若是此時MVVM框架能夠自動更新Model的狀態，那就至關於咱們把Model和View作了雙向綁定。this

其實單項數據也有雙向綁定的意思，不過頁面變更後數據的變化不會發生自動更新。spa

咱們能夠這樣認爲：雙向數據綁定=單向數據綁定+UI事件監聽。設計

咱們先看個vue中雙向數據綁定的例子：

<body>
  <div id="app">
    <input type="text" v-model="meg">
    <p>{{data}}</p>
  </div>
 
  <script>
    var app = new Vue({
      el:'#app',
      data :{
        meg:''
      }
     
    })
  </script>
</body>

再簡單不過了，效果顯示，當咱們在input輸入框中輸入內容的時候，下面p標籤同步顯示內容。這就是最典型的雙向數據綁定的例子。vue裏使用v-model實現此想法。

那麼咱們看一下v-model的實現原理是怎樣的呢？

首先你們必定要知道，官網上介紹的。

經過官網的介紹，咱們知道v-mode指令是v-bind:vlaue 和v-on:input的結合體。

看個例子吧，同時給你們介紹了計算屬性getter的用法。

 <!-- <input type="text" v-model = 'usernameValue'> -->

        <!-- 等價於： -->
        <input type="text" v-bind:value='usernameValue' @input='inputHandler'>
        <button @click='commitHandler'>提交</button>
        <!-- ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例 -->
        <div class="list" ref = 'item'></div>

   var set = new Vue({
            el:'#set',
            data:{
                username:'',
                txt:''
            },
            methods:{
                commitHandler(){
                    
                    this.$refs.item.innerHTML = this.usernameValue;
                },
                inputHandler(e){
                    this.usernameValue = e.target.value;
                }
            },
            computed:{

                usernameValue:{
                    get(){
                        return this.username;
                    },
                    set(newValue){
                        this.username = newValue;

                    }
                }

            }

看完上個例子以後，相信你們對v-model實現雙向數據綁定和計算屬性的setter方法必定有個新的認識了。

接下來咱們看看v-model的一些基礎用法！