vue-过滤器-侦听器-路由

1.过滤器

过滤器：在数据输出到页面之前，进行显示的格式处理

特点：

1. 过滤器，函数会接收一个参数，函数必须有返回值，对传入数据进行处理
2. 过滤器，无缓存机制，调用次数，取决于页面中有所多少过滤器
3. 过滤器，被作为一个特殊方法处理.

<h1> {{ msg | 过滤器函数名  }} </h1>

export default {
components: {}
  data() {},
  methods: {},
  computed: {},
  filters: { // 过滤器
     函数名(msg) {
        // 函数中，可以对msg进行各种格式处理，返回什么，页面就能输出什么
        return  xxx
		}
	}
}

<template>
  <div>
    <span>hello {{ name }}</span>
    <h1>{{ msg | msgFileter }}</h1>
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      name: "world...",
    };
  },
  methods: {},
  computed: {},
  filters: {
    msgFileter(msg) {
      return `这是格式化的内容：${msg}`;
    },
  },
};
</script>

<style  scoped>
</style>

过滤器filters仅在vue2.0有效，在3.0已经移除，可以使用computed计算属性来替换filters！

2.侦听器

侦听器watch：用于捕获指定数据的变化，进行相关的操作

特点：

1. 侦听器，函数会接收两个参数()，内部可以根据新值进行处理，函数无需返回值，
2. 侦听器，自定捕获数据的变化，并作出响应。变化一次，执行一次。
3. 侦听器，被作为一个监听方法处理.

export default {
components: {}
  data() {},
  methods: {},
  computed: {},
  filters: {},
  watch:{
     数据属性名称(newVal，oldVal) {
       // 对数据进行各种处理，可以返回，页可以部返回。
       return  xxx
	}
}

<template>
  <div>
    <span>hello {{ name }}</span>
    <hr />
    <!--点击1次数字加1，被侦听到，执行watch中msgWatch函数-->
    <button @click="msgWatch++"></button>{{ watchVal }}
  </div>
</template>

<script>
export default {
  name: "",

  data() {
    return {
      name: "world...",
      msgWatch: 0,
      watchVal: "",
    };
  },
  methods: {},
  computed: {},
  filters: {
    msgFileter(msg) {
      return `这是格式化的内容：${msg}`;
    },
  },
  watch: {
    //msgWatch的值一旦改变，就会执行该函数
    msgWatch(newVal, oldVal) {
      this.watchVal = `${oldVal} 被替换为：${newVal}`;
    },
  },
};
</script>

<style  scoped>
</style>

3.路由

前端路由：前端路由定义了地址和组件的一一对应关系（一个url地址，对应一个页面级别的组件）

路由的优缺点：

优点

1. 路由处理速度较快，不用每次都通过服务返回。
2. 前端拥有更多的主动权。

缺点

1. 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。
2. 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。

3.1.使用方式

3.1.1.安装

yarn vue-router

3.1.2.配置

1.创建router.js文件，引入路由插件，引入页面

2.在路由文件router.js里面，配置路由和组件的映射关系，每一个路由映射一个组件.
路由的配置有2种：

• 直接引入
• 按需加载

//引入核心库
import VueRouter from 'vue-router'
//引入组件，这里将App.vue作为首页
import Home from './components/Demo.vue'
import Other from './components/Demo-02.vue'
//定义路由配置
const routes = [
    {
        //将根路径重定向到名字为home的配置
        path: '/',
        redirect: {
            name: 'home',
            component: Home
        }
    },
    {
        //将Home组件映射到/home路径
        path: "/home",
        name: "home",
        component: Home
    },
    {
        path: "/other",
        name: "other",
        component: Other
    }
]
//导出配置好的路由实例
export default new VueRouter({
    mode: 'hash',
    routes,

});

创建一个最终渲染的页面view.vue

<template>
  <div id="root">
    <img src="./assets/logo.png" />
    <div id="nav">
      <router-link to="/"> Home</router-link>
      <router-link to="/other">other </router-link>
    </div>
    <router-view />
  </div>
</template>

<router-view>处作为路由的出口，用来挂载所有的路由组件

<router-link>可以实现跳转，他会被渲染成一个a标签

3.在main.js里面，完成配置和路由实例

import { createApp } from 'vue'
import App from './components/view.vue'
import router from './router'

//全局注册路由
const app = createApp(App);
app.use(router);
app.mount('#demo-box')

3.2.路由嵌套

var router = new VueRouter({
        routes:[
            {path:"/",component:index},
            {path:"/product",component:product},
            {path:"/about",component:about,
                children: [
                    {path : "" , component :us},
                    {path : "company" , component :company},
                ]
            }
]});

如上所示，嵌套的子组件配置和普通路线配置完全一样，也是由2大核心配置“path（请求路径）”和“component（视图组件）”两部分组成。

3.3.路由中的全局对象

$router-全局路由对象this.$router.push()： 跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

this.$router.replace()：替换当前路由，不会向history栈添加一个记录，无法通过history返回到上一个页面。

$route-获取当前路线信息this.$route.path : 获取当前页面对应的路线地址