vue --- SPA模式的组件

SPA：单页应用(Single Page App),具体好处,百度搜索

我们可以想象一个场景，有两个页面,每个页面的头部都有一张 Logo 图片.如果每次都写成原始 HTML 的话,代码就会重复.

    // 页面1的代码如下:<div class='logo'><img src='url'> </div>// 页面2的代码如下:<div class='logo'><img src='url'></div>

因此，我们可以把这段代码抽取出来成为一个新的组件(component)

// 创建一个新的组件 (存放在/src/components/Logo.vue)
<template><div class='logo'><img src='url'></div>
</template>

在页面中引用组件

<template><div><my-logo></my-logo>   <!-- 对应MyLogo -->...</div>
</template><script>
import MyLogo from '@/components/Logo'export default {...components: {MyLogo}
}
</script>
虽然上面代码中定义的组件名字为MyLogo，但是在<template/ > 中使用时需要写为 <my-logo ></ my-logo>

参考《Vue.js快速入门》 P106

vue --- SPA模式的组件相关推荐

Vue学习杂记（八）——SPA模式和前端路由
SPA模式和前端路由一.SPA模式介绍二.前端路由工作原理三.配置前端路由三.路由的其他使用方式四.动态路由与参数说明五.导航卫士一.SPA模式介绍 SPA(single pag ...
Vue之路由--SPA模式
明确课堂目标: 1. SPA是什么? 单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态 ...
Vue cli3 库模式搭建组件库并发布到 npm
三.规划目录结构 1.创建项目在指定目录中使用命令创建一个默认的项目,或者根据自己需要自己选择. $ vue create . 2.调整目录我们需要一个目录存放组件,一个目录存放示例,按照以下方式 ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
Vue SPA 打包优化实践
本文是继笔者上一篇文章<<Vue SPA 首屏加载优化实践>>基础上进一步优化的实践经验分享! 随着我们的项目的增长,打包会越来越慢.每次打包都会将第三方的js打包一遍,但是这 ...
rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. class="video-player vjs-custom-skin" ...
vue组件一直注册不了_【报Bug】现在究竟支不支持Vue.use内注册组件
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) 我测试了所有框架支持的小程序 ...
vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...

vue --- SPA模式的组件

vue --- SPA模式的组件相关推荐

最新文章

热门文章