v-for="" 循環(huán)
v-model 雙向數據綁定 一般用于表單元素
v-on:事件名 v-on:click="函數名" @click="" 綁定事件
v-show/v-if 控制元素的顯示或隱藏
v-bind:屬性名='' 簡寫： ：屬性名='' 綁定屬性
v-if
v-else
v-else-if
v-html
v-text
v-once 只綁定一次
v-pre 原樣輸出
v-cloak
過濾器：對顯示在頁面上的數據進行處理篩選操作
//js
Vue.filter('過濾器的名字',function(data){
})
//html
{{8|過濾器的名字}}
這是添加和刪除的一個實例
QQ截圖20180915080418.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.css">
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" placeholder="請輸入用戶名" v-model='txt.uname'>
</div>
<div class="form-group">
<label for="">年齡</label>
<input type="text" class="form-control" placeholder="請輸入年齡" v-model='txt.age'>
</div>
<div class="form-group">
<label for="">郵箱</label>
<input type="text" class="form-control" placeholder="請輸入郵箱" v-model='txt.email'>
</div>
<div class="form-group text-center">
<input type="button" class="btn btn-success" value='添加' @click="add">
<input type="button" class="btn btn-info" value='重置'>
</div>
</form>
<table class="table table-bordered">
<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.uname}}</td>
<td>{{value.age}}</td>
<td>{{value.email}}</td>
<td>
<button @click='delt(index)'>刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'.container',
data:{
user:[
{uname:'jack',age:18,email:'abc@126.com'},
{uname:'tom',age:19,email:'efg@126.com'},
{uname:'lily',age:20,email:'sed@126.com'}
],
txt:{}
},
methods:{
add:function(){
this.user.push(this.txt)
},
delt:function(ind){
this.user.splice(ind,1)
}
}
})
</script>
</body>
</html>
刷新會隨機
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<p v-if='num==0'>林林林林林林林</p>
<p v-else-if='num==1'>子子子子子子</p>
<p v-else-if='num==2'>陽陽陽陽陽</p>
<p v-else-if='num==3'>帥帥帥帥帥帥帥</p>
<p v-else-if='num==4'>王王王王王王</p>
<p v-else='num==5'>康康康康康康</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
num:Math.floor(Math.random()*(5-0+1)+0)
}
})
</script>
</body>
</html>
QQ截圖20180915081528.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="itany">
<input type="text" v-model='wsk'>
<p v-html='wsk'>{{wsk}}</p>
<p v-text='wsk'>{{wsk}}</p>
<p v-once='wsk'>{{wsk}}</p>
<p v-pre='wsk'>{{wsk}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
wsk:'ni hao'
}
})
</script>
</body>
</html>
QQ截圖20180915081636.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
[v-cloak]{
display:none;
}
</style>
</body>
<div id="itany">
<p v-cloak>{{wsk}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
wsk:'hello vue'
},
beforeMount:function(){
alert(111)
}
})
</script>
</html>
如果小于10就會是01-09
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p>{{1|addZero}}</p>
</div>
<script src='vue.js'></script>
<script>
//全局過濾器
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
</html>