vue.js
------------------
mvvm
m model 數(shù)據(jù)
v view? 視圖
vm? viewModel
------------------
1痊银、vue聲明方式
new Vue({
el:'選擇器'//vue的范圍
data:? //在這個范圍內(nèi)的所有參數(shù)
methods //在這個范圍內(nèi)的所有方法
})
注：1、選擇器，哪怕選出來的是一組席揽，也默認第一個有效果
2、el、data、methods固定的單詞不能變石蔗，里面隨便
3、this始終是vue
4畅形、當前觸發(fā)事件的對象
ev.target
2养距、vue的生命周期--從誕生到消亡
new對象----創(chuàng)建實例
鉤子---鉤子函數(shù)---生命周期鉤子
在對象聲明的過程中，會有不同的階段日熬，每個階段都有一個標志棍厌，這個標志就是鉤子，鉤子函數(shù)就是在每個對應階段執(zhí)行的函數(shù)
1、實例已經(jīng)創(chuàng)建 created
2定铜、編譯之前? ? beforeCompile
3阳液、編譯之后? ? compiled
4怕敬、模板替換? ? ready
5揣炕、消亡之前? ? beforeDestroy
6、消亡之后? ? destroyed
created:function(){
alert('實例已經(jīng)創(chuàng)建')
},
beforeCompile:function(){
alert('編譯之前')
},
compiled:function(){
alert('編譯之后')
},
ready:function(){
alert('插入到文檔中')
}东跪，
beforeDestroy:function(){
alert('銷毀之前')
},
destroyed:function(){
alert('銷毀之后')
}
3畸陡、實例的屬性：
vm.$watch? 監(jiān)控數(shù)據(jù)發(fā)生改變
vm.$destroy 銷毀對象
vm.$el? ? 就是容器對象
vm.$data? 就是數(shù)據(jù)data89
vm.$mount 手動掛在vue對象
vm.$log? ? 當前vue對象的狀態(tài)
eg：
vm.$watch? 監(jiān)控你的數(shù)據(jù)是否發(fā)生變化
vm.$watch('你要監(jiān)控的數(shù)據(jù)',function(str){? //淺度監(jiān)控
如果發(fā)生變化你要干什么
})
str是變化后的東西
注：數(shù)組和字符串發(fā)生改變都可以,但是json不行
vm.$watch('你要監(jiān)控的數(shù)據(jù)',function(){? //深度監(jiān)控
如果發(fā)生變化你要干什么
},{deep:true})
4、指令? 擴充了html語法
v-model="表單元素產(chǎn)生的數(shù)據(jù)"
radio on off
checkbox true false
v-for
v-for="v in arr"
v---value
$index---下標
v-for="name in json"
name---json里的值
$key---json里的建
v-for="(i,v) in arr"
i---下標
v---value
注：如果有重復的：+
{{v}}
v-on:
v-on:click/mouseover/keyup...
簡寫@click
$event
事件的簡寫
組織冒泡：@click.stop
組織默認事件：@click.prevent
鍵盤
@keyup.鍵碼
@keyup.enter/left/esc/space
注：傳參不能亂
自定義鍵碼：
Vue.directive('on').keyCodes.ctrl=17;
v-bind:
屬性里面放表達式可以虽填，但是最好用綁定的形式
v-bind:src/title/link
簡寫:src
:class
1丁恭、直接寫數(shù)據(jù)
data:{
? ? ? msg:'red'
}
:class="msg"
2、寫數(shù)組
:class="[a,b,c]"
//a b c 都是數(shù)據(jù)
3斋日、寫json
data:{
? ? json:{red:true,border:false}
}
:class="json"
:style
1牲览、直接寫
:style="a"
data:{
? ? a:{
? ? ? ? ? width:100px
? ? }
}
2、數(shù)組
:style="[a,b]"
data:{
? ? a:{
? ? ? ? width:100px
? ? },
? ? b:{
? ? ? ? width:100px
? ? }
}
3恶守、json
:style="{width:a,border:b}"
data:{
? ? a:'100px',
? ? b:'5px solid blue'
}
自定義指令：
Vue.directive('red',function(){
? ? this.el.style.background='red';
? ? //this.el 一個原生的對象
});
注：指令必須以v打頭
自定義元素指令
Vue.elementDirective('zns-red', {
? ? bind: function () {
? ? ? ? this.el.style.background='red';
? ? }
});
5第献、頁面渲染（模板，表達式）
非轉(zhuǎn)譯輸出
{{}}? 數(shù)據(jù)更新模板就變化
{{*}} 數(shù)據(jù)只綁定一次,初始化的時候是什么就是什么
轉(zhuǎn)譯輸出
{{{}}} 把html代碼轉(zhuǎn)化成頁面能看懂的
過濾器
|過濾器名稱 參數(shù)
currency 錢
uppercase 轉(zhuǎn)大寫
lowercase 轉(zhuǎn)小寫
capitalize 首字母大寫
debounce 配合事件來用兔港，延遲執(zhí)行
limitBy 數(shù)據(jù)處理
{{arr | limitBy 1}} 從頭開始截取幾個
{{arr | limitBy 1 2}}? 截取幾個 從哪開始
filterBy 過濾數(shù)據(jù)
orderBy
{{v}}
1 是字符串的排列方式的正序 默認是1
-1 倒敘
注：|過濾器名稱 |過濾器名稱.....
自定義過濾器
Vue.filter('過濾器名稱',function(input){
? ? return
? ? //input 就是要過濾的內(nèi)容
})
防止頁面刷新出現(xiàn)花括號
v-cloak? 把要渲染的數(shù)據(jù)先遮蔽注
注：一般用在模塊上庸毫，大段
在要渲染的模塊上加v-cloak
然后在樣式里面加
[v-cloak]{
? ? display:none
}
單個標簽
v-text="數(shù)據(jù)"
v-html="數(shù)據(jù)"? 轉(zhuǎn)譯輸出
6、屬性的計算：
computed:{**
? ? 要展示的屬性名:function(){
? ? ? ? return 返回什么就展示什么
? ? }
}
注：一定要寫return
---------------
computed:{
? ? 要展示的屬性名:{
? ? ? ? get:function(){},//一定要寫return
? ? ? ? set:function(){}//不寫return
? ? }
}
7衫樊、交互：
1飒赃、下載vue-resource.js
npm cnpm bower
2、引入
3科侈、使用
this.$http.get/post/jsonp('url',{params:{}}).then(succFn,errFn)
------------------------------
補充angularJS
渲染數(shù)據(jù)：
{{}}
如果angular掛了载佳，或者網(wǎng)速慢，出來{{}}
ng-bind
會把這個標簽內(nèi)的所有東西覆蓋掉
自定義過濾器
app.filter('過濾器名稱',function(){
return function(inp){
inp:要過濾的內(nèi)容
}
})
自定義指令
app.directive('指令名稱',function(){
return function(scope,element,attr){
}
})
