通过CDN在Wordpress中导入Vue。

前情提要

大致讲一下为什么这么做

本文的关键为自定义HTML。我也是最近在编辑页面模板的时候，才发现这个区块，而且发现它居然这么有用。有了这个区块之后自定义一些小组件啥的还是挺不错的。

引入Vue

通过CDN的方式引入Vue

通过CDN引入Vue的话，比较简单也比较直观。缺点就是没法用SFC（Single-File Components）。SFC的格式如下，相对于把html+js+css集合在一个文件（.vue)中。

//test.vue
<script>
//Javascript逻辑
</script>

<template>
//Html模板
</template>

<style>
//CSS样式
</style>

通过CDN引入Vue的格式为

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue使用例

与自定义HTML组合

先放引入Vue的自定义HTML组件代码。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>

<div id="app">
  <button @click="addone">
    Click This
  </button>
  <span v-if="flag">{{msg}}</span>
  <span v-else="">{{msg}}</span>
</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      var msg = ref("Empty")
      var flag=true;
      function addone()
      {
        if(flag==true)
        {
            flag=false
            msg.value="OK"
        }else
        {
            flag=true
            msg.value="Not OK"
        }
      }
      return {
        msg,
        flag,
        addone
      }
    }
  }).mount('#app')
</script>

以及该自定义HTML区块展示的效果，加载可能有点慢

当然，通过CDN加载Vue有个问题，网速不好的话就会在加载Vue之前加载出来页面，导致页面其他的内容加载出来了，但是自定义HTML区块的内容没有加载出来。当然也可以换国内的CDN源，这里是用了boootcdn。