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