Vue之數據綁定

 數據綁定是將視圖和數據相關聯，當數據發生變化時，能夠自動更新視圖，本文介紹vue,js中數據綁定的語法

（1）插值
       文本插值是最基本的形式 使用雙大括號{{}}，例如<span>數據：{{text}}</span>，當text的值改變時，文本中的值也會聯動的發生變化。例如：

<div  id="app">
         {{book}}
</div>
<scrip>
       var app=new Vue({
             el:"#app"
             data:{
                   book:'《天涯明月刀》'
             }
})
</scrip>

   大括號裏面的值被替換爲《天涯明月刀》，經過任何方式修改book，大括號裏面的值都會被實時替換，好比下面這個例子，實時顯示當前的時間 每秒顯示

<div id="Date">
          {{datetime}}
 </div>
<scrip>
       var date = new Vue({
           el: "#Date",
           data: {
               datetime:new Date()
           },
           mounted: function ()
           {
               var _this = this;//聲明一個變量指向當前Vue實例
               this.timer=setInterval(function(){
                 _this.datetime=new Date();//修改數據date
               },1000)
           },
           beforeDestroy: function ()
           {
               if (this.timer)
               {
                   setInterval(this.timer);//在Vue實例銷燬前，清除咱們的定時器
               }
           }
       })
</scrip>

　這裏的{{datetime}}輸出的是瀏覽器默認的時間格式，你們能夠經過一些函數進行格式化轉換，稍後會經過Vue的過濾器（filter）或計算屬性（computed）也能夠實現，之後我會介紹到　

     若是有時候就是想輸出html，而不是將數據解釋後的純文本，可使用v-html

<div id="html">
          <span v-html="link"></span>
 </div>
<script>
       var html = new Vue({
           el: "#html",
           data: {
               link:"<a href='#'>這是一個鏈接</a>"
           }
       })
</script>

     link的內容將會被渲染成一個基友點擊功能的a標籤，而不是純文本。這裏須要注意，若是將用戶產生的內容使用v-html輸出後，可能致使XSS攻擊，因此要在服務端對用戶提交的內容進行處理，通常可將'<>'尖括號轉義。

    若是想顯示{{}}標籤，而不進行替換，使用v-pre便可跳過這個元素和他子元素的編譯過程，例如：<span v-pre＞{{這裏的內容是不會被編譯的門}}＜/span>

有時候只需渲染一次數據，後續數據變化再也不關心，能夠經過「*」實現 ，<span>數據：{{*text}}</span>，雙大括號標籤會把裏面的值所有當作字符串來處理，若是是html片斷，則可使用三個大括號來綁定：<div>Logo:{{{logo}}}</div> logo:'<span>ddfe</span>'
雙大括號標籤還能夠放進html標籤中
<li data-id='{{id}}'></li>
注意 ：vue指令和自身特性內是不能夠插值的，若是用錯了地方，vue.js會發出警告
（2）表達式
可有js表達式和過濾器構成，過濾器能夠沒有，也能夠有多個
{{cents/100}}//在原始值上除以100
{{true？1:0}}//三元表達式
{{example.split(",")}}//js 函數
（2）、過濾器：

   Vue.js支持在{{}}插值的尾部添加一個「（|）」管道符對數據進行過濾，常常用於格式化文本，好比字母所有大寫、貨幣千位使用逗號分隔等。過濾規則是自定義的，經過給Vue實例添加選項filters來設置，例如在以前實時顯示當前時間的示例，能夠對時間進行格式化處理

  <div id="formatDate">
          {{datetime|formatDate}}
  </div>
<script>
       var padDate = function (value) {
           return value < 10 ? '' + value : value;
       };
       var formatDate = new Vue(
           {
               el: '#formatDate',
               data: {
                   datetime: new Date()
               },
               filters: {
                   formatDate: function (value)//這裏的value是須要過濾的數據
                   {
                       var date = new Date();
                       var year = date.getFullYear();
                       var month = padDate(date.getMonth() + 1);
                       var date1 = padDate(date.getDate());
                       var hours = padDate(date.getHours());
                       var minutes = padDate(date.getMinutes());
                       var Seconds = padDate(date.getSeconds());
                       return year + '-' + month + '-' + date1 + ' ' + hours + ':' + minutes + ':' + Seconds;

                   }
               },
               mounted: function () {
                   var _this = this;//聲明一個變量指向當前Vue實例
                   this.timer = setInterval(function () {
                       _this.datetime = new Date();//修改數據date
                   }, 1000)
               },
               beforeDestroy: function () {
                   if (this.timer) {
                       setInterval(this.timer);//在Vue實例銷燬前，清除咱們的定時器
                   }
               }
       })
</script>

過濾器也能夠串聯，也能夠接受參數，例如：{{message|filterA|FilterB}}，{{message|filterA（'arg1','arg2'）},這裏的arg1和arg2將分別傳給過濾器第二個參數和第三個參數，由於第一個參數是數據自己。過濾器應當用於處理簡單的文本轉換，若是實現更爲複雜的數據變換，應使用計算屬性
（3）指令
帶有v-前綴的特殊特性，其值限定爲綁定表達式，也就是js表達式和過濾器。做用 是當表達式的值發生變化時，將這個變化也反應到DOM上。例如<div v-if="show">DDEF</div> ,當show爲true時，展現DDEF字樣，不然不展現。還有一些指令語法稍有不一樣，在指令和表達式之間插一個參數，用：隔開，如v-blind指令，基本用途是動態更新html上的元素，好比id、class 等
<a v-blind:href="url"></a>
<div v-on:click="action"></div>  他用來綁定時間監聽器，這樣咱們就能夠作一些交互了，例如

<div id="app">
            <ul>
               <!-- <li v-for="book in books">{{book.name}}</li>-->

            </ul>
          <!--  <input type="text" v-model="name" placeholder="你的名字"/>
            <h1>你好，{{name}}</h1>-->
            <a v-bind:href="url">百度一下</a>
            <p v-if="show">這是一段文本</p>
            <button v-on:click="HandleClose">點擊隱藏</button>
  </div>
<script>
       var app= new Vue({
            el: '#app',
            data: {
                name: 2,
                url: "https:baidu.com",
                show: true
            },
            methods:
                {
                    HandleClose: function ()
                    {
                        //alert(44);
                        this.show = false;
                    }
                }
       });
</script>

         在button 按鈕上，使用v-on給該元素綁定了一個點擊時間，在普通元素上，v-on能夠監聽原生的dom事件，除啦click外，還有dblclick，keyup、mouseove等，表達式能夠是一個方法名，這些方法都是卸載Vue實例的methods屬性內，而且是函數的形式，函數內的this指向的是當前Vue實例自己，所以能夠直接使用this.XXX的形式來訪問或修飾數據，如例子中的this.show=false;把數據show修改成了false，因此點擊按鈕時，文本p元素也就被移除了

        表達式除了方法名，也能夠直接是內聯語句，若是綁定的事件要處理複雜的業務邏輯，建議仍是在methods裏聲明一個方法，這樣可讀性更強，也更好維護。Vue.js將method裏的方法也代理了，因此也能夠像訪問數據同樣來調用方法

    var app= new Vue({
            el: '#app',
            data: {
                name: 2,
                url: "https:baidu.com",
                show: true
            },
            methods:
                {
                    HandleClose: function ()
                    {
                        //alert(44);
                       this.close()
                    }
                    close:function（）
                    {
                       this.show = false;
                   }
                }
       });

（4）分隔符
vue.js中的數據綁定的語法被設計成可配置的，若是不習慣默認的風格的語法，能夠本身設置
咱們能夠在Vue.config中配置的語法Vue.config是一個對象，包含了全部vue.js的全局配置，能夠在實例化Vue前修改其中的屬性。分隔符在Vue.config中的源碼定義以下：
let delimiters=['{{','}}']
let unsafeDelimiters=['{{{','}}}']
delimiters
Vue.config.delimiters=["<%","%>"],若是修改了默認文本插值的分隔符，則文本的插值語法有{{example}}變動爲<%example%>
unsafeDelimiters
Vue.config.unsafeDelimiters=["<$","$>"],若是修改了默認html插值的分隔符，則文本的插值語法有{{{example}}}變動爲<$example$>

(5)語法糖

   語法糖是在不影響功能的前提下，添加某種方法實現一樣的效果，從而方便程序開發

   Vue.js的v-blind和v-on指令都提供了語法糖，也能夠說是縮寫，好比v-bind能夠省略v-blind直接用一個冒號「：」

    <a v-blind:href="url">連接</a>         

     <img v-blind:src="ImgUrl">連接</img >縮寫爲     

    <a :href="url">連接</a>         

    <img :src="ImgUrl">連接</img >

v-on能夠直接用「@」代替

<button v-on:click="HandleClose">點擊隱藏</button> 縮寫爲<button @click="HandleClose">點擊隱藏</button>使用語法糖能夠簡化代碼的書寫，之後的學習中會盡可能的使用這種語法糖的寫法