一、Vue常用指令
- v-once 也是雙向數(shù)據(jù)綁定，但數(shù)據(jù)只綁定一次
- v-pre 原樣輸出
- v-bind 綁定屬性 v-bind:屬性='值'
- v-text 單向數(shù)據(jù)綁定，不可識別標(biāo)簽
- v-html 單向數(shù)據(jù)綁定,可以識別標(biāo)簽
1.v-once數(shù)據(jù)只綁定一次
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p>{{msg}}</p>
<p v-once>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:'welcom to vue'
}
})
</script>
使用v-once綁定的元素中的內(nèi)容不會隨著input中輸入的內(nèi)容變化而變化，始終保持最初始的樣子
2.v-pre原樣輸出
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p v-pre>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:''
}
})
</script>
</body>
使用v-pre的標(biāo)簽之間的內(nèi)容不會進(jìn)行編譯，而是兩標(biāo)簽之間寫什么就會輸出什么
3.v-bind：綁定屬性
<body>
<div id='itany'>
<img v-bind:src="url">
<img :src="url">//簡寫
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
v-bind綁定屬性，v-bind:屬性名=‘值’，也可以省略v-bind,直接在屬性前面加冒號:, :屬性名=‘值’
4.綁定class屬性：綁定class屬性一般使用json的方式
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aaa{
color:red;
}
.bbb{
background:blue;
}
</style>
</head>
<body>
<div id='itany'>
//綁定屬性
<p v-bind:class={aaa:true,bbb:true}>hello vue.js</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
我們想使用哪個屬性就設(shè)置哪個屬性為true就可以了，如果不想使用哪個屬性，那設(shè)置它的值為false就可以了
5.v-text / v-html 單向數(shù)據(jù)綁定
<body>
<div id='itany'>
<input type="text" name="" v-model='msg'>
<p v-text='msg'>{{msg}}</p>
<p v-html='msg'>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:'scsa'
}
})
</script>
</body>
單向數(shù)據(jù)綁定有兩種方式
方式一：使用v-text v-html
方式二：使用兩對大括號{{}},可能會出現(xiàn)閃爍問題，可以使用v-cloak解決
v-cloak
<body>
<div id='itany'>
<p>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:"hello vue"
},
created:function(){
alert(111)
}
})
</script>
</body>
如果我們想在vue實例創(chuàng)建的時候，執(zhí)行一段代碼，然后再把msg編譯到頁面上，但是我們會發(fā)現(xiàn)在執(zhí)行聲明周期中的東西是，msg還沒有被編譯完也會原樣輸出(有兼容性問題，建議多個瀏覽器去測試)，為了不讓這種情況出現(xiàn)，我們必須使用v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
[v-cloak]{//屬性選擇器，使用v-cloak必須加上這個樣式
display: none;
}
</style>
</head>
<body>
<div id='itany'>
<p v-cloak>{{msg}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
msg:"hello vue"
},
created:function(){
alert(111)
}
})
</script>
</body>
</html>
6.練習(xí)：完成如下圖所示的購物車練習(xí)
1.png
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購物車</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div id='itany'>
<h1>總價:￥{{total}}</h1>
<table class='table table-bordered table-straped text-center'>
<thead>
<tr>
<th class='text-center'>編號</th>
<th class='text-center'>名稱</th>
<th class='text-center'>單價</th>
<th class='text-center'>數(shù)量</th>
<th class='text-center'>總價</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in fruitList">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{val.num}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{val.sub}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'#itany',
data:{
fruitList:[
{name:'香蕉',price:2.5,num:2,sub:5},
{name:'蘋果',price:3.5,num:3,sub:10.5},
{name:'鴨梨',price:4.5,num:4,sub:18}
],
total:0
},
methods:{
add:function(index){
this.fruitList[index].num++;
this.fruitList[index].sub=Number(this.fruitList[index].num)*Number(this.fruitList[index].price);
//調(diào)用總價
this.toal(index);
},
redu:function(index){
if(this.fruitList[index].num>1){
this.fruitList[index].num--;
this.fruitList[index].sub=Number(this.fruitList[index].num)*Number(this.fruitList[index].price);
}
//調(diào)用總價
this.toal();
},
toal:function(){
for(var i=0,sum=0;i<this.fruitList.length;i++){
sum+=this.fruitList[i].sub;
this.total=sum.toFixed(2);
}
}
}
})
</script>
</body>
</html>
