SANJIN0527_的博客

<template> <div class="c-fixed-bottom"> <!-- 空白占位 --> <div class="c-fixed-bottom__seat" /> <div class="c-fixed-bottom__positioner" :style="customStyle"> <slot></slot> </div> </div

vue-cli 安装：npm install -g @vue/cli问题描述：原因分析：主要原因是安装vue-cli的版本过低 不能进行执行 产生冲突解决方案：npm install -g @vue/cli --force 可以强制覆盖以前旧版本的vue-cli脚手架查看版本在执行创建项目vue create project-name（自己起的项目名）...

html结构部分 <!-- 上传音频不要过大 --> <audio id="audio" src="https://image1.guazistatic.com/qn210114171938ed9dcb199aaacb61474b26ad643ac2de.mp3"> </audio> <!-- isOff默认是true --> <div @click="changeOn" :class="isOff ? 'isOff

实现效果如下：后端返回6052715 要将这个转为时分秒格式<div class="content-moneybox-two">距结束还剩{{ newtime }}</div>data() { return { newtime: '0时00分00秒', } },// 时间处理 formatDuring() { // eslint-disable-next-line n

实现展示的效果图：我这边写成组件可以参考一下：用法 ：<star :value="60"></star><template> <div class="star_box"> <div class="star_item" v-for="index in 5" :key="index + 'star'"> <!-- 执行starIndex方法 --> <img :src="imagePat

直接上实现效果：一、先进行安装npm install --save screenfull二、template写入<div @click="clickFullscreen"> <img src="../../assets/big.png" alt width="15px" height="15px"/>全屏 </div>三、在script引入并写入![import screenfull from "screenfull";](https

一、在使用之前先安装:npm install --save vue-i18n二、进行引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import VueI18n from 'vue-i18n';//引入写好的语言包 看不懂往下看import { messages } from './components/common/i1

话不多说上效果：简单来实现一下下面是要设置背景变化的地方：<div class="login-container" :style="backgourndStyle"></div>computed:{ backgourndStyle:function(){ // 计算body可用高度 let cHeight = window.outerHeight - (window.outerHeight - window.

先看实现的效果视频：一、要在router文件下的index.js文件下写（每一个路由对象下配置meta）下面那我写的这个项目举例const router = new Router({ routes: [ { path: '/Login', name: 'Login', component: Login, meta: { title: "登录系统" } }, { path: '/ErrorRouter',

报错如下：解决方法：先清除缓存 再重新下载项目 安装清除缓存：运行npm cache clean --force然后重新下载项目重新安装：npm install

一般在app和电商网站中底部的切换高亮显示是非常的常见的现在来实现一下：一、首先先找到文件目录下的二、在这个app.josn文件中写入{ "pages": [ "pages/index/index", "pages/message/message", "pages/profile/profile", "pages/contact/contact" ], "window": { "backgroundTextStyle": "light",

实现效果:一、将获取到的数据进行计算<!-- 表格区域 -->// uaerlist是获取数据的数组后面写入 // .slice((currentPage-1)*pagesize,currentPage*pagesize) <el-table :data="uaerlist.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%"

一、在页面加载完成后，在开始滚动之前：这个是显示的返回上一次到路由的地方<div class="iconfont back_up" @click="gotoup" v-show="isSHow">&#xe60d;</div>先在data中定义属性:data(){ return { showhash:true, isSHow: true, }}将"Header"栏所在的div 设置固定定位，用标志位showhash设置v-show...

这个是提示不是错误 这个会出现的原因就是因为如下：const router = new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld, children:[ { path:'/', name: 'home', component: home, }

方法1：// 可以用来获取top值// 可以不用加单位，这样写的话就是让滚动到什么位置 document.documentElement.scrollTop = 300方法2：//先获取目标位置距离mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('box'); //在data中定义 t

‘webpack-dev-server’ 不是内部或外部命令 也不是可运行的程序 或批处理文件 如何解决处理就有的时候在我们启动项目npm run dev 报错如下：首先遇到这个情况不要慌不要删文件乱改文件觉得自己写错什么才这样解决方法：把项目中的根目录删除node_modules文件夹，然后在项目根目录路径下的终端运行打入"npm install" 在这里说一下npm install 项目文件中并没有 node_modules文件夹，项目的依赖文件，npm会根据package.json配置

Vue Slide Show 基于Vue的轮播图组件vue的轮播图是通过vue-awesome-swiper来实现的，及时vue版的swiper可以在github.com 上搜索 vue-awesome-swiper来参考一下1.安装 vue-awesome-swiper指定版本npm i vue-awesome-swiper@2.6.7 --savenpm install vue-awesome-swiper@3.1.1 --save-dev注意!先开始安装我是使用 vue-awesom

关于vue中data里为什么有return返回函数问题首先先看一下下面的代码var vm = new Vue({ el: '#example', data: { message: 'Hello' }});这种写法data对象是引用类型//在vue组件中这样写data() { return { message: 'Hello' }}函数写法，每次返回新对象有人要问到为什么要把data变成函数return返回1）在简单的Vue实例中，因为你app对象不存在

下面是例子 <button @click="up">从高到低</button> <button @click="down">从低到高</button>js代码export default { data() { return { itemList: [1, 2, 3, 4, 5, 6] }; }, methods: { // 从高到低 up() { this.itemList.sor

<template> <div class="sliding_box"> <div class="sliding_item" v-for="(item,index) in content" :key="index"> <div class="sliding_item_img"> </div> </div> </div></template><script>e

在写导航切换时点击会有以下报错这个报错是是路由中点击路径重复 ，也有可能是安装的vue-router还是之前出错的那个版本，在项目目录下运行 npm i vue-router@3.0 -S 即可。解决方法1：在 main.js里添加一段代码。代码如下：import Router from 'vue-router'const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) {

我写在了入口App文件中 为父组件<template> <div id="app"> <router-view /> //子组件 子传父 <Tabfooter :tabItems="tabItems" v-show="this.$route.meta.isShowTabbar"></Tabfooter> //this.$route.meta.isShowTabbar 是在路由中定义这个底部导航是否显示

template <span v-if="codeShow" @click="getPhoneCode">获取验证码</span> <span v-if="!codeShow">{{count}}秒后重试</span>scrtpt data(){ return { codeShow: true, //判断显示隐藏 count: '', //显示时的文字内容 timer: null, } }, get

第一单元1.简述MVVM和MVC的区别MVC是后台的中框架模式 将程序分成三部分M(model模型) V（view 视图） C（controller控制器）MVVM 是为实现MVC中的v（view视图）M model（数据） v（html元素）视图 v m(view-model)是用来控制数据的改变和控制试图是前端的框架模式2、简述虚拟DOM对复杂的文档DOM结构，提供一种方便的工具，进行最小化的DOM操作3、如何创建vue的实例var vm=new Vue({　　el:“挂载点”

vue-cli 中脚手架修改默认端口在搭建脚手架目录下新创建文件 命名为vue.config.js 文件在文件写入如下：module.exports = {devServer: {port: 8888, // 端口},lintOnSave: false // 取消 eslint 验证};操作完成后ctrl+c 终止 重启启动即可！...