进阶特性

extend 构造器

提前创建好组件实例的选项, 使用时需要注册或挂载

使用场景:

• template 组件模板中内容想要动态变化
• 想要指定挂载节点位置, 不局限于 #app根节点中

1. 基础用法

<div id="mount-point"></div>

let Profile = Vue.extend({
  name: "profile",
  template: "<p>姓名:{{name}}, 性别: {{sex}}, 年龄: {{age}} </p>",
  props: ["age"],
  data() {
    return {
      name: "张三",
      sex: "男",
    };
  },
});
// 创建 Profile 实例，并挂载到元素上。
new Profile({
  propsData: {
    age: 24,
  },
}).$mount("#mount-point");

实例传值要用 propsData

2. 作为局部组件注册使用

<div id="example">
  <component1 />
</div>

let Profile = Vue.extend({
  name: "profile",
  template: "<p>这是构造组件 </p>",
});

new Vue({
  el: "#example",
  data: {},
  components: {
    component1: Profile,
  },
});

3. 作为全局组件注册使用

<div id="example">
  <component2 />
</div>

var Profile = Vue.extend({
  template: "<p>我是构造器</p>",
});

Vue.component("component2", Profile);

render 函数

可以不使用 template 模板语法, 使用 js 来构建 Dom

官方文档

基本语法

// h是 createElement的缩写
render: (h) => {
  return h("div", "hello");
  // 可以接收组件实例
  // return h(APP)
};

返回值可以是 createElement 函数, 或者是 VNode 虚拟节点

函数式组件

<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {},
  render(h, context) {
    {/* const { icon, title } = context.props */}
    return [<span>节点</span>]
  }
}
</script>

directive 自定义指令

1.定义

注册全局自定义指令

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

注册局部指令, 在组件 directives选项中定义, 只在当前组件生效

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

模板元素中使用:

<input v-focus />

2. 钩子函数及参数

官方文档

install 插件

常用来为 Vue 添加全局功能

使用

创建包含 install 方法的一个对象, 第一个参数是 Vue, 第二个是使用插件时传递的参数

export default {
install(Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}

// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})

// 3. 添加实例方法
Vue.prototype.$myMethod = function () {
//...
}
},
}

// main.js
import Vue from "vue";
import myPlugin from "@/plugins/myPlugin";
Vue.use(myPlugin);