這里我們學(xué)習(xí)vue1.0和2.0看看他們之間有什么不同防泵；
1.vue的基礎(chǔ)指令##
1.1 v-on 指令的使用；####
//html
<button v-on:click="change"> 改變name值</button>
//可以使用簡寫方式
<button @click="change"> 改變name值</button>
//js
var vm = new Vue({
el:'#app', //表示當(dāng)前vue對象接管app的div區(qū)域
data: {
name:'黑馬程序員' // 相當(dāng)于是MVVM中的Model這個角色
},
methods:{
change:function(){
this.name += '1';
}
}
});
注意：
- 常用事件：v-on:click,keydown,keyup,mouseover,submit等闽烙；
- 可是使用簡寫方式 @click;
- 事件修飾符：(.prevent声搁，.stop ),分別代碼阻止默認行為捕发，和阻止冒泡
1.2 差值表達式
//html
<div id="app">
{{ name + '1'}}
{{ name == 'wo'? 'true': 'false' }}
{{ if1(name) }}
</div>
//js
var vm = new Vue({
el:'#app',
data: {
name:'黑馬程序員'
},
methods:{
'if1':function(str){
return str == 'wo'
}
}
});
注意:定義函數(shù)名稱的使用盡量避免使用es6關(guān)鍵字；由于差值表達式會出現(xiàn)閃爍問題扎酷，所以使用時應(yīng)該避免閃爍問題。
1.3 v-text 和 v-html
<div id="app">
<span v-text="name"></span>
<div v-html="name"></div>
</div>
new Vue({
el :'#app',
data:{
name:'<h1>黑馬程序員</h1>'
}
});
注意：text會轉(zhuǎn)義標簽谁榜，html不會轉(zhuǎn)義標簽
1.4 v-bloak 指令(解決{{}} 閃爍問題)####
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app">
<span v-cloak>{{name}}</span>
</div>
</body>
//js
new Vue({
el:'#app',
data:{
name:'黑馬程序員'
}
});
注意：要寫對應(yīng)的css代碼配合使用
1.5 v-bind
<body>
<div id="app">
<input type="text" v-bind:value="name">
//簡寫方式
<input type="text" :value="name">
//常量與變量搭配使用
<a v-bind="{href:'http://itcast.cn/index/'+id}">跳轉(zhuǎn)</a>
</div>
</body>
var vm = new Vue({
el:'#app',
data:{
name:'黑馬程序員',
id:2
}
});
注意：在使用v-bind的使用如果有部分內(nèi)容不變凡纳，我們可以使用第三種方式；
1.6 v-model 雙向數(shù)據(jù)綁定####
<div id="app">
<input type="text" v-model="name">
<form action="#">
<input type="text" id="username" v-model="user.uname" >
<input type="password" id="pwd" v-model="user.upwd">
<input type="submit" v-on:click="submit" value="注冊">
</form>
</div>
/js
var vm = new Vue({
el:'#app',
data:{
name:'黑馬程序員',
user:{uname:'',upwd:''}
},
methods:{
submit:function(){
alert(this.user.uname +" pwd="+this.user.upwd);
}
}
});
注意：
1.使用v-model的時候存在修飾符撕瞧，number .lazy .trim
2.但是在vue1.0 與vue2.0的用法并不相同狞尔，下面給出一個案例巩掺，具體的請查看官網(wǎng)文檔 修飾符
vue1.0的修飾符
<input type="text" v-model="age" number>
vue 2.0的修飾符
<input type="text" v-model.number="age" >
1.7 v-for####
<div id="app">
<ul>
<!-- vue1.0 的寫法 -->
<li v-for="(index,item) in list" track-by="$index">{{index}}-{{item}}</li>
<!-- vue 2.0的寫法
<li v-for="(item,index) in list" :key="index">{{index}}-{{item}}</li>-->
<!-- <li v-for ="(key,item) in user">{{key}}-{{item}}</li> -->
</ul>
</div>
//js
new Vue({
el:'#app',
data:{
list:[1,2,3,4,4],
user:{uname:'itcast',age:10}
}
});
注意：vue 1.0 與 2.0 對于 v-for 使用區(qū)別總結(jié)
- vue1.0 總有 $index,在2.0中移除了$index
- vue1.0 中 （index,item） in list 胖替，而在2.0中變成了（item,index）in list 的寫法
- vue1.0 中 使用 trakck-by 來標記 dom 對象的唯一性，vue2.0中改成了：key
1.8 v-if 與 v-show
<body>
<div id="app">
<button v-on:click="toggle">顯示隱藏切換</button>
<div v-show="isshow">div的值</div>
</div>
</body>
new Vue({
el:'#app',
data:{
isshow:true
},
methods:{
toggle:function(){
//實現(xiàn)業(yè)務(wù)則只需要將isshow的值每次都取反即可
this.isshow =!this.isshow;
}
}
});
注意：
v-if 如果不顯示則會刪除dom節(jié)點独令， v-show 則是在節(jié)點上增加 display:none;
