Vue的内置API

1.ref

•作用: 获取dom或组件, 相当于dom选择器, 也可以获取到子组件的实例对象.

•语法: this.$refs.ref的值

<template>
  <div>
    <input />
    <div ref="divvvv">{{ 6 | fillZero }}</div>
    <button ref="btnnnn" @click="clickGetDom">获取DOM</button>
  </div>
</template>
//fillZero(过滤器)
<script>
export default {
  methods: {
    clickGetDom() {
      //获取组件的所有ref集合(拿到的是DOM节点),$refs是获取所有的ref节点,在后边(.名字,例如:$refs.btnnnn)这样是获取当前节点
      console.log(this.$refs.btnnnn);
    },
  },
};
</script>

2. Vue.set

作用: 重新挟持数据, 让数据具备响应式. ( 修改数据,重新渲染界面 )

语法:
Vue.set(对象, 属性名, 属性值); // 给对象添加某个属性,且挟持这个属性,让这个数据具有响应式
this.$set(对象, 属性名, 属性值)

3. Vue.filter

作用: 注册全局过滤器, 所有组件都可以直接使用,不用单独写过滤器了.

语法:
在 main.js 中
Vue.filter('过滤器函数名', (xx) => {
return '结果'
})

4. Vue.component

作用: 注册全局组件.

语法:
在 main.js 中
Vue.component('组件标签名', 引入的组件)

5 Vue.use

作用: 安装 Vue.js 插件. ( 如果是使用vue写的插件, 引入进来,需要use一下 ).

Vue.directive

作用: 自定义指令 ( 自己可以创造指令 )
在 main.js 中

Vue.directive('指令名', {
  inserted: function (dom, o) {
     // dom节点
     // O拿到一个对象
  },
})
// 注册全局指令
Vue.directive('ellipsis', {
  // 被绑定元素插入父节点时调用(渲染的时候调用)
  inserted: function (dom, o) {
    dom.style.width = o.value + 'px';
    dom.style.overflow = 'hidden';
    dom.style.whiteSpace = 'nowrap';
    dom.style.textOverflow = 'ellipsis';
  },
})