乐趣区

关于vue.js:vueVue上的API

jiezi

Vue 上的 API

  1. Vue.extend
  2. Vue.component
  3. Vue.use
  4. Vue.set
  5. Vue.delete
  6. Vue.directive
  7. Vue.filter
  8. Vue.nextTick
  9. Vue.mixin
  10. Vue.compile
  11. Vue.observable
  12. Vue.version

1 Vue.extend({options})

通过 Vue 创立一个 子类 ，参数是一个 组件选项 的对象
data 选项必须是函数

在初始化时会判断 data 是 函数 还是 对象
函数 ：执行这个函数，返回一个新对象
对象 ： 间接应用 这个对象，那么实例化这个子类时，这个对象是私有的，全局净化

// 创立子类
const myVue = Vue.extend({template: '<p> 衬衫的价格是{{price}}</p>',
    data() {
        return {price: "九磅十五便士"}
    },
})
// 实例化子类并挂载
const myVm1 = new myVue().$mount("#root1")
const myVm2 = new myVue({el: "#root2"})

// 后果
<p> 衬衫的价格是九磅十五便士 </p>
<p> 衬衫的价格是九磅十五便士 </p>

动静渲染组件，能够像调用函数一样调用组件

2 Vue.component(id , [definition])

定义组件，组件是一个可复用的 Vue 实例，能够作为自定义元素来应用
definition 能够是 Vue.extend(options)，也能够间接使一个 options 对象 - 还是会执行 Vue.extend()

// 定义一个组件
Vue.component('Child1', {template: `<p> 衬衫的价格是{{price}}</p>`,
    data() {
        return {price: "九磅十五便士",}
    },
})
new Vue().$mount('#root1')

// 定义子类
const myVue = Vue.extend({template: `<p> 我的名字叫{{name}}</p>`,
    data() {
        return {name: "韩梅梅"}
    },
})
Vue.component('Child2', myVue)
new Vue().$mount('#root2')
<div id="root1">
    <Child1></Child1>
</div>
<div id="root2">
    <Child2></Child2>
</div>

下面两种形式都能够去自定义一个组件

3 Vue.use(plugin)

装置插件 ，通常在装置一个包之后想在 Vue 中应用，须要先 引入 而后 Vue.use 后才能够应用，Vue.use 会 调用 该模块中的 install 形式
应用 use 的形式定义组件，模拟插件的装置过程

//MyComponent.vue 文件
<template>
  <div> 正在加载中...</div>
</template>

// 创立 index.js 进行封装
import MyComponent from './MyComponent.vue'

const My = {install(Vue) {Vue.component('My', MyComponent)
    }
}
export default My

// 在 main.js 中装置
import My from './components/index'
Vue.use(My)

// 在其余组件中援用
<My />

use 其实就是调用 install，而后返回

4 Vue.set(target,key,value) Vue.delete(target,key)

增加或批改 响应式对象的 property，target 不能是 Vue 实例或者 Vue 实例的根数据对象

//Vue 实例
<template>
  <div class="main">
    <input type="text" v-model="std.name" />
    <input type="button" value="批改" @click="Modify" />
    <input type="button" value="删除" @click="Delete" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      std: {name: "张三",},
    };
  },
  methods: {Modify() {this.$set(this.std, "name", "李四");
    },
    Delete() {this.$delete(this.std, "name");
    },
  },
};
</script>

5 Vue.filter(id,[definition])

注册或者获取全局 过滤器

//main.js 中全局注册
Vue.filter('upperCase', value => {return value.toUpperCase()
})
// 组件中应用
<template>
  <div class="main">
    <span>{{name | upperCase}}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {name: "bob",};
  },
};
</script>

过滤器以 管道符 为分隔，管道符前作为过滤器的第一个参数，能够增加额定的参数
能够再增加一个过滤器接管 前一个过滤器的返回值，依然以管道符为分隔

6 Vue.mixin(mixin)

全局混入
能够在所有 Vue 实例上注入自定义的行为
minxin 是一个 对象，能够定义相干的属性与办法

//mixin.js 文件 定义混入
export const mixin = {mounted() {console.log(this._uid + "挂载实现")
    },
}
//main.js 问价 注册混入
import {mixin} from './mixin'
Vue.mixin(mixin)

7 Vue.directive(id,[definition])

注册或获取 全局指令

//main.js 文件 自定义指令
Vue.directive('focus', {inserted(el, binding) {el.focus()
    el.value = binding.value;
  },
})
// 在组件中应用
<template>
  <div class="main">
    <input type="text" v-focus="tip" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {tip: "请输出姓名",};
  },
};
</script>
  • 在定义时 id 前不必增加v-，在应用时增加
  • definition是一个 对象，外部蕴含钩子函数

7.1 自定义指令的钩子函数

bind：指令首次 绑定 到元素时调用，仅调用一次

inserted：绑定指令的元素 插入 父节点时调用

update：所在组件的 Vnode更新 时调用，可能产生在其子 Vnode 更新之前

componentUpdated：指令所在组件的 Vnode 及其子 Vnode全副更新后 调用

unbind：指令与元素 解绑 时调用，仅调用一次

7.2 钩子函数的参数

  • el：绑定的元素，实在 DOM

  • binding：一个对象，属性如下

    • name：指令名
    • value：指令绑定值 =后的值
    • oldValue：前一个绑定值，仅在 更新 的两个钩子中应用
    • expression：字符串模式的指令表达式
    • arg：传给指令的参数 :后的值
    • modifiers：蕴含修饰符的对象
  • vnode：Vue 编译生成的虚构节点
  • oldVnode：上一个虚构节点，仅在 更新 的两个钩子中应用

8 Vue.nextTick([callback,context])

下次 DOM 更新循环完结 之后执行提早回调
批改数据之后立刻应用这个办法，获取更新后的 DOM
无回调返回一个 Promise

<template>
  <div>
    <ul ref="ulEl">
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <input type="button" value="增加" @click="add" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {list: ["0", "1"],
    };
  },
  methods: {async add() {
      // 批量增加数据
      this.list.push(Math.random());
      this.list.push(Math.random());

      // 获取元素
      const ulElem = this.$refs.ulEl;

      console.log(ulElem.childNodes.length);//2
      await this.$nextTick();
      console.log(ulElem.childNodes.length);//4
    },
  },
};
</script>

在 nextTick()之前获取的并不是最新的 DOM，在齐全更新实现后才会调用 nextTick()，之后就能够获取到最新的 DOM 了

9 Vue.compile(template)

将一个模板字符串 编译 成 render 函数，只在完整版时应用

let res = Vue.compile('<p> 衬衫的加个是{{price}}</p>')
new Vue({data() {
        return {price: "九磅十五便士",}
    },
    render: res.render
}).$mount('#root1')

应用 render 函数，就不必再增加 template

10 Vue.observable(object)

让一个对象 可响应，能够在较小的我的项目里代替 vuex 实现状态治理

//store.js 状态治理
import Vue from 'vue'

export let store = {state: Vue.observable({ count: 0}),
    mutations: {setCount(count) {store.state.count = count;}
    }
}
// 子组件 展现数据
<template>
  <span>{{"子组件的 count：" + count}}</span>
</template>

<script>
import {store} from "../store";
export default {
  computed: {count() {return store.state.count;},
  },
};
</script>
// 父组件 批改与展现数据
<template>
  <div>
    <span>{{"store 中的 count:" + count}}</span>
    <br />
    <input type="button" value="+" @click="setCount(count + 1)" />
    <input type="button" value="-" @click="setCount(count - 1)" />
    <br />
    <Child />
  </div>
</template>

<script>
import {store} from "./store";
import Child from "./components/Child.vue";
export default {
  name: "App",
  components: {Child,},
  computed: {count() {return store.state.count;},
  },
  methods: {setCount: store.mutations.setCount,},
};
</script>

当在父组件批改时，子组件也会同时响应

11 Vue.version

Vue 装置版本号

import Vue from 'vue'
console.log(Vue.version);//2.6.14

其余

把 Vue 构造函数打印进去能够看到它还有几个属性

  • Vue.options
  • Vue.util
  • Vue.config

这些在后续独自举例，在这里就不再叙述

退出移动版