Angular+Vue+React
????Vue性能最好,Vue最輕
Angular
????入門難闹司，學習成本高
Vue
????簡單
Vue
????官網(wǎng):http://vuejs.org/
????中文:http://cn.vuejs.org/
????Vue.js的發(fā)展
1.x
2.x √
Vue如何玩?
new Vue({
el:'元素選擇器',
data:{
數(shù)據(jù)
},
methods:{
方法
方法中：this就是當前new出來的實例
}
});
事件
<button v-on:click="方法()">按鈕</button>
<button @click="方法()">按鈕</button>
指令:
v-model 指定數(shù)據(jù)
v-for 循環(huán)
v-for="value in arr"
v-for="(value,index) in arr"
v-for="(value,key,index) in json"
v-show 顯示
簡易留言板
計算屬性
{{reverseMessage}}
new Vue({
el:'#app',
data:{
message:'hello'
},
computed:{
reverseMessage(){
return this.message.split('').reverse().join('');
}
}
});
class操作
????:class="{active:true/false}"
style操作
????:style="{width:width+'px'}"
圖片
????:src=""
交互
????Vue本身不支持交互
????可以跟任何交互的庫配合
jquery
axios 交互庫
不支持jsonp,只支持ajax
鉤子函數(shù)???? 生命周期
beforeCreate 創(chuàng)建實例之前
created 創(chuàng)建實例完成
beforeMount 掛載之間
mounted 掛載完成
beforeUpdate 更新之前
updated 更新完畢
beforeDestroy 銷毀之前
destroyed 銷毀完畢
如何銷毀:
v.$destroy()
防止閃屏
[v-clock]{
display: none;
}
<div id="div1" v-clock></div>
事件
????事件對象
$event
@click
@contextmenu
@keydown
????事件冒泡
ev.cancelBubble = true;
@click.stop = "show()"
????默認事件
ev.preventDefualt();
@click.prevent = "show()"
????事件冒泡和默認事件同時解決
@click.stop.prevent = "show()"
????鍵盤事件
@keydown.ctrl/enter
????自定義按鍵
Vue.config.keyCodes.a = 65;
@keydown.a = "show()"
模板
????{{}}
????v-text
????v-html
vue——微博留言
