2018-09-15

1.v-text

   <a href="#" v-once>{{msg}}</a> <br>
   <a href="#" v-pre>{{msg}}</a>

</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'今天周六，照常上课'
}
})

</script>

*2.v-cloak

<div id='app'>
<h1 v-cloak>{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hellovue'
},
beforeMount:function(){
alert(1111)
}
})

</script>

*3.shopping

   <a href="#" v-once>{{msg}}</a> <br>
   <a href="#" v-pre>{{msg}}</a>

</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'今天周六，照常上课'
}
})

</script>

*4.用户管理
<div class='container'>
<form>
<div class='form-group'>
<label>用户名</label>
<input type="text" placeholder="请输入用户名" class='form-control' v-model='student.uname'>
</div>
<div class='form-group'>
<label>密码</label>
<input type="text" placeholder="请输入密码" class='form-control' v-model='student.age'>
</div>
<div class='form-group'>
<label>邮箱</label>
<input type="text" placeholder="请输入邮箱" class='form-control' v-model='student.email'>
</div>
<div class='form-group text-center'>
<input type="button" value='添加' class='btn btn-success' v-on:click='add'>
<input type="button" value='重置' class='btn btn-info'>
</div>
</form>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in user">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.age}}</td>
<td>{{value.email}}</td>
<td>
<button v-on:click='delt(index)'>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src='../js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:".container",
data:{
user:[
{uname:'jack',age:18,email:'abc@126.com'}
],
student:{}
},
methods:{
add:function(){
var newStu={};
for(var i in this.student){
newStu[i]=this.student[i];
}
this.user.push(newStu);
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})

</script>

2018-09-15

推荐阅读更多精彩内容