Vue.js—快速入門及實現圖書管理系統

時間 2019-11-17

標籤 vue.js vue 快速入門實現圖書管理系統欄目 JavaScript 简体版

原文原文鏈接

前言javascript

今天咱們主要一塊兒來學習一個新框架的使用——Vue.js，以前咱們也講過AngularJS是如何使用的，而今天要講的Vue.js的語法和AngularJS很類似，由於 AngularJS 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經獲得解決。AngularJS 使用雙向綁定，Vue 在不一樣組件間強制使用單向數據流，這使應用中的數據流更加清晰易懂。css

在實現圖書館系統以前，咱們先學習一下Vue.js的一些基礎語法的使用。html

1 第一個Vue實例

每一個 Vue 應用都是經過 Vue 函數建立一個新的 Vue 實例開始的，當建立一個 Vue 實例時，你能夠傳入一個選項對象。vue

一個 Vue 應用由一個經過 new Vue 建立的根 Vue 實例，以及可選的嵌套的、可複用的組件樹組成。java

Vue.js使用{{ }}綁定表達式，用於將表達式的內容輸出到頁面中。表達式能夠是文字，運算符，變量等，也能夠在表達式中進行運算輸出結果
jquery

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9            {{message}}    
10         </div>
11         
12         <script type="text/javascript" src="js/vue.js" ></script>
13         <script type="text/javascript">
14             //聲明式渲染
15             var app = new Vue({   //建立Vue對象
16                 el:"#app",   //把當前Vue對象掛載到div標籤上,#app是ID選擇器  
17                 data:{
18                     message:"Hello Vue!",//message是自定義的數據
19                 }
20             
21             });
22         </script>
23     </body>
24 </html>

在建立Vue實例時，須要傳入一個選項對象，選項對象能夠包含數據、掛載元素、方法、模生命週期鉤子等等。bootstrap

在這個示例中，選項對象的el屬性指向View，el: '#app'表示該Vue實例將掛載到<div id="app">...</div>這個元素；數組

data屬性指向Model，data: message表示咱們的Model是message對象。
Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用一對大括號語法，在運行時{{ message }}會被數據對象的message屬性替換，因此頁面上會輸出"Hello World!"。app

2 雙向綁定實例

首先咱們先解釋一下什麼是雙向綁定， Vue框架很核心的功能就是雙向的數據綁定。雙向是指：HTML標籤數據綁定到Vue對象，另外反方向數據也是綁定的。MVVM模式自己是實現了雙向綁定的，在Vue.js中可使用v-model指令在表單元素上建立雙向數據綁定。將message綁定到文本框，當更改文本框的值時，{{ message }} 中的內容也會被更新。反之，若是改變message的值，文本框的值也會被更新。反過來，若是改變message的值，文本框的值也會被更新，咱們能夠在Chrome控制檯進行嘗試。框架

下面的栗子是在表單控件元素（input等）上建立雙向數據綁定（數據源）；跟Angular中ng-model用法同樣。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             {{message}}
10        
11 
13             <input v-model="message" />
14         </div>
15     </body>
16     <script type="text/javascript" src="js/vue.js" ></script>
17         <script type="text/javascript">
18             //聲明式渲染
19             var app = new Vue({  
20                 el:"#app",   
21                 data:{
22                     message:"Hello Vue",
23                 }
24             
25             });
26     </script>
27 </html>

3 Vue.js的經常使用指令

上面用到的v-model是Vue.js經常使用的一個指令，那什麼是指令呢？

Vue.js的指令是以v-開頭的，它們做用於HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時，指令會爲綁定的目標元素添加一些特殊的行爲，咱們能夠將指令看做特殊的HTML特性。

Vue.js提供了一些經常使用的內置指令，接下來就給你們介紹幾個Vue中的經常使用指令：

一、v-if指令

二、v-else指令

三、v-show指令

四、v-for指令

五、v-on指令

六、v-bind 指令

3.1v-if指令

v-if是條件渲染指令，它根據表達式的真假來刪除和插入元素,這個例子演示了咱們不只能夠綁定 DOM 文本到數據，也能夠綁定 DOM 結構到數據。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <h1>Hello, Vue.js!</h1>
10             <h1 v-if="yes">Yes</h1>
11             <h1 v-if="no">No</h1>
12             <h1 v-if="age >= 12">Age: {{ age }}</h1>
13         </div>
14     </body>
15     <script src="js/vue.js"></script>
16     <script>
17         
18         var vm = new Vue({
19             el: '#app',
20             data: {
21                 yes: true,
22                 no: false,
23                 age: 20,           
24         }
25         })
26     </script>
27 </html>

3.2v-else指令

能夠用 v-else 指令給 v-if 添加一個 "else" 塊,條件都不符合時渲染。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，不然它將不會被識別。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <div v-if="num>90">
10                 {{score1}}
11             </div>
12             <div v-else>
13                 {{bananer}}
14             </div>
15         </div>
16         
17    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
18         <script type="text/javascript">
19             var app = new Vue({
20                 el: "#app",
21                 data:{
22                     num:98,
23                     score1:"恭喜你是優秀哦！",
24                     score2:"須要繼續努力哦！"
25                 }
26             });
27         </script>
28     </body>
29 </html>

3.3v-show指令

v-show也是條件渲染指令，和v-if指令不一樣的是，使用v-show指令的元素始終會被渲染到HTML，它只是簡單地爲元素設置CSS的style屬性。值得咱們注意的是，v-show 不支持 <template> 元素，也不支持 v-else。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>綜合實例</title>
 6     </head>
 7     <body>
 8     <div id="app">
 9         <h1 v-show="teng">這是個真理！</h1>
10             <template v-show="false">
11                 <div>我好漂亮！</div>
12                 <div>我很是漂亮！</div>
13                 <div>我特別漂亮！</div>
14             </template>
15     </div>
16     </body>
17  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
18     <script type="text/javascript">
19         var vm=new Vue({
20             el:'#app',
21             data:{
22                 teng:true
23             }
24         })
25     </script>
26 </html>

3.4v-for指令

循環使用 v-for 指令,v-for 指令能夠綁定數組的數據來渲染一個項目列表。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <ol>
10                 <li v-for="teng in shuai">
11                   {{ teng.name }}
12                 </li>
13             </ol>
14         </div>
15         
16         <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
17         <script type="text/javascript">
18             var app = new Vue({
19                 el: "#app",
20                 data:{
21                     shuai: [
22                       { name: '帥！' },
23                       { name: '真帥！' },
24                       { name: '特別帥！' }
25                     ]
26                 }
27             });
28         </script>
29     </body>
30 </html>

3.5v-on指令

事件監聽可使用 v-on 指令。

一般狀況下，咱們須要使用一個方法來調用 JavaScript 方法。v-on 能夠接收一個定義的方法來調用。除了直接綁定到一個方法，也能夠用內聯 JavaScript 語句.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <p><input type="text" v-model="message"></p>
10             <p>
11                 <!--click事件直接綁定一個方法-->
12                 <button v-on:click="teng">我</button>
13             </p>
14             <p>
15                 <!--click事件使用內聯語句-->
16                 <button v-on:click="say('帥！')">帥</button>
17             </p>
18         </div>
19     </body>
20    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
21     <script>
22         var vm = new Vue({
23             el: '#app',
24             data: {
25                 message: 'Hello, Vue.js'
26             },
27            
28             methods: {
29                 teng: function() {
30                 
31                     alert(this.message)
32                 },
33                 say: function(msg) {
34                     alert(msg)
35                 }
36             }
37         })
38     </script>
39 </html>

3.6v-bind 指令

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 7 <style>
 8 .red {
 9     width: 100px;
10     height: 100px;
11     background: green;
12 }
13 .style {
14     background: red;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="app">
20   <div v-bind:class="class1"></div>
21 </div>
22 
23 <script>
24 new Vue({
25   el: '#app',
26   data: {
27     class1: {
28       red: true,
29       'style': true
30     }
31   }
32 })
33 </script>
34 </body>
35 </html>

4圖書系統管理

根據上面咱們所學習Vue的內容，咱們來作一個圖書管理系統進一步熟悉Vue.js的使用。

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Document</title>
  6          <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  7         <script src="js/vue.js"></script>
  8         <style type="text/css">
  9             #update-book{
 10                 display: none;
 11             }
 12         </style>
 13     </head>
 14      <body>
 15         <div class="container">
 16             <div class="col-md-6 col-md-offset-3">
 17                 <h1>Vue demo</h1>
 18                  
 19                 <div id="app">
 20                     <table class="table table-hover ">
 21                         <br />
 22                         <thead>
 23                             <tr>
 24                                 <th>序號</th>
 25                                 <th>書名</th>
 26                                 <th>做者</th>
 27                                 <th>價格</th>
 28                                 <th>操做</th>
 29                             </tr>
 30                         </thead>
 31                         <tbody>
 32                             <tr v-for="book in filterBooks">
 33                                 <td>{{book.id}}</td>
 34                                 <td>{{book.name}}</td>
 35                                 <td>{{book.author}}</td>
 36                                 <td>{{book.price}}</td>
 37                                 <template v-if="book.id%2==0">
 38                                     <td class="text-left">
 39                                         <button type="button" class="btn btn-success" class="del" @click="delBook(book)">刪除</button>
 40                                         <button type="button" class="btn btn-success" @click="updataBook(book)">修改</button>
 41                                     </td>
 42                                 </template>
 43                                 <template v-else>
 44                                     <td class="text-left">
 45                                         <button type="button" class="btn btn-danger" class="del" @click="delBook(book)">刪除</button>
 46                                         <button type="button" class="btn btn-danger" @click="updataBook(book)">修改</button>
 47                                     </td>
 48                                 </template>
 49                             </tr>
 50                         </tbody>
 51                     </table>
 52                  
 53                     <div id="add-book">
 54                         <div class="row" style="margin-bottom: 30px;">
 55                             <div class="col-md-3"style="text-align: right;font-size: 16px;line-height: 30px;">
 56                                 請輸入書名
 57                             </div>
 58                             <div class="col-md-5">
 59                                 <input type="text"class="form-control" v-model="search"/>
 60                             </div>
 61                         </div>
 62 
 63                         <h3>添加書籍</h3>
 64                         <hr />
 65                         <div class="form-group">
 66                             <label for="group">書名</label>
 67                             <input type="text" class="form-control" id="group" v-model="book.name">
 68                         </div>
 69                         <div class="form-group">
 70                             <label for="author">做者</label>
 71                             <input type="text" class="form-control" id="author" v-model="book.author">
 72                         </div>
 73                         <div class="form-group">
 74                             <label for="price">價格</label>
 75                             <input type="text" class="form-control" id="price" v-model="book.price">
 76                         </div>
 77                         <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
 78                     </div>
 79                     
 80                     <div id="update-book">
 81                         <h3>修改書籍</h3>
 82                         <hr />
 83                         <div class="form-group">
 84                             <label for="group1">書名</label>
 85                             <input type="text" class="form-control" id="group1" v-model="book.name">
 86                         </div>
 87                         <div class="form-group">
 88                             <label for="author1">做者</label>
 89                             <input type="text" class="form-control" id="author1" v-model="book.author">
 90                         </div>
 91                         <div class="form-group">
 92                             <label for="price1">價格</label>
 93                             <input type="text" class="form-control" id="price1" v-model="book.price">
 94                         </div>
 95                         <button class="btn btn-primary btn-block" @click="updatasBook()">完成</button>
 96                     </div>
 97                 </div>
 98             </div>
 99         </div>
100         <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
101         <script type="text/javascript" src="js/tushu.js" ></script>
102      </body>
103 </html>

JS代碼：

 1 var id=0;
 2 new Vue({
 3     el:'#app',
 4     methods:{
 5         addBook:function(){
 6             this.book.id=this.books.length+1;
 7             this.books.push(this.book);
 8             this.book={};
 9         },
10         delBook:function(book){
11         var blength=this.books.length;
12         this.books.splice(book.id-1,1);
13             for(var i=0;i<blength;i++){
14                 if(book.id<this.books[i].id){
15                     this.books[i].id-=1;
16                 }
17             }
18     },
19         updataBook:function(book){
20             $("#add-book").css("display","none");
21             $("#update-book").css("display","block");
22             id=book.id;
23         },
24         updatasBook:function(){
25             this.book.id=id;
26             this.books.splice(id-1,1,this.book);
27             $("#add-book").css("display","block");
28             $("#update-book").css("display","none");
29             this.book = {};
30         },
31     },
32     computed:{
33         filterBooks:function(){
34             var books=this.books;
35             var search=this.search;
36 //            if(!search){
37 //                return books;
38 //            }
39 //            var arr=[];
40 //            for(var i=0;i<books.length;i++){
41 //                var index=books[i].name.indexOf(search);
42 //                if(index>-1){
43 //                    arr.push(books[i]);
44 //                }
45 //            }
46 //            return arr;
47             
48             return books.filter(function(book){
49                 return book.name.toLowerCase().indexOf(search.toLowerCase())!=-1;
50             })
51         }
52     },
53         data:{
54         book:{
55             id:"",
56             author:"",
57             name:"",
58             price:""
59         },
60         books:[{
61             id:1,
62             author:"張三",
63             name:"張三自傳漫畫",
64             price:12.0
65         },
66         {
67             id:2,
68             author:"李四",
69             name:"李四自傳漫畫",
70             price:12.0
71         },
72         {
73             id:3,
74             author:"張三",
75             name:"張三自傳漫畫",
76             price:12.0
77         }
78         ],
79         search:""
80     }
81         
82 })