年后公司的項目要求用到vue.js知識，我angular沒有學(xué)，node.js和react也只是了解了一點點，所以學(xué)起來比較困難。如果你想學(xué)vue.js的知識，推薦網(wǎng)址：http://vuejs.org/
詳細(xì)內(nèi)容如下：
一、圖書管理demo用的知識點
1、bootstrap：http://getbootstrap.com/
2、vuejs：http://getbootstrap.com/
具體代碼如下：
html部分
<div id="app" class="container"> <table class="table table-bordered"> <div v-for = "book in books"> <tr> <th>書名</th> <th>書的價格</th> <th>書的數(shù)量</th> <th>小計</th> <th>操作</th> </tr> <tr v-for = "(index,book ) in books"> <td>{{book.name}}</td> <td>{{book.price}}</td> <td><button @click="book.count&&book.count--">-</button><input type="text" v-model="book.count" /><button @click="book.count++">+</button></td> <td>{{book.price*book.count}}</td> <td><button class="btn btn-danger" @click="deleteBook(book)">刪除</button></td> </tr> <tr> <td colspan="5"> 總價{{total}} </td> </tr> </div> </table> <div class="form-group"> <label for="bookname" id="bookname">書名</label> <input type="text" v-model="list.name" class="form-control"/> </div> <div class="form-group"> <label for="bookprice" id="bookprice">價格</label> <input type="text" v-model="list.price" class="form-control"/> </div> <div class="form-group"> <label for="bookcount" id="bookcount">數(shù)量</label> <input type="text" v-model="list.count" class="form-control"/> </div> <div class="form-group"> <button class="btn btn-primary" @click="add">添加</button> </div> </div>腳本部分
<script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ books:[ {name:'VUE js',price:40,count:1}, {name:'NODE js',price:20,count:1}, {name:'REACT js',price:30,count:1}, {name:'ANGULAR js',price:100,count:1}, {name:'JQUERY js',price:50,count:1}, ], list:{ name:'', price:'', count:'' } }, methods:{ deleteBook(book){ // vue 給我們提供了一個 $remove的方法，在數(shù)組中刪除 this.books.$remove(book); /*this.books = this.books.filter((item)=>{ return item != book })*/ }, add(){ this.books.push(this.list); this.list = { name:'', price:'', count:'' } } }, computed:{ total(){ var sum = 0; this.books.forEach(item =>{ sum += item.price*item.count; }) return sum; } } });</script>遇到難點總結(jié)
當(dāng)數(shù)量小于0時，判斷方法，解決方法有很多種，下面總結(jié)有3中方法
(一)最簡單的方法
根據(jù)邏輯判斷，這里要注意邏輯判斷的順序，代碼如下：
（二）這里要注意this指向問題
methods:{ min(index){ if(this.books[index].count>0){ this.books[index].count = parseInt(this.books[index].count) - 1; } }, deleteBook(book){ // vue 給我們提供了一個 $remove的方法，在數(shù)組中刪除 this.books.$remove(book); /*this.books = this.books.filter((item)=>{ return item != book })*/ }, add(){ this.books.push(this.list); this.list = { name:'', price:'', count:'' } } }(三) v-on執(zhí)行時傳參問題
min(book){ if(book.count>0){ book.count = parseInt(book.count) - 1; }}總結(jié)：
v-on執(zhí)行方法的時候需要傳遞參數(shù)的時候添加()，如果不需要傳遞參數(shù)就不用加上()
如果需要傳遞參數(shù)，我們需要手動傳入事件源
建議：
1、如果您有充足的時間來學(xué)習(xí)vue，務(wù)必要把js基礎(chǔ)打好，學(xué)習(xí)下angular.js
2、學(xué)會在網(wǎng)上找資料。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
