1.创建"回到顶部"组件 1 <template> 2 <transition name="el-fade-in"> 3 <div class="page-up" @click="scrollToTop" v-show="toTopShow"> 4 <i class="el-icon-caret-top"></i> 5 <…

vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: <child-pack :msg ="myMsg" v-on:listenTochildEvent="showMessageFromChild"></child-pack> msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,W…

html <template> <a href="javascript:;" class="toTop" @click="backTop" v-show="backToTop"> <i class="iconfont"></i> </a> </template> js 监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop…

<template> <div class="main"> <div class="content">灰色部分是内容部分</div> <div class="red">红色部分是内容部分</div> <div class="scollTop" id="imgscoll" v-show="isShowimg === tru…

1.官网下载node,安装node.js环境 安装完成后进入cmd,输入node -v和npm -v查看node和npm是否安装成功及对应的版本 2.全局安装vue-cli:cnpm install -g vue-cli,此命令运行一次即可,以后就不用安装了 执行vue -V查看vue的版本 3.创建项目:vue init  webpack hellovue 4.安装路由:npm install vue-router --save-dev 5.安装elementUi组件:npm install…

废话少说,直接上最新鲜的干货 当然,你得提前安装好bootstrap,router,element-ui,vue-axios 1.上递归组件,此处参考了某位大神的代码,具体不知道是谁,因为到处都有人用 <template> <div> <template v-for='menu in menuList'> <!-- 如果当前有子菜单,则显示 el-submenu ,在el-subment 里调用 递归组件 --> <el-submenu v-if='m…

<template> <div id="app"> <v-home></v-home> <hr > <br> <v-news></v-news> </div> </template> <script> /* 1.引入组件 2.挂载组件 3.在模板中使用 */ import Home from './components/Home.vue'; import…

介绍 这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部. 使用方法 由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI(安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹BackToTop导入到现有项目中即可使用. 使用示例 <template> <div id="app"> <!--可自定义按钮的样式.show/hide临界点.返回的位置…

在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }) 2.当页面中的其中一个组件中需要滚动到顶部的时候 watch: { $route(to) { //监听路由变化的时候使滚动条回到顶部 this.$refs.c…

创建导航页组件 在components目录下新建一个navigation目录,在Navi目录中新建一个名为Navi.vue的组件.至此我们的目录应该是如下图所示: 然后我们修改main.js文件,修改后的文件如下 import Vue from 'vue' //import App from './App' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-…