生活随笔
收集整理的這篇文章主要介紹了
Vue入门 ---- 简易留言板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
##簡述
初學vue，比Angular要簡單易學一點，基本就是html代碼+json。這是第一個小的例子，用到了vue的幾個常用方法，其中v-for的$index稍微有點迷惑，也影響了完成的速度，網上說是vue2.0已經取消了這種用法，也不是很明白，跟著教程走的，后面的教程有講解vue2.0的新特性，所以到后面完善吧。同時復習到了bootstrap的知識，之前知識稍微用過，現在才漸漸的明白這種css框架的內涵—賦class和角色role，bootstrap依賴于jQuery，所以庫文件也要有jQuery的文件，而bootstrap.js主要提供各種組件，諸如模態框之類的。
注：不要弄混v-model和模態框的modal
##基本知識：
vue
v-model
v-for
v-on:xxx
v-show
bootstrap:
//class
.container（外部容器）
.fade（從上滑入）
.data-toggle和.data-target（處理模態框）
.text-muted（文本灰色）
//role
form
dialog
modal-dialog
##配置庫文件
<!-- 引入bootstrap.min.css --><link rel="stylesheet" href="lib\bootstrap.min.css"><!-- 引入jquery --><script src="lib\jquery-3.3.1.min.js"></script><!-- 引入bootstrap.js --><script src="lib\bootstrap.js"></script><!-- 引入vue.js --><script src="lib\vue.js"></script>
##Script
<script>window.onload = function() {new Vue({el: '#box',// 注意這里面的內容為json，不要出現"="data: {myData: [],username: '',age: '',nowIndex: -100,deletemsg: '',},methods: {add: function() {this.myData.push({name: this.username,age: this.age,});this.username = '';this.age = '';},deleteMsg: function(n) {if (n == -1) {this.myData = ''; };this.myData.splice(n, 1);}},})}</script>
兩個方法：add()，添加數據；deleteMsg()，刪除數據
##html
<body><!-- 這里注意是class，container是控制全局居中在一個合適的位置 --><div class="container" id="box"><form role="form"><!-- 將標簽和控件放在一個.form-group的<div>中，是獲得最佳的間距所必需的 --><div class="form-group"><label for="username">用戶名：</label><!-- bootstrap向所有的文本元素input、textarea、select添加.form-control --><input type="text" id="username" class="form-control" placeholder="請輸入用戶名" v-model="username"></div><div class="form-group"><label for="age">年齡：</label><input type="text" id="age" class="form-control" placeholder="請輸入年齡" v-model="age"></div><div class="form-group"><!-- 這里注意是button，如果寫submit每次都會刷新頁面，數據一閃而過 --><input type="button" value="添加" class="btn btn-primary" v-on:click="add()"><input type="reset" value="重置" class="btn btn-danger"></div></form><hr><!-- .table-bordered邊框 .table-hover移入效果--><table class="table table-bordered table-hover"><caption class="h3 text-info text-center">用戶信息表</caption><tr class="text-danger"><th class="text-center">序號</th><th class="text-center">姓名</th><th class="text-center">年齡</th><th class="text-center">操作</th></tr><!-- 此處注意vue2.0中不支持{{$index}} --><tr class="text-center" v-for="(item, index) in myData"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index; deletemsg='確認刪除嗎？'"">刪除</button></td></tr><tr v-show="myData.length != 0"><td colspan="4" class="text-right"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-1"; deletemsg='確認刪除全部嗎？'">全部刪除</button></td></tr><tr v-show="myData.length == 0"><td colspan="4" class="text-center text-muted"><p>暫無數據...</p></td></tr></table><!-- 對話層，即模態框 --><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放下面會出現錯位 --><button type="button" class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title">{{deletemsg}}</h4></div><hr><div class="modal-body text-right"><button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button><button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">確認</button></div></div></div></div></div>
</body>
##效果
總結
以上是生活随笔為你收集整理的Vue入门 ---- 简易留言板的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
