普通页面使用vue.js心得

在写本文之前要问自己几个问题，来说明为什么要这么做：

为什么在html中使用vue.js?

　　vue.js已经趋于成熟，个人感觉比jquery要好用的多，但是在node环境下使用vue.js不用使用SSR后端渲染的情况下SEO并不友好，所以就想着在html直接引用vue.js当做jquery使用。

为什么不使用SSR后端渲染？

　　因为本人搞后台开发使用的是JAVA，所以要想SSR必须使用nodejs作为服务端，所以我并没有太多时间学习nodejs

所以最后决定在后台使用thymeleaf模板引擎中使用vue.js，我做的是一个博客系统，我从入行开始就想有一个属于自己的博客，但是当时时间和技术都是非常有限的，所以一直没有把这件事提上日程，今年是我第二年工作，感觉学习的技术足可以做一个简单的博客了，本人博客园也会围绕我自己搭建的个人博客遇到的问题展开技术的分享，下一篇介绍我的来历还有我的经历，如果有人看见的话希望我们可以交流技术可以互相学习，好了废话不多说，我要解决的问题是，博客的导航栏的复用，就是头部导航栏点中的话就高亮，就要实现这么一个简单的问题。

　　使用的技术：

　　　　　　vue.js模板、Element 导航栏

本人没有写过太多博客，所以博客的排版可能不太好，请您原谅，这个坑不适用于nodejs下的vue开发，因为那个环境下是单页应用，我只是当成jq来用的，所以可能不太规范，请您谅解。

要解决的问题：

　　复用导航栏，而且有选中高亮。

实现的效果：

切换tab

最终效果就是这样，切换后自动选中，不是在每个页面都写一遍导航栏，那样太难维护了！

代码：

// 定义一个名为 his-header 的新组件
Vue.component('his-header', {data: function () {return {index: 0}},props: ['indexs'],template: '<el-menu :default-active="index" class="el-menu-demo" mode="horizontal"><li class="el-menu-item index" style="margin-left: 20%;"><h2><a href="/">起码网</a></h2></li><el-menu-item index="1"><a href="/">首页</a></el-menu-item><el-menu-item index="2"><a href="/resource">建站教程</a></el-menu-item><el-menu-item index="3"><a href="/resource">应用中心</a></el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">资源分享</a></el-menu-item><el-menu-item index="5"><a href="https://www.ele.me" target="_blank">随笔杂谈</a></el-menu-item><el-menu-item index="6"><a href="/about">关于我</a></el-menu-item></el-menu>',mounted: function () {//创建完模板以后再赋值让element 选中菜单this.index = this.indexs;}
})

<his-header v-bind:indexs="1"></his-header>

<his-header v-bind:indexs="2"></his-header>

在每个页面只要使用这样的标签就可以实现了！

转载于:https://www.cnblogs.com/yancary/p/10030727.html

普通页面使用vue.js心得相关推荐

html页面引入vue.js + elementUI 离线包快速开发前端页面
背景需要开发一个页面,页面复杂,原生H5不熟悉.项目要求开发一键打开的html页面,不需要任何运行环境,例如node等.最后决定采用html + vue.js + elementUI离线开发. 离线 ...
后台取值页面显示——Vue.js
在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简 ...
vue传值给子页面html,vue.js如何父传子？
vue.js如何父传子?下面本篇文章给大家介绍一下vue.js中父传子的传值方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 引用官网的一句话:父子组件的关系可以总结为 prop ...
vue 页面引入多个内部js_.html多页页面引入vue.js怎么开发？
vue.config里可以配置多页面应用module.exports = { // publicPath: process.env.NODE_ENV === 'production' // ? 'ht ...
Vue.js 核心精要实战解析
课程简介前端框架领域,Angular.React.Vue.js 三足鼎立,而 Vue.js 因其性能.通用.易用.体积.学习成本低等特点深受广大前端们的追捧,并吸引了一大批前端初学者.作为 Vue. ...
[译] State of Vue.js report 2017 中文版
原文链接:https://www.monterail.com/state-of-vuejs-report 译文出自:掘金翻译计划 Event Organizer:leviding Translater ...
State of Vue.js report 2017 中文版
转载自:https://juejin.im/post/5a138fae5188254d28732899 原文链接:www.monterail.com/state-of-vu- 译文出自:掘金翻译计划 ...
vue.js WebSocket connection to ‘ws://localhost:3000/‘ failed: WebSocket is closed due to suspension.
报错客户端 Safari 版本 13.0.1 (14608.2.11.1.11) 场景重现点击切换页面,vue.js 就报错这个提示.但放到线上去又不会有. WebSocket connectio ...
VUE2.0 学习（一）HTML单页面使用vue技术
目录先下载vue.js 入门全局配置浏览器控制台报错指令语法 v-bind v-model v-on data的两种写法 MVVM 事件修饰符 prevent修饰符 stop 修饰符 once修 ...

普通页面使用vue.js心得

普通页面使用vue.js心得相关推荐

最新文章

热门文章