指令
使用’{{}}‘訪問vue實例裏data內的數據，’{{}}'稱之爲插值表達式，此方式訪問數據會有數據閃爍的問題。
- v-text:作用與’{{}}'插值表達式類似，只是v-text會將html內容覆蓋，v-text可以做類似的表達式計算，前提是i是數字，v-text=“i+1”
- v-cloak:解決能夠解決插值表達式閃爍的問題
- v-html:可以把數據當作html內容解析，且也會覆蓋綁定html元素的內容。
- v-bind:是用來綁定屬性的，可以簡寫爲冒號’:’
<input type="button" value="按鈕" v-bind:title="title+'哈哈'">
可簡寫爲：
<input type="button" value="按鈕" :title="title+'哈哈'">
可以看到 引號裏面也是可以寫表達式的。
- v-on:類似於onclick事件 v-on:click="myEvent()"可以簡寫爲：@click=“myEvent()”
v-on指令的事件修飾符:
a) .stop 阻止冒泡
b) .prevent 阻止瀏覽器的默認事件
c) .capture 添加事件監聽器時使用事件捕獲模式
d) .self 當事件在該元素本身觸發時 觸發回調
e) .once 事件只觸發一次
- v-model:實現雙向數據綁定事件，注意：v-model只能運用在表單元素上（input select checkbox textarea）
- v-for:迭代元素 注意：使用v-for循環的時候一定要加給綁定key屬性,key屬性綁定的值只能時string或number類型
v-for是用來做迭代的，有如下幾種用法
a) 迭代數組
b) 迭代對象
c) 迭代數組對象
<h6 v-for="(array,i) in list">{{array}}----->{{i}}</h6> list:[1,2,3,4]
<h6 v-for="(obj,i) in objList">{{obj.id}}----->{{obj.name}}---->{{i}}</h6> objList:[{id:1,name:'dsx'},{id:2,name:'dsx2'}]
<h6 v-for="(val,key,i) in obj">{{val}}---->{{key}}---->{{i}}</h6> obj:{name:'dsx',age:12,sex:'男'}
<h6 v-for="x in 20">{{x}}</h6> //循環數字
- v-if: 表達式爲true則顯示元素
- v-show: 與v-if效果類似，但性能有差異
//如果某點擊事件方法裏只有一句話，則可以使用如下方式：@click="flag=!flag" 取反切換
<input type="button" name="" id="" value="toggle" @click="flag=!flag" />
<h3 v-if="flag">這是v-if控制的元素</h3>
<h3 v-show="flag">這是v-show控制的元素</h3>
數組的遍歷
- 使用for遍歷 :原始方式
- 使用array.forEach遍歷 注意：這種方式無法強制終止循環,參數是一個函數，類似java的lambda表達式
this.a.forEach( item => {
if(item.title.indexOf(keyword)!=-1){
array.push(item);
}
})
- 使用array.filter過濾 會返回一個新的數組
return this.a.filter( obj => {
if(obj.title.indexOf(keyword)!=-1){
return obj;
}
})
- 使用array.some方式
this.a.some( obj => {
if(obj.title.indexOf(keyword)!=-1){
array.push(obj);
}
})
vue中的全局過濾器
vue中的過濾器是用來做數據格式化的
- 語法： Vue.filter(‘過濾器名稱’，function(data){}) 參數function裏的參數只能是管道前面的數據，
也即下面例子中的msg。function可以有多個參數, 過濾器也是進行鏈式調用 - 使用 可以在插值表達式和v-bind指令中用管道的方式使用 eg:{{ msg | Myfilter }}
<h3 :class="['red','big',{'active':flag}]">{{ b | myFilter('zz','cj')}}</h3>
Vue.filter('myFilter',function(data){
return data+' 鄧紹祥';
})
使用vue中的全局過濾器做日期格式化
Vue.filter('dateFomat',function(dateString,pattern=''){ //pattern=''表示默認時爲'',
var date =new Date(dateString);
var y=date.getFullYear();
var m=date.getMonth()+1;//月份從零開始的
var d=date.getDate();
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
var hh=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
})