01Vue數據雙向綁定

時間 2019-11-16

標籤 01vue vue 數據雙向綁定简体版

原文原文鏈接

Vue做爲前端MV*架構，Vue.js (讀音 /vjuː/，相似於 view) 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。javascript

Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。html

另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動。前端

常見的幾種數據綁定形式：vue

1　使用{{expression}}，這種方法比較簡單。可是若是網速比較慢，可能給用戶看到{{expression}}的體驗java

　　，固然也能夠和Angular同樣加入一個v-cloak，使其在加載完後在進行顯示。這種表達式還有另外兩種擴展：git

{{*expression}}一次性綁定，後面即便expression中內容有變化，顯示也不會發生改變。
{{{expression}}}將expression中的內容轉義成html，同時起到了js注入的問題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
    
</head>
<body>
    <input type="text" v-model="username" />
    <p>綁定：輸入是啥，輸出就是啥</p>
    {{username}}
    <hr>
    <p>一次性綁定，初始化綁定，以後即使是修改了，也不會發生變化了</p>
    {{*username}}
    <hr>
    <p>會將綁定內容轉義成html</p>
    {{{username}}}
</body>
<script type="text/javascript">
    new Vue({
        el:"body",
            data:{
            username:'buffer'
        }
    })    
    </script>
</html>

2.使用標籤github

　　主要標籤有v-model:進行雙向數據綁定,注意這個通常是控制在input標籤上，若是放到其餘標籤可能沒有效果。express

v-text:對應上面的{{expression}}
v-once：對應上面的{{*expression}}
v-html：對應上面的{{{expression}}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>
    
</head>
<body>
    <input type="text" v-model="username" />
    <p>綁定：輸入是啥，輸出就是啥</p>
    <p v-text="username"></p>
    <hr>
    <p>一次性綁定，初始化綁定，以後即使是修改了，也不會發生變化了</p>
    <p v-once="username"></p>
    <hr>
    <p>會將綁定內容轉義成html</p>
    <p v-html="username"></p>
    <p>使用v-model進行數據綁定</p>
    <p v-model="username"></p>
</body>
<script type="text/javascript">
    new Vue({
        el:"body",
            data:{
            username:'buffer'
        }
    })    
    </script>
</html>

這裏可能須要注意computed這個vue屬性，通常狀況expression表達式會出現vue.data中的字段，可是架構

compute也能夠出現字段，例如：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" 
src="http://apps.bdimg.com/libs/vue/1.0.8/vue.js"></script>

</head>
<body>
    <div id="box">
        <p>a=>{{b}}</p>
        <!-- <p>b=>{{b}}</p> -->
        <input type="text" v-model="a" />
    </div>
</body>
<script type="text/javascript">
    // window.onload=function(){
        var vm=new Vue({
            data:{
                a:10
            },
            computed:{
                b:{
                    get:function(){
                        alert("調用了get方法"+this.a);
                        return parseInt(this.a)+2;
                    }
                }
            }
        }).$mount("#box")
    // }
</script>
</html>