传统开发网站一般使用Jquery来操作dom,现在Jquery虽然还在更新(2024年4月28日),但是感觉还是Vue的响应式好一点,我只需要修改数据源就可以了,UI可以自动刷新,不用再操作dom了。
但是Jquery还是非常强大的。
单独使用Jquery可以享受丰富的Jquery插件,丰富的dom操作api,但是如果页面里想引入公共部分(比如公共Header和公共Footer)就不是很方便了;
单独使用Vue的话,在配合一些UI框架(Element)等,使用起来也不是很方便,不如使用Jquery+JqueryUI(jQuery插件)来的简单
所以就可能既使用Jquery又使用Vue。
平常使用Vue都是结合webpack或者View等构建工具,通过单文件组件(SFC)进行开发,一旦脱离了构建工具,使用全局构建版本,突然就不知道怎么使用Vue了。这篇文章就来纪念一下全局构建版本的基础使用
- 在生产环境,建议使用.prod结尾的构建版本
- 在全局构建版本里所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上
- 把公共Header和公共Footer单独抽出来,在每个页面引入
代码案例
公共组件jscommon-component.js
const Header = {
template:`
<div class="wrapper header" id="header">
<div class="topbanner"></div>
<ul class="navmenu">
<li><a href="index.html">网站首页</a></li>
<li><a href="list-1-1.html">概况</a></li>
<li><a href="list-6-1.html">要闻</a></li>
</ul>
</div>
`
}
Html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./css/base.css">
<script src="./js/jquery-3.6.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/vue.3.4.25.js"></script>
<script type="text/javascript" src="./js/common-component.js"></script>
</head>
<body>
<div id="app">
<page-header></page-header>
<div>count:{{count}}</div>
</div>
<script>
const {createApp, ref,onMounted} = Vue
createApp({
setup() {
const count = ref(2)
onMounted(()=>{
setTimeout(()=>{count.value = 4},2000)
})
return {count}
}
}).component('page-header', Header).mount("#app")
</script>
</body>
</html>
可以在这个基础之上再结合axios,感觉做网站达到了灵活,快速,可能也利于优化seo。
对于构建小型网站或者想要优化SEO或者不想重新打包文件就可以修改网站内容,那么可以使用这种方式