从 jQuery 到 Vue3 的快捷通道
当初使用 jQuery 做了几个简单的项目，算是有一点点了解，现在学习Vue3，发现了一个可以快速转换思维的通道 —— 使用CDN的方式模拟 Vite 建立的项目！
CDN方式
jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。
而 Vue3 也支持直接用 script 引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：
- 引入 vue.js
<head>
<meta charset="UTF-8" />
<!--加载 vue3 -->
<script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
<!--加载 element-plus -->
<script src="https://unpkg.com/element-plus@2.1.9/dist/index.full.js"></script>
<link href="https://unpkg.com/element-plus@2.1.9/dist/index.css" rel="stylesheet"/>
<title>Vue3 CDN的简单演示</title>
</head>
这样我们就可以在网页里面使用 Vue 了，另外我们引入了一个UI库——element-plus。
- 绑定数据和事件
然后我们写一个 hello word：
<body>
<div id="app">
<button @click="count++">自增</button> <br>
<el-button @click="count++" >自增</el-button> <br>
{{ count }}
</div>
<script>
const { ref, createApp } = Vue
const app = {
setup() {
const count = ref(0)
return {
count
}
}
}
createApp(app)
.use(ElementPlus)
.mount('#app')
</script>
</body>
插值
在模板里面使用双大括号即可实现数据绑定。事件
可以使用原生button，也可以使用UI库提供的button，用v-on（简写：@）添加事件。定义数据
这里采用 composition API 的方式，使用 ref，实现简单的计数功能。挂载
使用 createApp 创建一个App，然后挂载插件、UI库、路由、状态等。
本篇只做简单介绍，详细介绍请移步官网：https://staging-cn.vuejs.org/
组件化
一个项目有很多功能，显然不能把所有代码都放在一起，那么如何管理代码呢？Vue提供了组件化的方式，便于组织代码。
我们可以建立一个 count.js 文件（单文件组件），实现上面那个简单的计数功能：
- count.js
const { ref } = Vue
export default {
name: 'count',
template: `
<button @click="count++">自增</button> <br>
<el-button @click="count++" >自增</el-button> <br>
{{ count }}
`
setup() {
const count = ref(0)
return {
count
}
}
}
这样就可以建立一个单独的Vue组件，相关的代码都可以放在这里，管理起来就更容易了。
工程化项目
一般我们可以用 Vite 建立一个项目，然后安装需要的各种插件，但是这需要我们先了解 node、npm、yarn、vite等，还要先配置好环境，这些对于新手来说容易懵。
那么能不能暂时跳过这些，直接建立一个工程化的项目呢？当然是可以的！
我们可以模仿 Vite 建立的项目的文件结构，用CDN的方式实现一个项目。
为啥要用CDN的方式模拟一下呢？因为这样可以先不用了解node等前置知识点，可以比较清晰的看到 Vue 的运作方式，快速理解Vue的特点，可以作为一种过渡方式。
目录结构
可以发现和 Vite 建立的项目的结构是基本一样的，只是把.vue后缀变成了.js后缀。
加载各种插件
<head>
<meta charset="UTF-8" />
<link rel="icon" href="../nfwt.ico" />
<script src="src/script/appImport.js?v=1"></script>
<!--加载 axios -->
<script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
<!--加载 vue3 -->
<script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
<!--加载 vue-router -->
<script src="https://unpkg.com/vue-router@4.0.14/dist/vue-router.global.js"></script>
<!--加载 pinia -->
<script src="https://unpkg.com/vue-demi@0.12.5/lib/index.iife.js"></script>
<script src="https://unpkg.com/pinia@2.0.13/dist/pinia.iife.js"></script>
<!--加载 element-plus -->
<script src="https://unpkg.com/element-plus@2.1.9/dist/index.full.js"></script>
<link href="https://unpkg.com/element-plus@2.1.9/dist/index.css" rel="stylesheet"/>
</head>
- pinia 状态管理
pinia 需要加载两个文件，一个是pinia.js，另一个是其依赖项 vue-demi，实现兼容vue2的功能。
加载 main.js
main.js 是入口文件，需要在 index.html 使用 type="module" 的方式引入，这样main里面才可以使用“import”。
<body>
<div id="app">
这里是CDN仿工程化开发的演示...
</div>
<script type="module" src="src/main.js"></script>
</body>
设置 main.js
然后在main里面加载根节点、路由设置、状态设置、UI库等操作。
const ver = window.__ver || '?v=0'
const pinia = Pinia.createPinia()
Promise.all([
import('./app.js' + ver),
import('./router/index.js' + ver),
]).then((res) => {
Vue.createApp(res[0].default)
.use(res[1].default) // 挂载路由
.use(ElementPlus) // 加载ElementPlus
.use(pinia) // 状态管理
.mount('#app') // 对应div
})
可以直接使用 import App from './app.js' 的方式加载，但是不好管理缓存。
所以采用了这种增加版本号的方式，以确保可以加载最新文件。
App.js
可以在 app.js 做页面布局，当然也可以实现其他功能。
const { ref, defineAsyncComponent } = Vue
// 加载菜单组件
const myMenu = defineAsyncComponent(() => import('./views/menu.js' + window.__ver))
export default {
name: 'app',
components: {
myMenu
},
template: `
<el-container>
<el-header>
CND的方式 模仿工程化项目
</el-header>
<el-container>
<el-aside width="200px">
<!--菜单-->
<my-menu/>
</el-aside>
<el-container>
<el-main>
<!--路由容器 -->
<router-view></router-view>
</el-main>
<el-footer>
CND的简单演示。by Vue3、element-plus、Pinia、vue-Router
</el-footer>
</el-container>
</el-container>
</el-container>
`,
setup() {
return {
}
}
}
这里采用异步组件的方式加载子组件，方便设置版本号，确保可以加载最新文件。
设置路由
为了更方便的加载组件，我们可以使用 vue-router 设置路由。
// 定义路由
const routes = [
{
path: '/',
name: 'Home',
component: () => myImport('views/home')
},
{
path: '/pinia',
name: 'pinia',
component: () => myImport('views/state/pinia')
},
{
path: '/',
name: 'ui',
component: () => myImport('views/ui/ui-elp')
},
{
path: '/h',
name: 'h-test',
component: () => myImport('views/h/h')
},
{
path: '/jsx',
name: 'jsx-test',
component: () => myImport('views/h/jsx')
}
]
const base = '/cdn3/'
const router = VueRouter.createRouter({
history: VueRouter.createWebHistory(base),
routes
})
export default router
如果组件只有js文件，那么可以直接使用 import 来加载，如果组件由js+html组成，需要使用 myImport 来加载，myImport 是我自己封装的函数，在最后介绍。
设置菜单
我们先做一个简单的菜单：
- menu.js
export default {
name: 'menu',
template: `
<router-link :to="{name:'Home'}">首页</router-link><br><br>
<router-link :to="{name:'pinia'}">pinia</router-link><br><br>
<router-link :to="{name:'h-test'}">h的演示</router-link><br><br>
<router-link :to="{name:'jsx-test'}">jsx的演示</router-link><br><br>
`,
setup() {
return {
}
}
}
这里先使用 router-link 做个简单的连接，也可以使用 el-menu 做菜单。
状态管理
这里采用最新的 pinia 进行状态管理，因为 Vuex 有点臃肿。
首先需要在 main.js 里面挂载pinia，见 main 的部分。
然后我们建立一个js文件，定义一个状态，再建立一个js文件作为组件。
- count.js
const { defineStore } = Pinia
const testPromie = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(100)
}, 500)
})
}
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0, name: '' }
},
actions: {
increment() {
this.count ++
},
async loadData(val, state) {
const foo = await testPromie()
this.count += foo
this.name = 'async 赋值：' + new Date().valueOf()
},
loadData2(val, state) {
testPromie().then((val) => {
this.count += val
this.name = '异步赋值：' + new Date().valueOf()
})
}
}
})
- pinia.js
然后在组件里面引入：
// 状态
import { useCounterStore } from './count.js'
export default {
name: 'pinia-test',
setup() {
const test = useCounterStore()
return { count }
}
}
- pinia.html
我们可以把 template 部分拿出去，做成 html 文件：
<div>
测试pinia的状态<br>
{{ test }}<br>
<el-button type="" @click="test.increment()">修改</el-button>
</div>
这样一个简单的项目结构就搭建起来了。
小结
本篇仅为过渡，并不是说正式项目要用这种方式开发，因为缺点也是很明显的。
当然也是有一些优点：
- 可以更充分的利用CDN，缓存vue.js这类的变化频率低的 js 文件，只需要更新业务相关的代码即可。
- 如果CDN不卡的话，加载速度可以更快。
- 可以利用CDN的资源，缓解自己服务器的压力。
- 项目可以分模块开发，稳定且基础的模块可以打包、发布到CDN里面使用。
源码和演示
补充
template 部分，如果用字符串的方式写，那么比较麻烦，所以可以分为 html 文件的方式来写，这样可以使用提示、补全和验证等功能。
然后做一个加载的函数 myImport ：
window.myImport = (url) => {
return new Promise((resolve, reject) => {
const ver = window.__ver || ''
const baseUrl = window.__basrUrl || '/src/'
// 先加载 js
import(baseUrl + url + '.js' + ver).then((resjs) => {
const js = resjs.default
if (!js.template) {
// 如果模板是空的，表示需要加载 html作为模板
axios.get(baseUrl + url + '.html' + ver).then((resHTML) => {
js.template = resHTML.data
resolve(js)
})
} else {
// 否则直接使用 js 注册组件
resolve(js)
}
})
})
}
从 jQuery 到 Vue3 的快捷通道的更多相关文章
- Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]
快捷API <1>$.get(url, [data], [callback], [type]) <2>$.post(url, [data], [callback], [type ...
- windows 右健添加cmd快捷通道
windows 右健添加cmd快捷 - Windows - geektown极客堂 - Powered by Discuz!. 把横线下面的文本copy保存到一个注册表文件中,比如cmd.reg,然后 ...
- 网页插件学javascript还是jquery好啊？
文章的起因,也是在群内交流是回答一个小伙的问题,一扯就停不下来,但由于个人知识面覆盖有限,自身基础又不够扎实,仅供参考: 问这个问题之前,我个人建议先搞清什么是jquery,什么是js? jq ...
- jQuery 2.0.3 源码分析 钩子机制 - 属性操作
jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- jQuery学习小结1-CSS操作+事件
一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...
- jQuery库(noConflict)冲突解决机制
很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...
- jQuery 最外面的那层皮
这次学习 jQuery 源码,基于当前最新的版本,3.2.1. IIFE (function() { 'use strict'; // })(); 定义一个匿名函数并立即执行,得益于 javascri ...
- 美团Java团队分享：如何实践支付通道自动化管理
随着支付业务量激增,支付团队不断壮大.为了满足日益增长的业务需求,大量的支付通道逐渐接入,但由于对接的各银行和第三方系统的稳定性参差不齐,支付通道故障时有发生,作为承接上下游的核心系统,要在一系列不稳 ...
随机推荐
- 什么是RabbitMQ？RabbitMQ的使用场景是什么？
参考链接:RabbitMQ 简介以及使用场景
- Java程序要操作数据库，一定要使用JDBC技术吗？
<!-- MySQL驱动,连接数据库用,由数据库厂商提供 --> <dependency> <groupId>mysql</groupId> <a ...
- 阿里低代码引擎 | LowCodeEngine - 如何配置并调用请求
首发于 语雀文档@blueju 前言 发送请求是前端中很重要也很常见的一部分,阿里低代码引擎自然也不会缺少这一块.在阿里低代码引擎中,请求是在数据源中配置,数据源位置如下图: 配置 配置界面如下图:其 ...
- Leetcode26——删除有序数组中的重复项（双指针法）
Leetcode26--删除有序数组中的重复项(双指针法) 1. 题目简述 给你一个升序排列的数组 nums ,请你原地 删除重复出现的元素,使每个元素只出现一次 ,返回删除后数组的新长度.元素的相对 ...
- idea问题之"一个或多个listeners启动失败问题"
org.apache.catalina.core.StandardContext.startInternal 一个或多个listeners启动失败,更多详细信息查看对应的容器日志文件之 "A ...
- 顺利通过EMC实验（17）
- .NET Core Ecosystem
.NET .NET Blog Application Models Web Mobile Desktop Microservices Gaming Machine Learning Cloud Int ...
- React+dva+webpack+antd-mobile 实战分享（一）
再看本篇文章之前,本人还是建议想入坑react的童鞋可以选有create-react-app来创建react的项目,因为现在dva和roadhog还不成熟,坑相对要多一些,当然如果你已经做好跳坑的准备 ...
- web开发者踏入人工智能的利器_Tensorflow.js
前言 最近公司向员工搜集公司杂志的文章,刚好最近学习了机器学习相关课程.为了赚取购买课程的费用,所以写了如下文章投稿赚取稿费. 如下文章可能涉及一些我所购买课程的内容,所以不便将所有资源进行展示. 当 ...
- java堆排序
直接贴源代码: package com.java.fmd; import java.util.Scanner; public class HeapSort { int[] arr; public st ...