单页面使用vue3

已于 2022-03-14 14:59:10 修改
阅读量1.6k 收藏 1
点赞数 1
分类专栏： vue3 文章标签： javascript 前端
于 2021-12-07 09:13:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49295874/article/details/121603031
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <div id="app">
        <div v-for="(item,index) in brands" :key="index">
        <!-- 懒加载图片 -->
            <img :src="item.companyLogo" loading="lazy" style="width:300px;height:200px;"/>
        </div>
    </div>
</body>

</html>

<!-- 在 vue.js 之后引入 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const { onMounted, createApp, reactive, toRefs } = Vue;
    const app = createApp({
        setup() {
            const state = reactive({
                brands: []
            })
            const brands = toRefs([])
            onMounted(() => {
                getBrands();
            })
            const getBrands = () => {
                axios.post('###'
                    , { "current": ###, "size": ###, "activityId": "###", "search": "###" })
                    .then((res) => {
                        state.brands = [...res.data.data];
                    })
            }
            return {
                ...toRefs(state),
                getBrands,

            }
        }
    });
    app.mount("#app");
</script>
赵啸林
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3-组件基础
fusheng_cn的博客
09-25 2860
vue3组件基础：单页面应用程序、vite的基本使用、组件化开发思想，vue组件的构成、组件的基本使用
运行单独的vue页面
sinat_33384251的博客
09-22 1万+
之前 需要设置过浏览器的调用，如果路径不对，会提示错误 需要全局按照vue 如果在控制台 输入 vue 提示没有这个命令 npm install -g @vue/cli-service-global 确保安装成功 输入 vue -V #有结果 就可以使用 如果要运行 hello.vue 在控制台输入：vue serve hello.vue # hello.vue 是文件名 ...
新手vue构建单页面应用实例代码
12-10
本文介绍了新手vue构建单页面应用实例代码，分享给大家，具体如下 步骤： 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一、目录结构： 二、搭建项目 先安装 vue-cli： sudo npm install -g vue-cli 使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖） 输入命令进入项目： cd my-project  安装依赖： npm install np
vue3在单页面使用
Linlietao0587的博客
02-10 509
【代码】vue3在单页面使用。
vue3 项目使用 vite 创建独立的登录页
最新发布
violetjack的专栏
04-19 499
其实原理并不难，记录下此文主要是提供一种思路。面对一些独立性较强的页面的时候不用拘泥于 SPA 中的路由功能，是可以利用 vite 或者 webpack 做多页应用的。另外，我也遇到过一开始是接入的公司公共 SSO 页，后面要自行开发登录页的情况。也适合用这种多页应用的模式。
详解Vue使用命令行搭建单页面应用
12-07
使用命令行搭建单页面应用 我们来看一下最后完成的效果： 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一、 下载工具 node, git 的下载大家可以去官网自行下载就可以了。 下面说一说安装 npm，npm 是在以上两个都安装的情况下才可以的。 国内直接 git npm 非常慢，所以我们到 taobao 的 npm 镜像下面去下载安装 镜像地址>> 打开安装好的 git bash 1 . 在 Git Bash 输入镜像的地址： 下载成功后，输入 cnpm -v 看看是否安装成功了 2 . 安装好 npm 下面就好办了，我们回到 Vue 官方网站看使用
vue单页应用中多标签头显示及组件缓存设计实例
02-17
系统中实现了路由标签头的显示，并且有路由组件的缓存，这样可以打开多个路由页面，通过标签头进行切换显示，不用每次点击都要刷新，这样使性能大大提高，应用的体验也更好。
Vue----单页面应用程序
emmmm.....
04-29 764
文章目录1 单页面应用程序1.1 什么是单页面应用程序1.2 单页面应用程序的特点1.3 单页面应用程序的优缺点1.3.1 单页面应用程序的优点1.3.2 单页面应用程序的缺点1.4 如何快速创建 vue 的 SPA 项目 1 单页面应用程序 1.1 什么是单页面应用程序 单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。 1.2 单页面应用程序的特点
Vue3 + Vite + Pinia创建单页面应用
frontend_frank的博客
11-07 405
原文链接：https://labs.pineview.io/learn-how-to-build-test-and-deploy-a-single-page-app-with-vue-3-vite-and-pinia/[1]作者：Andrei Rusu[2]正文从这开始~介绍诞生于2014年的Vue.js，无疑是目前领先的前端框架之一，随着社区的发展以及生态系统的壮大，在相当一段时间内，它的低位都...
webpack将vue3单页面应用改造成多页面应用
huangfengnt的博客
05-19 1066
webpack将vue3单页面应用改造成多页面应用
如何运行vue项目(超详细图解）
热门推荐
忧郁的蛋的专栏
05-10 3万+
本篇超级详细案例截图教学 如何运行别人的vue项目，图片点击可放大仔细看 一、查看node.js版本Vue环境配置教程 ：https://blog.csdn.net/m0_57545353/article/details/124366678配置完成后分别在cmd中执行node -v查看是否安装成功，出现版本号就安装成功了进入cmd命令行窗口，输入node -v查看nodejs版本输入npm -v查看npm版本node -v npm -v 1 2如下图 如所示，即为安装成功： 二、运行别人的项
vue将单页面改造成多页面应用的方法
12-02
问题描述： 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面，用户查看页面是很简单的页面，但是在加载过程中，却加载了整个应用的打包代码，量重且影响了响应和体验。我想要的...
解决vue单页面应用进入页面加载所有 js 的问题
10-14
主要介绍了解决vue单页面应用进入页面加载所有 js 的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3基础（2）——组件基础
SongD1114的博客
04-07 1355
Vue3.0组件基础：组件的封装、props、计算属性、自定义事件、v-model
vue-cli3单页构建大型项目方案
weixin_44953136的博客
04-07 583
一、vue-cli3单页面构建方案 1、在目标文件夹内执行 vue ui ; 一个ui版界面，用于创建vue项目； 2、打开router文件夹内的index，看情况配置router的模式，是默认的hash还是history？ ps:个人推介history模式，因为内嵌如app的H5页面的话，有可能某些app是不允许页面上带有’#'的，而hash会在url上利用#来做路由转发。 ps:histor...
Vue3 Router路由单页面跳转简单应用
javaGHui的博客
08-16 242
Vue3 Router路由页面跳转简单应用
使用cdn引入的方式创建一个vue3单页面内容
m0_52320512的博客
03-27 405
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
vue 开发中的技巧
技术改变世界
06-04 345
1. Modal框的控制 一个页面种通常会存在很多个不同功能的弹框，若是每一个弹框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有Modal弹框的展示，比如某个页面中存在三个Modal弹框 // bad // 每一个数据控制对应的Modal展示与隐藏 new Vue({ data() { return { modal1: false, modal2: false,
node服务部署vue3（ssr）单页面应用上线
富朝阳的博客
11-15 390
博主最新开发了vue3新版的单页面服务端渲染的博客，框架用的vue3框架，vite4构建，在部署上线的时候遇到了一些问题，现在分享给大家。避免踩坑。
vue3-lazy如何单独页面使用
04-01
1. 安装`vue3-lazy` 首先，需要在项目中安装`vue3-lazy`，可以使用npm或yarn进行安装： ``` npm install vue3-lazy ``` 或者 ``` yarn add vue3-lazy ``` 2. 导入`vue3-lazy` 在需要使用懒加载的页面，需要导入`vue3-lazy`： ```js import Lazy from 'vue3-lazy'; ``` 3. 注册`vue3-lazy` 在页面组件中注册`vue3-lazy`： ```js export default { components: { Lazy, }, // ... } ``` 4. 使用`vue3-lazy` 在需要懒加载的地方，使用`<lazy>`组件，将需要懒加载的内容放在`<lazy>`标签内部： ```html <template> <div> <lazy :src="imageSrc" alt="image"></lazy> </div> </template> ``` 其中，`imageSrc`为图片的url地址。 5. 完整示例 下面是一个完整的示例： ```html <template> <div> <h1>Lazy Load Image Demo</h1> <lazy :src="imageSrc" alt="image"></lazy> </div> </template> <script> import Lazy from 'vue3-lazy'; export default { components: { Lazy, }, data() { return { imageSrc: 'https://picsum.photos/200/300', }; }, }; </script> ``` 在这个示例中，我们导入了`vue3-lazy`，将它注册为组件，在页面中使用`<lazy>`标签懒加载了一张图片。在`data`中定义了图片url的地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值