Vue 进阶阶段

vue 的进阶阶段

1103 上午

1. 都是一些技巧性的东西。都是 vue 自带的一些功能,能力提高的东西。

混入

可以把你组件中的某一部分拆分出去，这部分可以是你的生命周期，方法，data，任何一部分，然后任意一个组件想用都可以使用。这就是混入的作用。

设置情境

我有十个组件，一进入每个组件都展示 hello
跳转页面的时候查看是否登录。用户登录了其他网页也才能看

• 该对象内的格式和组件导出对象格式一样
• 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行 “合并”
• 可以拿得到组件的 this
• • this.$options 组件的参数

恰当的方式

1. data 以组件为主 (如果是不同名的话就都展示)
2. 生命周期函数 自动合并(mixin 混入的先执行)
3. methods components 和 directives 以组件本身为主

hello.js

const helloMixin = {
  data() {
    return {
      num: 100,
    };
  },
  created() {
    console.log("mixn 内的 hello");
    console.log("判断用户是否登录了");
    // console.log(this);
    const loading = true;
    if (loading) {
      console.log("用户已经登陆");
    } else {
      console.log("用户还没有登录");
    }
  },
};
export default helloMixin;

组件

<div>mixin data num :{{ num }}</div>
<div>组件 data number :{{ number }}</div>
<script>
  export default {
    data() {
      return {
        number: 10000,
      };
    },
    mixins: [helloMixin],
    created() {
      console.log("组件自己的 hello");
    },
  };
</script>

main.js

总共有 APP.vue MixinDemo.vue 还有根组件呢，所以执行了三次

Vue.mixin({
  created() {
    console.log(this);
    console.log("全局 mixin 加入成功");
  },
});

自定义指令

v-html

<!-- <span>1234</span> -->
<div>{{ htmlStr }}</div>

<!-- 123 -->
<div v-html="htmlStr">{{ htmlStr }}</div>

<script>
  export default {
    data() {
      return {
        htmlStr: "<span>1234</span>",
      };
    },
  };
</script>

v-focus

1. el 指的就是当前真实 dom 节点。el.focus() 就是聚焦当前的节点
2. 什么叫做被绑定的元素？ v-focus 写到谁身上就是被绑定了的元素
3. 插入 dom 中时，就是在页面做展示的时候。

• 当页面加载时，该元素将获得焦点，事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

main.js 全局指令

Vue.directive("focus", {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
});