Vue.js—快速入門及實現用戶信息的增刪

時間 2019-11-13

標籤 vue.js vue 快速入門實現用戶信息增刪欄目 JavaScript 简体版

原文原文鏈接

Vue.js是什麼javascript

Vue.js 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。 Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。css

Vue 的一些語法和 AngularJS 的很類似 (例如 v-if vs ng-if)。由於 AngularJS 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經獲得解決。AngularJS 使用雙向綁定，Vue 在不一樣組件間強制使用單向數據流，這使應用中的數據流更加清晰易懂。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，可讓你快速地掌握它的所有特性並投入開發。html

1聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。前端

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

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

組件咱們後續會繼續講給你們聽的，而如今要明白的是全部的 Vue 組件都是 Vue 實例，而且接受相同的選項對象便可 (一些根實例特有的選項除外)。bootstrap

當一個 Vue 實例被建立時，它向 Vue 的響應式系統中加入了其 data 對象中能找到的全部的屬性。當這些屬性的值發生改變時，視圖將會產生「響應」，即匹配更新爲新的值。數組

Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。瀏覽器

數據綁定最多見的形式就是使用 —— 雙大括號，經過使用 v-once指令，也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但這會影響到該節點上全部的數據綁定。app

下邊這個小例子就是咱們生成的第一個Vue應用，數據和 DOM 已經被綁定在一塊兒，全部的元素都是響應式的。打開你的瀏覽器的控制檯，並修改 app.message的內容，你將看到內容也相應地更新。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <!--
10             Vue.js使用{{}}綁定表達式，用於將表達式的內容輸出到頁面中。
11             表達式能夠是文字，運算符，變量等，也能夠在表達式中進行運算輸出結果
12             -->
13             {{message}}    
14         </div>
15         
16         <script type="text/javascript" src="js/vue.js" ></script>
17         <script type="text/javascript">
18             //聲明式渲染
19             var app = new Vue({   //建立Vue對象
20                 el:"#app",   //把當前Vue對象掛載到div標籤上,#app是ID選擇器  
21                 data:{
22                     message:"Hello Vue!",//message是自定義的數據
23                 }
24             
25             });
26         </script>
27     </body>
28 </html>

下邊這種方式也能夠實現一樣的效果，當vue.js文件放在頁面的下方時，這種方式在頁面刷新時不會看到{{ }}表達式的原樣。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*
 8             若是vue.js文件放在頁面的下方，在頁面刷新時會看到{{}}表達式原樣，因此使用v-cloak指令代替表達式。
 9             在css中設置[v-cloak]{display:none}
10             */
11             [v-cloak]{display:none;}
12         </style>
13     </head>
14     <body>
15         <div id="app" v-cloak v-html="message">
16             
17         </div>
18     </body>
19     <script type="text/javascript" src="js/vue.js" ></script>
20         <script type="text/javascript">
21             //聲明式渲染
22             var app = new Vue({   //建立Vue對象
23                 el:"#app",   //把當前Vue對象掛載到div標籤上,#app是ID選擇器  
24                 data:{
25                     message:"Hello Vue!",//message是自定義的數據
26                 }
27             
28             });
29     </script>
30 </html>

如今咱們來簡單的說說——Vue的構造函數是什麼?

選項el屬性，就是elment縮寫，當前Vue對象掛載到哪一個標籤上的語法，支持CSS選擇器或者DOM對象，通常id選擇選擇當前的標籤
data屬性是自定義數據。vue會把自定義的數據與HTML模板數據進行綁定
數據的綁定方式就是{{}}，相似於AngularJS

2雙向數據綁定

首先咱們先解釋一下什麼是雙向綁定， Vue框架很核心的功能就是雙向的數據綁定。雙向是指：HTML標籤數據綁定到Vue對象，另外反方向數據也是綁定的。
通俗點說，Vue對象會改變會直接影響到HTML標籤的變化，並且標籤的變化也會反過來影響Vue對象的屬性變化。

Vue中可使用 v-model 指令在 input 輸入框中建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值。由於它會選擇 Vue 實例數據來做爲具體的值。這個時候就須要經過 JavaScript 在組件的 data 選項中聲明初始值了。

將message綁定到文本框，當更改文本框的值時，{{ message }} 中的內容也會被更新。反之，若是改變message的值，文本框的值也會被更新。

 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                 在表單控件元素（input等）上建立雙向數據綁定（數據源）；跟Angular中ng-model用法同樣。
12             -->
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>

在默認狀況下，v-model 在 input 事件中同步輸入框的值與數據，但你能夠添加一個修飾符 lazy ，這個時候就須要點擊一下瀏覽器任意地方實現數據的同步。

1 <div id="app">
2         {{message}}
3         <input v-model.lazy="message" />
4 </div>

Vue.js中的經常使用指令

Vue中的指令是帶有 v- 前綴的特殊屬性。指令屬性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況)。指令用於在表達式的值改變時，將某些行爲應用到 DOM 上。

一些指令可以接收一個「參數」，在指令名稱以後以冒號表示。例如，v-bind 指令能夠用於響應式地更新 HTML 屬性。

接下來就給你們介紹幾個Vue中的經常使用指令：

3v-if 指令

咱們使用v-if來控制切換一個元素的顯示。這裏， v-if 指令將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。

這個例子演示了咱們不只能夠綁定 DOM 文本到數據，也能夠綁定 DOM 結構到數據。

數據的seen屬性爲true時，內容會被輸出

數據的seen屬性爲false時，內容不會被輸出

 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 v-if="seen">如今你看到我了</p>
10         </div>
11         
12         <script type="text/javascript" src="js/vue.js" ></script>
13         <script type="text/javascript">
14             //聲明式渲染
15             var app = new Vue({  
16                 el:"#app",   
17                 data:{
18                     seen:true
19                 }
20             });
21     </script>
22     </body>
23 </html>

5v-else 指令

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

判斷num值是否大於22，大於則輸出apple，不然輸出bananer

 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>22">
10                 {{apple}}
11             </div>
12             <div v-else>
13                 {{bananer}}
14             </div>
15         </div>
16         
17         <script type="text/javascript" src="js/vue.js" ></script>
18         <script type="text/javascript">
19             var app = new Vue({
20                 el: "#app",
21                 data:{
22                     num:25,
23                     apple:"蘋果很好吃！",
24                     bananer:"香蕉也很好吃！"
25                 }
26             });
27         </script>
28     </body>
29 </html>

6v-show 指令

如今咱們簡單講講v-show，v-show指令用於根據條件展現元素的選項，用法也是大體同樣的。

不一樣的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。

值得咱們注意的是，v-show 不支持 <template> 元素，也不支持 v-else。因此在下邊這個例子中儘管v-show設爲false，依然能展現內容。

 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="ok">hello!</h1>
10         <!--v-show 不支持 <template> 元素,因此儘管v-show設爲false，依然能展現內容-->
11             <template v-show="false">
12                 <div>1111</div>
13                 <div>2222</div>
14                 <div>3333</div>
15             </template>
16     </div>
17     </body>
18     <script type="text/javascript" src="js/vue.js" ></script>
19     <script type="text/javascript">
20         var vm=new Vue({
21             el:'#app',
22             data:{
23                 ok:true
24             }
25         })
26     </script>
27 </html>

如今咱們來對比一下v-if和v-show有何區別吧：

v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

v-if 若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

7v-for 指令

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

v-for 指令須要以 fruit in fruits 形式的特殊語法， fruits 是源數據數組而且 fruit 是數組元素迭代的別名。

 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="fruit in fruits">
11                   {{ fruit.name }}
12                 </li>
13             </ol>
14         </div>
15         
16         <script type="text/javascript" src="js/vue.js" ></script>
17         <script type="text/javascript">
18             var app = new Vue({
19                 el: "#app",
20                 data:{
21                     fruits: [
22                       { name: '蘋果' },
23                       { name: '香蕉' },
24                       { name: '西瓜' }
25                     ]
26                 }
27             });
28         </script>
29     </body>
30 </html>

8v-bind 指令

HTML 屬性中的值應使用 v-bind 指令。主要是用來操做元素的class列表和他的內聯樣式。和用JS直接操做dom節點功能同樣，可是，要比js簡單的多。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             .a{
 8                 width: 100px;
 9                 height: 100px;
10                 background-color: red;
11             }
12             .b{
13                 width: 200px;
14                 height: 200px;
15                 background-color: yellow;
16             }
17         </style>
18     </head>
19     <body>
20         <div id="app">
21             <div v-bind:class="myClass1" onclick="app.func()">點擊變化</div>
22         </div>
23         
24         <script type="text/javascript" src="js/vue.js" ></script>
25         <script type="text/javascript">
26             var app = new Vue({
27                 el: "#app",
28                 data:{
29                     myColor:"red",
30                     myWidth:200,
31                     myHeight:200,
32                     myClass1:"a",
33                     func:function(){
34                         if(this.myClass1=="a"){
35                             this.myClass1="b";
36                         }else{
37                             this.myClass1="a";
38                         }
39                     }
40                 }
41             });
42         </script>
43     </body>
44 </html>

9v-on 指令

爲了能讓用戶和你的應用進行互動，咱們能夠用 v-on 指令綁定一個事件監聽器，經過它調用咱們 Vue 實例中定義的方法。

在reverseMessage 方法中，當咱們更新了應用的狀態，但沒有觸碰 DOM，由於全部的 DOM 操做都由 Vue 來處理。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <!--事件監聽可使用v-on指令-->
 9         
10         <div id="app">
11             <button v-on:click="counter+=1">點擊加1</button>
12             <p>{{counter}}</p>
13             
14             <p>{{ message }}</p>
15               <button v-on:click="reverseMessage">反轉信息</button>
16             
17             <button v-on:click="func">點擊彈出</button>
18         </div>
19     </body>
20     <script type="text/javascript" src="js/vue.js" ></script>
21     <script type="text/javascript">
22         var vm=new Vue({
23             el:'#app',
24             data:{
25                 counter:0,
26                 message: 'Hello Vue.js!'
27             },
28             //在methods中定義方法
29             methods:{
30                 reverseMessage: function () {
31                   this.message = this.message.split('').reverse().join('')
32                 },
33                 
34                 func:function(event){
35                     alert("川寶寶");
36                 }
37             }
38         })
39     </script>
40 </html>

10綜合小Demo

如今咱們已經介紹了一些Vue.js的基礎知識了，結合以上知識咱們能夠來作個小Demo吧。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>綜合實例</title>
 6         <link rel="stylesheet" href="css/bootstrap.css" />
 7         <style type="text/css">
 8             .table{
 9                 width: 500px;
10             }
11         </style>
12     </head>
13     <body>
14     <div id="app">
15         <div class="form-group">
16             <label for="group">姓名</label>
17             <input type="text"  v-model="person1.name">
18         </div>
19         <div class="form-group">
20             <label for="author">學號</label>
21             <input type="text"  v-model="person1.num">
22         </div>
23         <div class="form-group">
24             <label for="price">成績</label>
25             <input type="text"  v-model="person1.score">
26         </div>
27             <button class="btn btn-success" v-on:click="addPerson()">添加</button>
28         <table class="table table-bordered" class="table">
29             <thead>
30                 <tr>
31                     <th>姓名</th>
32                     <th>學號</th>
33                     <th>成績</th>
34                     <th>刪除</th>
35                 </tr>
36             </thead>
37             <tbody>
38                 <tr  v-for="person in people">
39                     <td>{{person.name}}</td>
40                     <td>{{person.num}}</td>
41                     <td>{{person.score}}</td>
42                     <td><button  class="btn btn-warning" @click="delPerson(person)">刪除</button></td>
43                 </tr>
44             </tbody>
45         </table>
46     </div>
47     </body>
48     <script type="text/javascript" src="js/vue.js" ></script>
49     <script type="text/javascript">
50         var vm=new Vue({
51             el:'#app',
52             data:{
53                 person1:{
54                         name: '',
55                         num: '',
56                         score: ''
57                 },
58                 people:[{
59                     name: '張三',
60                     num: '123456',
61                     score: '8'
62                 },
63                 {
64                     name: '李四',
65                     num: '151515',
66                     score: '7'
67                 },
68                 {
69                     name: '王二',
70                     num: '181818',
71                     score: '6'
72                 },
73                 ]
74             },
75             //在methods中定義方法
76             methods:{
77                 //新增成員信息
78                 addPerson: function () {
79                       this.person1.id=this.people.length+1;
80                     this.people.push(this.person1);
81                     this.person1={};
82                 },
83                 //刪除成員信息
84                 delPerson: function(person){
85                     this.people.splice(this.people.indexOf(person),1);
86                 }
87             }
88         })
89     </script>
90 </html>

編者按

Vue.js是數據驅動的，無需手動操做DOM。它經過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你建立了綁定，DOM將和數據保持同步，當數據變動了，DOM也會相應地更新。若是你以前有過其餘框架的使用經驗對於學習 Vue.js 是有幫助的，但這不是必需的。最後但願這篇文章能對您學習前端開發有所幫助。