Vuejs 學習筆記

之因此寫這篇隨筆， 是由於項目中有用到vue, 是其餘同事寫的， 我屬於要讀他的code 而後去改東西的。我的感受語法跟angular2 很類類似。

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

首先固然是要引入vue.js：直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。

1.Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

 <div id="vueApp">
     {{ message }}
</div>

var app = new Vue({
  el: '#vueApp',
  data: {
    message: 'Hello Vue!'
  }
})

2.條件(v-if) 與 循環 (v-for) 

<div v-if ="selectedBookOID > -1">
   <asp:Literal ID="ltSelectedBook" runat="server" Text="Selected Book Details" />
      <div class="panel-body">
      <table class="x-table" style="margin-left:0">
         <thead>
               <tr>
                   <th>BookName</th>
                   <th>Author</th>
                   <th>catalogue</th>
               </tr>
         </thead>
         <tbody>
               <tr>
                  <td>{{selectedBook.bookName}}</td>
                  <td>{{selectedBook.Author}}</td>
                  <td>
                      <div v-for="catalogue in selectedBook.catalogues">
                        {{catalogue.Text}}                                          
                      </div>
                  </td>                                    
                </tr>
          </tbody>
      </table>
   </div>
</div>                        

3.事件處理

監聽事件：能夠用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。 

事件處理方法：然而許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱。

 1 <table  class="x-table">
 2      <thead>
 3           <tr>
 4              <th>BookName</th>
 5              <th>Author</th>
 6           </tr>
 7      </thead>
 8      <tbody>
 9           <tr v-for="book in books"  v-on:click="view(book)">
10               <td >
11                  {{book.bookName}}
12               </td>
13               <td >
14                  {{book.author}}
15               </td>
16           </tr>
17      </tbody>
18 </table>

 1 this.vue = new Vue({
 2      el: "#vueApp",
 3      data: function () {
 4          return {
 5               books: Books || [],
 6               selectedBookOID: -1,
 7               selectedBook:{}
 8          }
 9      },
10      methods: {
11          view: function (book) {
12              this.selectedBookOID = book.OID;
13              var curBook = Books.filter(function (p) {
14              if (p.OID == book.OID)
15                    return p;
16               });
17               if (curBook) {
19                    this.selectedBook = book;
20               } else {
21                    this.selectedBook = {};
22               }
23 　　　　　　}
24       }
25 });

事件修飾符(摘自)： 事件修飾符  
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是很是常見的需求。儘管咱們能夠在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。以前提過，修飾符是由點開頭的指令後綴來表示的。

.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件再也不重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符能夠串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此到處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以一樣的順序產生。所以，用 v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

* 新增1

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
不像其它只能對原生的 DOM 事件起做用的修飾符，.once 修飾符還能被用到自定義的組件事件上。若是你尚未閱讀關於組件的文檔，如今大可沒必要擔憂。

* 新增2

Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>
這個 .passive 修飾符尤爲可以提高移動端的性能。

不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。

事件修飾符

4.filters

<label>{{Item.CreationTime |formatDate}}</label>

<label>{{Item.DurationCode | getDurationDesc}}</label>

this.vue = new Vue({
       el: "#vueApp",
       data: function () {
           return {
                books: Books || [],
                selectedBookOID: -1,
                selectedBook:{}
           }
       },
      methods: {
          view: function (book) {
              this.selectedBookOID = book.OID;
              var curBook = Books.filter(function (p) {
              if (p.OID == book.OID)
                    return p;
               });
               if (curBook) {
                    this.selectedBook = book;
               } else {
                    this.selectedBook = {};
               }
 　　　　　　}
       },
        filters: {
                formatDate: function (time) {
                    var date = new Date(time);
                    var getFullDateTimeStringFromDate = function (dt) {
                        var result = "" + formatTime(dt.getDate()) + "-" +
                           getMonthDesc((dt.getMonth())) + "-" +
                           formatTime(dt.getFullYear()) + " " +
                           formatTime(dt.getHours()) + ":" +
                           formatTime(dt.getMinutes());
                        return result;
                    };
                    return getFullDateTimeStringFromDate(date);
                },
               getDurationDesc: function (code) {
                    var result = "";
                    switch (code) {
                        case "E": result = "End of day";//E - end of day
                            break;
                        case "M": result = "Minutes";//M - minute
                            break;
                        case "H": result = "Hours";//H - hours
                            break;
                        case "D": result = "Days";//D - days
                            break;
                        default: result = code;
                    }
                    return result;
                }
          }
});