[vue]-No.03

[2017.03.16]

安裝vue：nmp install vue;
在頁面中引入vue.js：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
入門小例子：

<body>   
 <div id="box">
        {{msg}}    
</div>
</body>
<script type="text/[JavaScript](http://lib.csdn.net/base/javascript)"> 
   window.onload = function(){        
var c = new Vue({           
 el:'#box', //選擇器            
data:{                
msg:'Welcome'            
}        
});    
};
</script>

data里的數(shù)據(jù)：
字符串，數(shù)字，數(shù)組，json，bool；
常用指令：
v-model（產(chǎn)生數(shù)據(jù)）：

<div id="box">        
  <input type="text" v-model="msg">
</div>

ps：其中數(shù)據(jù)雙向綁定，msg修改時(shí)同步的；
v-for(循環(huán)):(自帶index)--對于json數(shù)據(jù)還帶有key
要輸出json數(shù)據(jù)&數(shù)組時(shí)需要循環(huán)輸出：
對于數(shù)組：

arr:["apple", "pear","orange"]
<ul>
            <li v-for="(value,index) in arr">
                {{value}} {{index}}            
</li> </ul>

對于json：

<li v-for="(value,index,key) in json"> 
               {{value}} {{index}} {{key}}
</li>
v-for="(k,v) in json"
{{k}} {{v}}

v-show: 隱藏消失
v-show="false"時(shí)消失；

<input type="button" value="disappear" v-on:click="showornot=true"><br>
<div v-show="showornot">
    我要出現(xiàn)辣！
</div>

基本事件：
v-on:click --點(diǎn)擊事件
事件方法放在methods里，methods與data同級(jí)；
一定要注意它所在的選擇器要對應(yīng)上才可以，否則事件設(shè)置時(shí)無效的；

<input type="button" value="show" v-on:click="show()">
<br>
<input type="button" value="add" v-on:click="add()">
<br>
methods:{
 show:function(){ 
 alert(1);//輸出數(shù)據(jù)                    
},                    
add:function(){
 this.arr.push("banana");//對該選擇器下的數(shù)組進(jìn)行動(dòng)態(tài)添加                    
}
}

v-on:mouseover, mouseout, mousedown, dblclick(雙擊);

簡易留言板(bootstrap + vue.js)：
bootstrap：css框架 ---只需要給元素賦class，角色；
一些樣式無需自己定義；

<link  rel="stylesheet">
<script src="https://code.[jQuery](http://lib.csdn.net/base/jquery).com/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

布局：
兩個(gè)信息輸入框，添加按鈕，重置按鈕，信息展示框（框內(nèi)每條記錄有三個(gè)字段和一個(gè)操作），有刪除全部按鈕；
樣式：
輸入框--class="form-control"，placehold 底部默認(rèn)提示；
組合--class="form-group"；
按鈕--class="btn btn-primary"（藍(lán)色普遍按鈕），class="btn btn-danger"（紅色警示按鈕）；
表格--class="table table-bordered table-hover"（細(xì)邊框，鼠標(biāo)滑過每條記錄時(shí)的加深效果）；
表格列--colspan="4" class="text-center"（合并一列）；
其他--class="text-info text-center"（字體加粗以及居中）；
模態(tài)框--role="dialog" class="modal fade bs-example-modal-sm" id="layer"（role角色就是模態(tài)框，fade由上滑下，bs-example-modal-sm型號(hào)small），模態(tài)框內(nèi)層有content，content內(nèi)層分header和body，header可以放置關(guān)閉x和標(biāo)題，body內(nèi)可以放置其他提示以及一些關(guān)鍵確認(rèn)按鈕；
功能：
添加記錄，重置輸入框，刪除記錄，清除記錄；
① 添加紀(jì)錄：就是讀取輸入框內(nèi)信息，對數(shù)組進(jìn)行push內(nèi)容
v-on:click="add()"
add:function(){this.mydata.push({name:this.username,age:this.age});}
其中username和age是這個(gè)vue的內(nèi)部數(shù)據(jù)變量；
② 重置輸入框：采用v-model屬性，尤其是它的數(shù)據(jù)雙向綁定
在輸入框加載時(shí)就將username和age作為默認(rèn)值；
v-on:click="reset()"
reset:function(){this.username = "";this.age = "";}
③ 刪除記錄以及清除記錄：在刪除時(shí)我們想要它能跳出一個(gè)確認(rèn)提示框--采用模態(tài)框
刪除按鈕需要和模態(tài)框進(jìn)行綁定；
data-toggle="modal" data-target="#layer"（layer時(shí)模態(tài)框的id）；
在刪除時(shí)需要獲得當(dāng)前需被刪除的記錄索引，所以在按下刪除按鈕時(shí)就須獲得當(dāng)前的索引值index（現(xiàn)在的index時(shí)不需要$符號(hào)的）；
v-on:click="nowIndex=index"
然后在確認(rèn)提示框的確認(rèn)按鈕下對記錄進(jìn)行刪除/清除；（函數(shù)名不能采用delete）
v-on:click="deleteMsg(nowIndex)"
deleteMsg:function(n){if(n == -2){this.mydata = [];}elsethis.mydata.splice(n,1);}
效果：
初始：



添加記錄：
[圖片上傳中。。。（2）]
確認(rèn)提示框：



刪除第一條記錄：

清除所有記錄：

完整代碼：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>留言板</title>  
    <link  rel="stylesheet">  
    <script src="https://code.jquery.com/jquery.js"></script>  
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script>  
        window.onload = function(){  
            new Vue({  
                el:"#box",  
                data:{  
                    mydata:[  
                        {name:'Tom', age:'13'},  
                        {name:'Amy', age:'19'},  
                        {name:'Tony', age:'54'}  
                    ],  
                    username:'',  
                    age:'',  
                    nowIndex:-100  
                },  
                methods:{  
                    add:function(){  
                        this.mydata.push({  
                            name:this.username,  
                            age:this.age  
                        });  
                    },  
                    reset:function(){  
                        this.username = "";  
                        this.age = "";  
                    },  
                    deleteMsg:function(n){  
                        if(n == -2){  
                            this.mydata = [];  
                        }  
                        else  
                        this.mydata.splice(n,1);  
                    }  
                }  
                });  
            }  
    </script>  
</head>  
<body>  
    <div class="container" id="box">  
        <form role="form">  
            <div class="form-group">  
                <label for="username">username</label>  
                <input type="text" id="username" class="form-control" placeholder="enter username" v-model="username">  
            </div>  
            <div class="form-group">  
                <label for="age">age</label>  
                <input type="text" id="age" class="form-control" placeholder="enter age" v-model="age">  
            </div>  
            <div class="form-group">  
                <input type="button" id="add" value="add" class="btn btn-primary" v-on:click="add()">  
                <input type="button" id="submit" value="reset" class="btn btn-danger" v-on:click="reset()">  
            </div>  
        </form>  
        <hr>  
        <table class="table table-bordered table-hover">  
            <caption class="h3 text-info text-center">Message</caption>  
            <!-- text-info 加粗 -->  
            <tr class="text-info text-center">  
                <th class="text-center">NO</th>  
                <th class="text-center">name</th>  
                <th class="text-center">age</th>  
                <th class="text-center">operate</th>  
            </tr>  
            <tr class="text-center" v-for="(item,index) in mydata">  
                <td>{{index}}</td>  
                <td>{{item.name}}</td>  
                <td>{{item.age}}</td>  
                <td>  
                    <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">delete</button>  
                </td>  
            </tr>  
            <!-- 合并四個(gè)單元格 -->  
            <tr v-show="mydata.length != 0">  
                <td colspan="4" class="text-center">  
                    <button class="btn btn-danger" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">delete all</button>  
                </td>  
            </tr>  
            <tr v-show="mydata.length == 0">  
                <td colspan="4" class="text-center text-info text-muted">  
                    <p>暫無數(shù)據(jù)...</p>  
                </td>  
            </tr>  
        </table>  
        <!-- 模態(tài)框 彈出框 -->  
        <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">  
            <div class="modal-dialog">  
                <div class="modal-content">  
                    <div class="modal-header">  
                        <button class="close" data-dismiss="modal">  
                            <span>×</span>  
                        </button>  
                        <h3 class="modal-title">確認(rèn)刪除嗎？</h3>  
                    </div>  
                    <div class="modal-body text-right">  
                        <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>  
                        <button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">確認(rèn)</button>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

簡約版留言板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>practice01</title>
    <link  rel="stylesheet">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- my data source -->
      <script>
        window.onload = function(){
          new Vue({
              el:"#box",
              data:{
                  myMsg:[
                  ],
                  username:'',
                  msg:'',
                  nowIndex:-100
              },
              methods:{
                  add:function(){
                      this.myMsg.push({
                          name:this.username,
                          msg:this.msg
                      });
                  }
              }
              });
        }
      </script>
  </head>
  <body>
    <div id="box">
      <!-- {{msg}} -->
      <form class="form">
        <div class="form-group">
          <label>username</label>
          <input type="text" name="username" placeholder="username" class="form-control" v-model="username">
        </div>
        <div class="form-group">
          <label>Message</label>
          <textarea type="text" name="msg" placeholder="message" class="form-control" v-model="msg"></textarea>
        </div>
        <div class="form-group">
          <input type="button" value="add" class="btn btn-primary float-right" v-on:click="add()">
        </div>
      </form>
      <p v-show="myMsg.length==0" class="text-center">暫無留言</p>
      <div class="form-group"  v-for="(item,index) in myMsg">
        <label>{{item.name}}</label>
        <div class="text-center">{{item.msg}}</div>
        <hr>
      </div>
    </div>
  </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容