之前,Npcink 就已经使用 vue3 开发了一些简单的SPA单页,技术还是够用的。 效果预览 先看下最终效果 可以理解为一个简单的前后端分离的小项目,前端使用 vue3 和 Element Plus 给出,通过 Axios 与后端的 WordPress 的 REST API 进行通信,再让后端通过get_option函数拿到设置选项,进行功能设置。
https://github.com/muze-page/vue-spa 流程 多对象传值 在上一节的文件中,有这样的代码 constdatas=reactive({ dataOne:"", dataTwo:"", dataName:[], dataImage:"", dataSelectedImage:"", }); 看起来没啥问题,但我现在需要开发2个 Tab 选项,每个选项中都有3个选项需要填写,类似这样 letdatas=rea...
承接上文,我们将常用选项中的两个功能给实现了,这一节,我们将对 JS 资源进行打包,最终产物只有一个 JS 文件和一个 CSS 文件,可以极大的提升网页加载速度,减少依赖。 打包后的文件中,就包含了 vue3 和 Axios…
我们需要用到 Vue3 和 Axios ,当然,只要能实现功能的,你喜欢的任何工具均可。 我们还需要在菜单页面中展示两个输入框和一个保存按钮 载入资源 修改vue-spa.php 中的vuespa_load_vues() 函数,我们需要引入 vue3 和 Axios 资源。改为以下代码 //载入所需 JS 和 CSS 资源 并传递数据 function vuespa_load...
创建函数,通过REST API 从WordPress 媒体库中获取图片数据 vue将获取的图片数据展示在前端,并提供选择按钮 选中图片后,将值传给选项值 保存 效果创建变量 我们创建变量用于存储获取的图片信息,为了便于扩展,这里使用reactive//存储获取的值 const getData = Vue.reactive({ //存储获取的媒体库值 mediaList: [], }...
书接上回,我们使用 Vue3 技术撰写前端,为了与后台进行交互,包括从前端加载的开始获取初始设置数据等,都需要从 PHP 中获取数据,但我们开发的项目打包后,只有 JS 文件,因此,开发的第一件事就是解决 PHP 传值…
WordPress 通过 REST API 和 Vue3 开发设置选项 · 7篇 承接上文,我们解决了PHP传递数据给JS的问题,现在,我们可以创建两个输入框和一个保存按钮。 输入框存储和修改选项值 保存按钮用于保存选项值 在页面加载的开始获取选项的值,将其作为输入框的默认值,修改输入框内容后点击保存按钮,将输入框的值通过 REST API...
书接上回,我们使用 Vue3 技术撰写前端,为了与后台进行交互,包括从前端加载的开始获取初始设置数据等,都需要从 PHP 中获取数据,但我们开发的项目打包后,只有 JS 文件,因此,开发的第一件事就是解决 PHP 传值给 JS 的问题。 为了方便我们的功能实现,我们开发一个简单的插件。简单介绍下软件环境,都是三平台通用的...
之前,Npcink 就已经使用 vue3 开发了一些简单的SPA单页,技术还是够用的。 效果预览 先看下最终效果 技术流程 适合那些有一些设置,但又不多的主题或插件, - 用原生 Setting API 太麻烦, - 用设置框架又多余 当然,如果你是前端写后端的,就更适合了,甚至你可以将所有选项都通过此方法来实现,说不定还更顺手。
WordPress可以通过以下几种方式与Vue.js结合:1、通过REST API进行数据交互,2、使用Vue.js框架开发自定义主题,3、将Vue.js组件嵌入到现有的WordPress页面或插件中。通过这些方法,开发者可以利用Vue.js的动态交互特性来增强WordPress站点的用户体验和功能。 一、通过REST API进行数据交互 ...