本例項運用vue的一些常用指令如：v-for,v-on,v-model等；
v-on:click=」「可簡寫為@click=「」
注：bootstrap是基於jquery的，所以引入bootstrap的同時，需引入jquery。
lang="en">
charset="utf-8">
title>
rel="stylesheet"
href="css/bootstrap.min.css"/>
src="js/jquery-1.7.2.js">
script>
src="js/bootstrap.js">
script>
src="js/vue.js">
script>
window.onload=function
(), methods:);
this.username='';
this.age=''; //清空值
this.wage='';
},deletemsg:function
(n)else}}
})}
script>
head>
class="container"
id="box">
role="form">
class="form-group">
for="username">使用者名稱:label>
type="text"
class="form-control"
id="username"
v-model="username"
placeholder="請輸入使用者名稱.."/>
div>
class="form-group">
for="age">年 齡:label>
type="text"
class="form-control"
id="age"
v-model="age"
placeholder="請輸入年齡.."/>
div>
class="form-group">
for="wage">工 資:label>
type="text"
class="form-control"
id="wage"
v-model="wage"
placeholder="工資.."/>
div>
class="form-group">
type="button"
value="新增"
class="btn btn-primary" @click="add()"/>
type="reset"
value="重置"
class="btn btn-danger"/>
div>
form>
class="table table-bordered table-hover">
class="h3">使用者資訊表caption>
class="text-center">序號th>
class="text-center">使用者名稱th>
class="text-center">年齡th>
class="text-center">工資th>
class="text-center">操作th>
tr>
class="text-center"
v-for="item in mydata">
}td>
}td>
}td>
}td>
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#layer"
@click="nowindex=$index">刪除button>
td>
tr>
v-show="mydata.length!=0">
colspan="5"
class="text-center">
class="btn btn-danger" @click="nowindex=-2"
data-toggle="modal"
data-target="#layer">全部刪除button>
td>
tr>
v-show="mydata.length==0">
colspan="5"
class="text-center">
暫無資料.....
td>
tr>
table>
role="dialog"
class="modal"
id="layer">
class="modal-dialog">
class="modal-content">
class="modal-header">
class="close"
data-dismiss="modal">
×span>
button>
確認刪除嗎？
div>
class="modal-body text-right">
class="btn btn-primary"
data-dismiss="modal" @click="deletemsg()">確認button>
class="btn btn-danger"
data-dismiss="modal">取消button>
div>
div>
div>
div>
div>
body>
html>
vue學習筆記 搭建簡單的todolist
要熟悉乙個框架，需要弄清楚怎麼做到元件間的相互通訊，而todolist是乙個用來練習元件間相互通訊的很好的小demo 首先使用vue cli搭建乙個專案，具體參考我的另一篇部落格vue cli搭建vue專案 記錄todo內容，可增加和刪除todo內容，並標記是否已完成 在搭建todolist時，使用...
react元件化todolist例項
首先建立react的腳手架 具體建立步驟自己查 首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫 此處只是做乙個小例子演示下react的元件化 元件化的理解 1.元件的封裝 檢視 ...
用vue元件封裝todolist
用vue元件封裝todolist cssbody header section label header input input focus h2span ol,ul li input pli p input li p input.editer liol li ul li li a footer f...