1.全局過濾器

（1）normalTime.js ?自定義 將 時間戳 轉換成 日期格式 過濾器

/*** 將 時間戳 轉換成 日期格式*/ export const normalTime = (time) => {if(time){var oDate = new Date();oDate.setTime(time);var y = oDate.getFullYear();var m = oDate.getMonth() + 1;var d = oDate.getDate();var h = oDate.getHours();var mm = oDate.getMinutes();var s = oDate.getSeconds();return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;} }

（2）index.js ?入口文件

/*** 過濾器* 入口文件*/ import { normalTime } from './normalTime'// webpack 2中不允許混用import和module.exports // module.exports = { // normalTime // };export default {normalTime };

2.全局引入

main.js

import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from 'vue-router' // 引入 路由配置文件 import routes from './router.config' // 引入 vuex入口文件 import store from './store/index' // 引入 axios import axios from 'axios' // 引入 loading 組件 import Loading from './components/loading' // 全局引入 自定義過濾器 import filters from './filters'// 向過濾器里添加函數// ES6 循環遍歷所有過濾器 Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))/*** 以前* Vue.filter(名字,函數);* 例如：Vue.filter('filtername',function(value,參數){return 參數+value.split('').reverse().join('');});*/ /*Vue.filter('normalTime',(time) => {if(time){var oDate = new Date();oDate.setTime(time);var y = oDate.getFullYear();var m = oDate.getMonth() + 1;var d = oDate.getDate();var h = oDate.getHours();var mm = oDate.getMinutes();var s = oDate.getSeconds();return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s;} });*/Vue.use(VueRouter); Vue.use(Loading);// 關于axios配置 axios.interceptors.request.use(function(config){// 發送請求store.dispatch('showLoading');return config; },function(error){return Promise.reject(error); });axios.interceptors.response.use(function(response){// 請求回來store.dispatch('hideLoading');return response; },function(error){return Promise.reject(error); });// 配置請求的根路徑 // axios.default.baseURL = 'http://localhost:8080';// 設置默認頭部信息 post // axios.default.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 把axios對象掛到Vue原型上 Vue.prototype.$http = axios;// 創建 路由 const router = new VueRouter({mode:'history', // 刪除 url 中的'#'號,切換路徑模式scrollBehavior:() => ({y:0}), // 滾動條滾動的行為,不加這個默認就會記憶原來滾動條的位置routes // routes 等價于 routes:routes });require('./assets/css/base.css'); // 全局引入new Vue({el: '#app',router,store,render: h => h(App) })

3.在組件中使用

Article.vue

?

4.動畫效果 （transition 實現動畫效果）

?

?

App.vue

<template><div id="app"><loading v-show="loading"></loading><NavView v-show="headerShow"></NavView><!-- transition 實現動畫效果 --><transition name="slide-down"><!-- keep-alive 如果有數據,則保持原樣 --><!-- <keep-alive><router-view class="router-view"></router-view></keep-alive> --><router-view class="router-view"></router-view></transition><FooterView></FooterView></div> </template><script> /*** 引入 組件*/ // 頭部導航 import NavView from './components/Nav.vue' // 底部選項卡 import FooterView from './components/Footer.vue'// 引入 vuex 的兩個方法 import {mapGetters, mapActions} from 'vuex'export default {// 計算屬性computed:mapGetters([// 從getters中獲取headerShow的值'headerShow','loading']),watch:{ // 監聽,當路由發生變化的時候執行$route(to,from){if(to.path == '/user-info'){/*** $store來自Store對象* dispatch 向 actions 發起請求*/this.$store.dispatch('hideHeader');}else{this.$store.dispatch('showHeader');}}},components:{NavView,FooterView} } </script><style lang="scss">@import './assets/css/index.css';.slide-down-enter-active,.slide-down-leave-active{transition: .4s all ease;opacity:0.2;transform:translate3d(0,6em,0);}.slide-down-enter,.slide-down-leave{opacity:1;transform:translate3d(0,6em,0);} </style>

?

5.效果圖

?

轉載于:https://www.cnblogs.com/crazycode2/p/7598508.html

總結

以上是生活随笔為你收集整理的vue2.0 仿手机新闻站（七）过滤器、动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。