全局 API

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

var Profile = Vue.extend({
  template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",
  data: function () {
    return {
      firstName: "Walter",
      lastName: "White",
      alias: "Heisenberg"
    }
  }
})

new Profile().$mount("#mount-point")

<p>Walter White aka Heisenberg</p>

var AlertComponent = Vue.extend({
  template: `
    <div class="alert" :class="type">
      {{ message }}
      <button @click="close">×</button>
    </div>
  `,
  props: ["type", "message"],
  methods: {
    close() {
      this.$emit("close")
      this.$destroy()
      this.$el.remove()
    }
  }
})

function showAlert(type, message, duration = 3000) {
  var alert = new AlertComponent({
    propsData: { type, message }
  })

  alert.$mount()
  document.body.appendChild(alert.$el)

  if (duration > 0) {
    setTimeout(() => alert.close(), duration)
  }

  return alert
}

showAlert("success", "操作成功！")

var Base = Vue.extend({
  data: function () {
    return {
      baseData: "base"
    }
  },
  methods: {
    baseMethod: function () {
      console.log("base method")
    }
  }
})

var Extended = Base.extend({
  data: function () {
    return {
      extendedData: "extended"
    }
  },
  methods: {
    extendedMethod: function () {
      console.log("extended method")
    }
  }
})

var instance = new Extended()
instance.baseMethod()
instance.extendedMethod()

import Vue from 'vue';
import Alert from './alert.vue';

// 在 Alert 组件上添加静态方法
Alert.newInstance = properties => {
  const props = properties || {};

  const Instance = new Vue({
    data: props,
    render (h) {
      return h(Alert, {
        props: props
      });
    }
  });

  const component = Instance.$mount();
  document.body.appendChild(component.$el);

  const alert = Instance.$children[0];

  return {
    add (noticeProps) {
      alert.add(noticeProps);
    },
    remove (name) {
      alert.remove(name);
    }
  };
};

export default Alert;

import Vue from 'vue';
import Notification from './notification.vue';

const props = {};  // 传入组件的 props 选项

const Instance = new Vue({
  render (h) {
    return h(Notification, {
      props: props
    });
  }
});

const component = Instance.$mount();
document.body.appendChild(component.$el);

// 访问 Render 的 Notification 实例
const notification = Instance.$children[0];

// 方式 1：在 $mount 里指定挂载节点
new AlertComponent().$mount('#app');

// 方式 2：创建实例时指定 el 选项
new AlertComponent({ el: '#app' });

// 方式 3：先渲染再手动挂载
const component = new AlertComponent().$mount();
document.body.appendChild(component.$el);

var vm = new Vue({
  data: {
    message: "Hello"
  }
})

vm.message = "World"
console.log(vm.$el.textContent)

Vue.nextTick(function () {
  console.log(vm.$el.textContent)
})

Vue.nextTick().then(function () {
  console.log("DOM 已更新")
})

async function updateData() {
  vm.message = "New Value"
  await Vue.nextTick()
  console.log("DOM 已更新")
}

Vue.component("example", {
  template: "<div>{{ message }}</div>",
  data: function () {
    return {
      message: "未更新"
    }
  },
  methods: {
    updateMessage: function () {
      this.message = "已更新"
      this.$nextTick(function () {
        console.log(this.$el.textContent)
      })
    }
  }
})

Vue.component("parent", {
  template: '<div><child ref="child"></child></div>',
  mounted: function () {
    this.$nextTick(function () {
      console.log(this.$refs.child.$el)
    })
  }
})

new Vue({
  methods: {
    addItem: function () {
      this.items.push({ id: Date.now(), text: "New Item" })

      this.$nextTick(function () {
        var lastItem = this.$el.querySelector(".item:last-child")
        if (lastItem) {
          lastItem.scrollIntoView({ behavior: "smooth" })
        }
      })
    }
  }
})

var vm = new Vue({
  data: {
    user: {
      name: "John"
    }
  }
})

vm.user.age = 25

Vue.set(vm.user, "age", 25)
this.$set(this.user, "age", 25)

var vm = new Vue({
  data: {
    items: ["a", "b", "c"]
  }
})

vm.items[1] = "x"          // ❌ 非响应式

vm.items.length = 2        // ❌ 非响应式

Vue.set(vm.items, 1, "x")  // ✅ 响应式
vm.items.splice(1, 1, "x") // ✅ 响应式

vm.items.splice(2)         // ✅ 用 splice 修改数组长度

var vm = new Vue({
  data: {
    user: {}
  }
})

// ❌ 错误：Object.assign 直接添加属性，不会触发更新
Object.assign(vm.user, {
  name: "John",
  age: 25,
  email: "john@example.com"
})

// ✅ 正确：创建新对象整体替换
vm.user = Object.assign({}, vm.user, {
  name: "John",
  age: 25,
  email: "john@example.com"
})

new Vue({
  data: {
    form: {}
  },
  methods: {
    addField: function (fieldName, defaultValue) {
      this.$set(this.form, fieldName, defaultValue)
    },
    removeField: function (fieldName) {
      this.$delete(this.form, fieldName)
    }
  }
})

var vm = new Vue({
  data: {
    user: {
      name: "John",
      age: 25,
      email: "john@example.com"
    }
  }
})

delete vm.user.age

Vue.delete(vm.user, "age")
this.$delete(this.user, "age")

var vm = new Vue({
  data: {
    items: ["a", "b", "c"]
  }
})

Vue.delete(vm.items, 1)

new Vue({
  data: {
    config: {
      debug: true,
      api: "/api",
      mock: false
    }
  },
  methods: {
    cleanConfig: function () {
      if (!this.config.debug) {
        this.$delete(this.config, "mock")
      }
    }
  }
})

bind → inserted → update → componentUpdated → unbind

{
  el: HTMLElement,
  binding: {
    name: String,
    value: Any,
    oldValue: Any,
    expression: String,
    arg: String,
    modifiers: Object
  },
  vnode: VNode,
  oldVnode: VNode
}

Vue.directive("focus", {
  bind: function (el, binding, vnode) {
    console.log("指令绑定")
  },
  inserted: function (el, binding) {
    if (binding.value !== false) {
      el.focus()
    }
  },
  update: function (el, binding) {
    console.log("值更新:", binding.value)
  },
  componentUpdated: function (el, binding) {
    console.log("组件更新完成")
  },
  unbind: function (el) {
    console.log("指令解绑")
  }
})

Vue.directive("color", function (el, binding) {
  el.style.color = binding.value
})

Vue.directive("focus", {
  inserted: function (el) {
    el.focus()
  }
})

<input v-focus />

Vue.directive("permission", {
  inserted: function (el, binding, vnode) {
    var permission = binding.value
    var permissions = vnode.context.$store.state.permissions

    if (!permissions.includes(permission)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
})

<button v-permission="'admin'">管理员操作</button>

Vue.directive("debounce", {
  inserted: function (el, binding) {
    var timer = null
    var delay = binding.arg ? parseInt(binding.arg) : 300

    el.addEventListener("input", function () {
      if (timer) clearTimeout(timer)
      timer = setTimeout(function () {
        binding.value()
      }, delay)
    })
  }
})

<input v-debounce:500="search" />

Vue.directive("click-outside", {
  bind: function (el, binding, vnode) {
    el._clickOutside = function (event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value.call(vnode.context, event)
      }
    }
    document.addEventListener("click", el._clickOutside)
  },
  unbind: function (el) {
    document.removeEventListener("click", el._clickOutside)
    delete el._clickOutside
  }
})

<div v-click-outside="closeDropdown">
  <button @click="showDropdown = true">打开</button>
  <div v-show="showDropdown">下拉内容</div>
</div>

Vue.directive("lazy", {
  inserted: function (el, binding) {
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

<img v-lazy="imageUrl" />

var focusDirective = Vue.directive("focus")

export default {
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
}

Vue.filter("uppercase", function (value) {
  if (!value) return ""
  return value.toString().toUpperCase()
})

Vue.filter("lowercase", function (value) {
  if (!value) return ""
  return value.toString().toLowerCase()
})

<p>{{ message | uppercase }}</p>
<p>{{ message | lowercase }}</p>

Vue.filter("currency", function (value, symbol, decimals) {
  symbol = symbol || "¥"
  decimals = decimals || 2
  return symbol + parseFloat(value).toFixed(decimals)
})

<p>{{ price | currency('$', 2) }}</p>

Vue.filter("capitalize", function (value) {
  if (!value) return ""
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Vue.filter("truncate", function (value, length) {
  length = length || 15
  if (!value) return ""
  value = value.toString()
  return value.length > length ? value.slice(0, length) + "..." : value
})

<p>{{ message | capitalize | truncate(20) }}</p>

Vue.filter("date", function (value, format) {
  format = format || "YYYY-MM-DD"
  var date = new Date(value)
  var map = {
    YYYY: date.getFullYear(),
    MM: String(date.getMonth() + 1).padStart(2, "0"),
    DD: String(date.getDate()).padStart(2, "0"),
    HH: String(date.getHours()).padStart(2, "0"),
    mm: String(date.getMinutes()).padStart(2, "0"),
    ss: String(date.getSeconds()).padStart(2, "0")
  }

  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, function (matched) {
    return map[matched]
  })
})

<p>{{ timestamp | date('YYYY-MM-DD HH:mm:ss') }}</p>

Vue.filter("json", function (value, indent) {
  indent = indent || 2
  return JSON.stringify(value, null, indent)
})

<pre>{{ object | json }}</pre>

var uppercaseFilter = Vue.filter("uppercase")

export default {
  filters: {
    capitalize: function (value) {
      if (!value) return ""
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

Vue.component(
  "my-component",
  Vue.extend({
    template: "<div>A custom component!</div>"
  })
)

Vue.component("my-component", {
  template: "<div>A custom component!</div>"
})

var MyComponent = Vue.component("my-component")

Vue.component("todo-item", {
  props: {
    todo: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      default: 0
    }
  },
  template: `
    <li class="todo-item" :class="{ completed: todo.completed }">
      <input type="checkbox" v-model="todo.completed">
      <span>{{ index + 1 }}. {{ todo.text }}</span>
      <button @click="$emit('remove', index)">删除</button>
    </li>
  `
})

<ul>
  <todo-item
    v-for="(todo, index) in todos"
    :key="todo.id"
    :todo="todo"
    :index="index"
    @remove="removeTodo"></todo-item>
</ul>

var componentFiles = require.context("./components", false, /\.vue$/)

componentFiles.keys().forEach(function (path) {
  var componentName = path.replace(/^\.\/(.*)\.\w+$/, "$1")
  var componentConfig = componentFiles(path).default

  Vue.component(componentName, componentConfig)
})

Vue.component("async-component", function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: "<div>异步加载的组件</div>"
    })
  }, 1000)
})

Vue.component("async-webpack", function () {
  return import("./AsyncComponent.vue")
})

export default {
  components: {
    "my-component": function () {
      return import("./MyComponent.vue")
    }
  }
}

var MyPlugin = {
  install: function (Vue, options) {
    Vue.globalMethod = function () {
      console.log("全局方法")
    }

    Vue.directive("my-directive", {
      bind: function (el, binding) {
        el.textContent = binding.value
      }
    })

    Vue.mixin({
      created: function () {
        console.log("全局混入")
      }
    })

    Vue.prototype.$myMethod = function (methodOptions) {
      console.log("实例方法")
    }
  }
}

Vue.use(MyPlugin, { someOption: true })

Vue.use(VueRouter)
Vue.use(Vuex)

var MyPlugin = {
  install: function (Vue) {
    Vue.myAddedProperty = "Hello"
  }
}

if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(MyPlugin)
}

var LoadingPlugin = {
  install: function (Vue, options) {
    var LoadingComponent = Vue.extend({
      template: `
        <div class="loading-overlay" v-show="visible">
          <div class="loading-spinner"></div>
          <p>{{ message }}</p>
        </div>
      `,
      data: function () {
        return {
          visible: false,
          message: "加载中..."
        }
      }
    })

    var loading = new LoadingComponent()
    document.body.appendChild(loading.$mount().$el)

    Vue.prototype.$loading = {
      show: function (message) {
        loading.message = message || options.defaultMessage || "加载中..."
        loading.visible = true
      },
      hide: function () {
        loading.visible = false
      }
    }
  }
}

Vue.use(LoadingPlugin, {
  defaultMessage: "请稍候..."
})

this.$loading.show("正在提交...")
await submitForm()
this.$loading.hide()

Vue.mixin({
  created: function () {
    console.log("组件创建:", this.$options.name)
  },
  methods: {
    globalMethod: function () {
      console.log("全局方法")
    }
  }
})

var LoggerPlugin = {
  install: function (Vue, options) {
    Vue.mixin({
      created: function () {
        if (this.$options.name) {
          console.log("[Logger] Component created:", this.$options.name)
        }
      },
      mounted: function () {
        if (options.trackMounted) {
          console.log("[Logger] Component mounted:", this.$options.name)
        }
      }
    })
  }
}

Vue.mixin({
  methods: {
    handleError: function (error) {
      console.error("Error:", error)
      this.$notify.error({
        title: "错误",
        message: error.message
      })
    }
  },
  errorCaptured: function (err, vm, info) {
    console.error("Error captured:", err, info)
    return false
  }
})

Vue.mixin({
  beforeRouteEnter: function (to, from, next) {
    if (to.meta.requiresAuth && !isAuthenticated()) {
      next("/login")
    } else {
      next()
    }
  }
})

{
  render: Function,
  staticRenderFns: Array<Function>
}

var res = Vue.compile("<div><span>{{ msg }}</span></div>")

new Vue({
  data: {
    msg: "hello"
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

new Vue({
  data: {
    template: "<div>{{ message }}</div>",
    message: "Hello Vue!"
  },
  computed: {
    compiledTemplate: function () {
      return Vue.compile(this.template)
    }
  },
  render: function (h) {
    return this.compiledTemplate.render.call(this, h)
  }
})

if (typeof Vue.compile === "function") {
  console.log("运行完整版 Vue，包含编译器")
} else {
  console.log("运行时版本，不包含编译器")
}

const state = Vue.observable({
  count: 0,
  user: {
    name: "John"
  }
})

const Demo = {
  render(h) {
    return h("div", [
      h("p", `Count: ${state.count}`),
      h(
        "button",
        {
          on: {
            click: () => {
              state.count++
            }
          }
        },
        "Increment"
      )
    ])
  }
}

var store = Vue.observable({
  items: [],
  loading: false
})

var mutations = {
  setItems: function (items) {
    store.items = items
  },
  setLoading: function (loading) {
    store.loading = loading
  }
}

var actions = {
  fetchItems: function () {
    mutations.setLoading(true)
    return fetch("/api/items")
      .then(function (res) {
        return res.json()
      })
      .then(function (items) {
        mutations.setItems(items)
        mutations.setLoading(false)
      })
  }
}

Vue.component("item-list", {
  computed: {
    items: function () {
      return store.items
    },
    loading: function () {
      return store.loading
    }
  },
  template: `
    <div>
      <div v-if="loading">加载中...</div>
      <ul v-else>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  `,
  mounted: function () {
    actions.fetchItems()
  }
})

var config = Vue.observable({
  theme: "light",
  language: "zh-CN",
  sidebar: {
    collapsed: false
  }
})

Vue.component("theme-toggle", {
  computed: {
    theme: function () {
      return config.theme
    }
  },
  methods: {
    toggleTheme: function () {
      config.theme = config.theme === "light" ? "dark" : "light"
    }
  },
  template: `
    <button @click="toggleTheme">
      切换主题 (当前: {{ theme }})
    </button>
  `
})

var version = Vue.version

console.log(version)

var majorVersion = Number(Vue.version.split(".")[0])

if (majorVersion === 2) {
  console.log("Vue 2.x")
} else if (majorVersion === 3) {
  console.log("Vue 3.x")
} else {
  console.warn("不支持的 Vue 版本")
}

var MyPlugin = {
  install: function (Vue) {
    var version = Vue.version.split(".")
    var major = parseInt(version[0])
    var minor = parseInt(version[1])

    if (major === 2 && minor < 6) {
      console.warn("此插件需要 Vue 2.6.0 或更高版本")
      return
    }

    Vue.prototype.$myPlugin = {}
  }
}

this.message = "updated"

Vue.nextTick(() => {
  console.log("nextTick: DOM 已更新")
})

setTimeout(() => {
  console.log("setTimeout: DOM 已更新")
}, 0)

// 输出顺序: nextTick → setTimeout

var Constructor = Vue.extend({ template: "<div/>" })
var instance = new Constructor().$mount()

Vue.component("my-component", { template: "<div/>" })

var mixin = {
  created: function () {
    console.log("混入")
  }
}

export default {
  mixins: [mixin]
}