過濾器分為全局過濾器和局部過濾器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{count|change('--百分比')}}</div>
<div>全局過濾器{{count|allNumber}}</div>
<!--change函數接收的官道符左側的參數-->
<!--allNumber接收的官道符左側的參數-->
</div>
<script src="js/vue.js"></script>
<script>
<!-- 全局過濾器是filter,局部過濾器是filters-->
Vue.filter('allNumber',function (value) {
return value+'%'
})
new Vue({
el:'#app',
data:{
msg:'test',
count:19
},
methods:{
},
filters:{
change:function (value,flag) {
console.log('value-->'+value)
console.log('flag-->'+flag)
return value+'%'+flag
}
}
})
</script>
</body>
</html>
<!--過濾器主要實現：例如:過濾后端返回的數據-->
應用實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{status|change}}
<!--change接收的官道符左側的參數-->
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'test',
count:19,
status:2
},
methods:{
},
filters:{
change:function (status) {
// 1.代表成功
// 2.代表失敗
if(status==1){
return '成功'
}else if(status==2){
return '失敗'
}
}
}
})
</script>
</body>
</html>
<!--過濾器主要實現：例如:過濾后端返回的數據-->
生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
// 生命周期
//vue在實例化到頁面經歷了哪些步驟
//鈎子函數，預留了幾個特殊的方法
new Vue({
el:'#app',
data:{
msg:''
},
//實例化后，數據還沒初始化
beforeCreate:function () {},
// 數據初始化之后
created:function(){},
// 未和標簽進行關聯之前
beforeMount:function(){},
// 實例和標簽關聯之后
mounted:function(){
this.msg='模擬獲取到了后台的列表數據'
console.log('mounted')
},
// 數據更新前
beforeUpdate:function(){
console.log('beforeUpdate')
},
// 數據更新后
updated:function(){
console.log('updated')
}
})
</script>
</body>
</html>