Vue中的过滤器filter、插件、函数渲染、路由重定向redirect

The..Fuir

已于 2022-06-05 14:37:25 修改

阅读量292

点赞数

分类专栏： Vue 文章标签： vue.js

于 2022-05-25 10:02:45 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124960236

版权

Vue 专栏收录该内容

86 篇文章 21 订阅

订阅专栏

Vue中的过滤器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}---{{msg|parseUpper}}
      <hr />
      hhhhhjjjjjj
    </div>

    <script>
      /* //全局注册过滤器
      Vue.filter("parseUpper", (data) => {
        return data.toUpperCase();
      }); */

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        //局部注册过滤器  过滤器名称是函数名
        filters: {
          parseUpper(data) {
            return data.toUpperCase();
          },
        },
        data: {
          msg: "hello",
        },
        methods: {},
      });
    </script>
  </body>
</html>

Vue中的插件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">{{msg}}----{{msg|myFilter}}</div>

    <script>
      let myPlugin = {
        //istall方法在执行Vue.use(myPlugin) 会被调用
        install(Vue, options) {
          //提供一些静态属性或者方法
          Vue.isVue = function () {
            console.log("isVue");
          };

          //原型上绑定属性或者方法
          Vue.prototype.$sayVue = () => {
            console.log("isSayVue");
          };

          //全局注册(组件，过滤器，指令，混入)
          Vue.filter("myFilter", (data) => {
            return data.toUpperCase();
          });
        },
      };

      Vue.use(myPlugin);

      console.log(Vue.isVue());
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
      });

      console.log(vm.$sayVue());
    </script>
  </body>
</html>

Vue中的函数渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}
      <button @click="level++">按钮</button>
      <my-a :level="level">
        <template #header>hello </template>
      </my-a>
    </div>
    <script>
      let myA = {
        props: {
          level: {
            type: Number,
            required: true,
          },
        },
        /* template: `
        <div>
        <h1 v-if="level==1">
          <slot></slot>
        </h1>
        <h1 v-if="level==2">
          <slot></slot>
        </h1>
        <h1 v-if="level==3">
          <slot></slot>
        </h1>
       </div>
        `, */
        render(createElement) {
          //createdElement()创建出vNode 虚拟节点
          //   return createElement("h" + this.level, {}, "组件hello123");

          //this.slots.header   指定名字插槽
          return createElement(
            "h" + this.level,
            {
              /*  attrs: {
                id: "one",
                title: "你好",
              },
              style: {
                color: "red",
              },
              class: {
                box: true,
                box1: flase,
              }, */
            },
            this.$slots.header
          );
        },

        /*  //jsx  javascript扩展语法
        render() {
          return (
            <div>
              hello <h1>1111</h1>
            </div>
          );
        }, */
      };

      Vue.component("my-a", myA);
      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
          level: 1,
        },
        computed: {},
        methods: {},
      });
    </script>
  </body>
</html>

Vue中的路由（默认和重定向redirect）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue的数据模型</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
      .box {
        border: 1px solid red;
        width: 200px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <!-- 容器 -->
    <div id="app">
      {{msg}}---
      <a href="http://www.baidu.com">百度一下</a>
      <hr />
      <div>
        <router-link to="/a">去A组件</router-link>
        <router-link to="/b">去B组件</router-link>
      </div>
      <div class="box">
        <!-- 路由对应的组件显示的位置 -->
        <router-view></router-view>
      </div>
    </div>
    <script>
      /* 
        //1.声明路由对象
        let routes=[{

        }] */

      let comA = {
        template: `<div>A组件</div>`,
      };

      let comB = {
        template: `<div>B组件</div>`,
      };
      // 定义路由
      let router = new VueRouter({
        routes: [
          //默认根路径显示组件
          //   { path: "/", component: comA },
          //路由重定向
          { path: "/", redirect: "/a" },
          { path: "/a", component: comA },
          { path: "/b", component: comB },
        ],
      });

      // 整个页面只能有一个Vue实例对象
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
        methods: {},
        router: router,
      });
    </script>
  </body>
</html>

The..Fuir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的过滤器filter、插件、函数渲染、路由重定向redirect

目录Vue中的过滤器Vue中的插件Vue中的函数渲染Vue中的路由（默认和重定向redirect）Vue中的过滤器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name=...
复制链接

扫一扫