Vue入門---經常使用指令詳解

時間 2019-11-19

標籤 vue 入門經常使用指令詳解简体版

原文原文鏈接

Vue入門

Vue是一個MVVM（Model / View / ViewModel）的前端框架，相對於Angular來講簡單、易學上手快，近兩年也也別流行，發展速度較快，已經超越Angular了。比較適用於移動端，輕量級的框架，文件小，運行速度快。最近，閒來無事，因此學習一下Vue這個流行的框架，以備後用。css

1、指令

v-model 多用於表單元素實現雙向數據綁定（同angular中的ng-model）
v-for 格式： v-for="字段名 in(of) 數組json" 循環數組或json(同angular中的ng-repeat),須要注意從vue2開始取消了$index
v-show 顯示內容（同angular中的ng-show）
v-hide 隱藏內容（同angular中的ng-hide）
v-if 顯示與隱藏（dom元素的刪除添加同angular中的ng-if 默認值爲false）
v-else-if 必須和v-if連用
v-else 必須和v-if連用不能單獨使用不然報錯模板編譯錯誤
v-bind 動態綁定做用：及時對頁面的數據進行更改
v-on:click 給標籤綁定函數，能夠縮寫爲@，例如綁定一個點擊函數函數必須寫在methods裏面
v-text 解析文本
v-html 解析html標籤
v-bind:class 三種綁定方法 1、對象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、數組型 '[{red:"isred"},{blue:"isblue"}]'
v-once 進入頁面時只渲染一次不在進行渲染
v-cloak 防止閃爍
v-pre 把標籤內部的元素原位輸出

2、基本組件屬性

1 new Vue({
2   el,         // 要綁定的 DOM element
3   template,   // 要解析的模板，能夠是 #id, HTML 或某個 DOM element
4   data,       // 要綁定的數據
5   computed,   // 依賴於別的數據計算出來的數據, name = firstName + lastName
6   watch,      // 監聽方法, 監聽到某一數據變化時, 須要作的對應操做
7   methods,    // 定義能夠在元件或模板內使用的方法
8 })

3、基礎使用

1.htmlhtml

1 <div id="app">
2     <p>{{msg}}</p>
3 </div>

2.js前端

 1 var app=new Vue({
 2         el:'#app',//標籤的類名、id，用於獲取元素
 3         //以鍵值對的形式存放用到的數據成員
 4         data:{
 5             msg:'顯示的內容'       
 6         },
 7         //包含要用到的函數方法
 8         methods:{            
 9         }
10     });

這樣js中msg的內容就會在p標籤內顯示出來。vue

4、實例

利用bootstrap+vue實現簡易留言板的功能，能夠增長、刪除，彈出模態框node

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4    <meta charset="UTF-8">
  5    <title>簡易留言板</title>
  6    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7    <meta name="apple-mobile-web-app-capable" content="yes">
  8    <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9    <style>
 10 
 11    </style>
 12    <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
 13    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
 14    <script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 15 
 16    <script src="../../node_modules/vue/dist/vue.js"></script>
 17    <script>
 18       window.onload=function(){
 19          new Vue({
 20  el:'#box',
 21  data:{
 22                myData:[],
 23                username:'',
 24                age:'',
 25                nowIndex:-100
 26             },
 27  methods:{
 28                add:function(){
 29                   this.myData.push({
 30                      name:this.username,
 31                      age:this.age
 32                   });
 33 
 34                   this.username='';
 35                   this.age='';
 36                },
 37                deleteMsg:function(n){
 38                   if(n==-2){
 39                      this.myData=[];
 40                   }else{
 41                      this.myData.splice(n,1);
 42                   }
 43                }
 44             }
 45          });
 46       };
 47    </script>
 48 </head>
 49 <body>
 50 <div class="container" id="box">
 51    <form role="form">
 52       <div class="form-group">
 53          <label for="username">用戶名:</label>
 54          <input type="text" id="username" class="form-control" placeholder="輸入用戶名" v-model="username">
 55       </div>
 56       <div class="form-group">
 57          <label for="age">年　齡:</label>
 58          <input type="text" id="age" class="form-control" placeholder="輸入年齡" v-model="age">
 59       </div>
 60       <div class="form-group">
 61          <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
 62          <input type="reset" value="重置" class="btn btn-danger">
 63       </div>
 64    </form>
 65    <hr>
 66    <table class="table table-bordered table-hover">
 67       <h3 class="h3 text-info text-center">用戶信息表</h3>
 68       <tr class="text-danger">
 69          <th class="text-center">序號</th>
 70          <th class="text-center">名字</th>
 71          <th class="text-center">年齡</th>
 72          <th class="text-center">操做</th>
 73       </tr>
 74       <tr class="text-center" v-for="(item,index) in myData">
 75          <td>{{index+1}}</td>
 76          <td>{{item.name}}</td>
 77          <td>{{item.age}}</td>
 78          <td>
 79             <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">刪除</button>
 80          </td>
 81       </tr>
 82       <tr v-show="myData.length!=0">
 83          <td colspan="4" class="text-right">
 84             <button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >刪除所有</button>
 85          </td>
 86       </tr>
 87       <tr v-show="myData.length==0">
 88          <td colspan="4" class="text-center text-muted">
 89             <p>暫無數據....</p>
 90          </td>
 91       </tr>
 92    </table>
 93 
 94    <!--模態框 彈出框-->
 95    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
 96       <div class="modal-dialog">
 97          <div class="modal-content">
 98             <div class="modal-header">
 99                <h4 class="modal-title">確認刪除麼?</h4>
100                <button type="button" class="close" data-dismiss="modal">
101                   <span>&times;</span>
102                </button>
103 
104             </div>
105             <div class="modal-body text-right">
106                <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
107                <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">確認</button>
108             </div>
109          </div>
110       </div>
111    </div>
112 </div>
113 </body>
114 </html>