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 还可以接收一个需要调用的方法名称。

<table  class="x-table">
     <thead>
          <tr>
             <th>BookName</th>
             <th>Author</th>
          </tr>
     </thead>
     <tbody>
          <tr v-for="book in books"  v-on:click="view(book)">
              <td >
                 {{book.bookName}}
              </td>
              <td >
                 {{book.author}}
              </td>
          </tr>
     </tbody>
</table>

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 = {};
              }
　　　　　　}
      }
});

事件修饰符(摘自)： 事件修饰符  
在事件处理程序中调用 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;
                }
          }
});