vue中計時器
在mounted中設置計時器setInterval，在beforeDestroy中解除計數(shù)器clearInterval；
var timer = setInterval(function(){ 修改數(shù)據(jù) },500)；
clearInterval(timer);
mounted(){
var _this = this; //聲明一個變量，指向vue實例，保證作用域一樣；
_this.name = '你好啊vue項目';
this.timer = setInterval(function(){
_this.time = new Date().getFullYear() +'年'+ (new Date().getMonth()+1) +'月'+ new Date().getDate() +'日'+ new Date().getHours() +':'+ new Date().getMinutes() +':'+ new Date().getSeconds() ;
},500);
},
beforeDestroy(){
if(this.timer){
clearInterval(this.timer)
}
},
三元運算
條件判斷？是：否
<span>{{number === 10? number : '數(shù)字不是10'}}</span>
在vue里{{ }}支持表達式和綁定數(shù)值，如果想要連同大括號顯示，使用v-pre,則標簽里的內(nèi)容就不會進行編譯，直接輸出
<span v-pre>{{這里的內(nèi)容是不會被編譯的}}</span>
輸出結果：
{{這里的內(nèi)容是不會被編譯的}}
過濾器filter
用途：用于對數(shù)據(jù)進行格式化處理，這些處理規(guī)則是自定義的，在vue實例里添加filter選項；過濾器主要用于簡單的數(shù)據(jù)轉換，更復雜的數(shù)據(jù)轉換使用計算屬性；
{{數(shù)值 | 過濾器名字}}
filters:{過濾器名字1:function(value){數(shù)值轉換;return 整理好的數(shù)值}}
<p>時間毫秒值{{ time | modify}}</p>
filters:{
modify:function(value){ //value是過濾器接受的第一個參數(shù)，傳值的話則是第二個第三個參數(shù)；
return new Date().getTime()
}
},
v-on/v-bind
v-bind基本用途：更新HTML元素的屬性,如img的src或者id，class等等，數(shù)據(jù)在data選項中聲明
v-bind還可以綁定樣式名稱class和內(nèi)聯(lián)樣式style
v-bind
1.v-bind更新元素屬性；
<a v-bind:href="bdurl">百度鏈接</a>
data () {
return {
bdurl:'http://baidu.com'
}
},
2.v-bind綁定class，需要依賴判斷isA是否為true；當表達式冗長時優(yōu)先想到計算屬性
格式： :class="{'class類名':數(shù)值判斷條件}"
<span :class="{'coo':isA}">{{prices}}</span>
//多個class，在條件成立時渲染
<span :class="{'coo':isA,'coo1':isB}">{{prices}}</span>
點擊切換樣式
<span :class="[isA ? 'coo' :'coo1']" @click='isA = !isA'>{{prices}}</span>
3.v-bind綁定內(nèi)聯(lián)樣式style,和綁定class一樣，為了代碼維護，多用在data或者i算屬性中
<p :style='styles'>北京時間:{{time}}</p>
data () {
return {
styles:{
fontSize:45+'px',
color:'#f00'
},
}
},
應用多個樣式對象時，使用數(shù)組；實際，應用樣式數(shù)組并不是很多，因為都會寫在一個對象里，更多的使用計算屬性
<p :style='[styles,style1]'>北京時間:{{time}}</p>
v-on基本用途：綁定事件監(jiān)聽器，表達式可以是函數(shù)，也可以是表達式，此時函數(shù)中的this指向vue實例.所以不可以使用箭頭函數(shù)..為了方便數(shù)據(jù)維護，最好使用函數(shù)
v-on綁定的事件除了click，還有dbclick/keyup/mousemove
<h1 v-on:click='dianji()'>{{ msg }}</h1>
methods:{
dianji:function(){
this.msg = '點擊切換信息'
}
}
語法糖
在不影響功能的情況下，用更簡單的方法實現(xiàn)。也可以說是縮寫
v-on -------@;
v-bind------: ;
計算屬性
模板中的數(shù)據(jù)或表達式過于冗長或者邏輯復雜時，需要使用計算屬性.此時的數(shù)據(jù)不需要再data中聲明
所有的計算屬性都是以函數(shù)的形式，寫在vue實例里的computed，最終返回數(shù)據(jù)結果
計算屬性還可以依賴多個vue實例，只要最后返回數(shù)據(jù)
在函數(shù)的最后返回數(shù)據(jù)
eg;購物車里的商品價格總和
data () {
return {
bag1:[
{
name:'手機1',
price:1800,
num:2
},
{
name:'手機2',
price:3200,
num:1
},
{
name:'手機3',
price:7900,
num:2
}
],
bag2:[
{
name:'電腦1',
price:18000,
num:2
},
{
name:'電腦2',
price:32000,
num:1
},
{
name:'電腦3',
price:79000,
num:2
}
]
}
}
computed:{
prices:function(){
var prices = 0;
for(var i=0; i<this.bag1.length;i++){
prices += this.bag1[i].price*this.bag1[i].num;
}
for(var i=0; i<this.bag2.length;i++){
prices += this.bag2[i].price*this.bag2[i].num;
}
return prices;
}
}
上面使用的都是計算屬性的默認使用方法，每個計算屬性都有setter和getter。但是一般情況i下不會使用setter。getter用于讀取數(shù)據(jù)，當手動修改計算屬性的值時，就會觸發(fā)setter函數(shù)。
計算屬性兩個實用的小技巧：1.計算屬性可以依賴計算屬性；2.計算屬性還可以依賴其他vue實例的數(shù)據(jù)；在組件化開發(fā)中經(jīng)常使用
var app1= new Vue({
el:'#app1',
data(){
return {
text:123456
}
}
})
//組件2依賴了組件1的數(shù)值，當組件1修改數(shù)據(jù)值，組件2會發(fā)生相應的變化
var app2= new Vue({
el:'#app2',
computed:{
reversedText: function(){return appl.text.split (',') . reverse() . join( ','）}
}
})
調用methods方法和計算屬性可能實現(xiàn)的效果時相同的，但是計算屬性時依賴緩存的，一個計算屬性所依賴的數(shù)據(jù)發(fā)生變化時，它才會重新取值。而methods（），只要重新重新渲染就會被調用。在處理大量數(shù)據(jù)時，使用計算屬性還是比較好的，除非你不需要緩存
