之所以写这篇随笔, 是因为项目中有用到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; } } });