vue

VUE点击回到顶部（带动画过渡效果） 监听路由返回顶部 在main.js中写入 // 路由变化跳转页面回到顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 在同页面跳转没发生变化 建议使用 点击回到顶部（带动画过渡效果） html <div @click="backtop"> <!-- 点击跳转内容 --> </div> js methods: { //返回顶部 backtop() { let top = document.documentElement.scrollTop || document.body.scrollTop // 实现滚动效果 const timeTop = setInterval(() => { document.body.scrollTop = document.documentElement.scrollTop = top -= 50 if (top <= 0) { clearInterval(timeTop) } }, 10) }, } 有什么问题欢迎评论留言，我会及时回复你的 来源： CSDN 作者： 换日线° 链接： https://blog.csdn.net/qq_43764578/article/details/104746789

常用的有8种 1. v-text 2. v-html 3. v-show 4. v-if 5. v-for 6. v-on 7. v-bind 8. v-model 一.v-if 和 v-show的区别 v-if 是直接对DOM节点进行操作，通过节点的增删来达到目的 v-show是通过display属性进行操作，通过none和block来显示隐藏元素 二.v-on 一般缩写成 “@” 三.v-bind 一般缩写成 “：”，动态绑定一个或多个特性 四.v-model 双向绑定 v-on:input 和 v-bind:value的缩写 来源： CSDN 作者： 岁月如歌请静听 链接： https://blog.csdn.net/SGK5201314/article/details/104760081

vue中的插槽，指的是子组件中提供给父组件使用的一个占位符，用<slot></slot>标签表示，父组件可以在这个占位符中填充任何模板代码，比如HTML、组件等，填充的内容会替换掉子组件的<slot></slot>标签（替换占位符）。 vue中的插槽大致可以分为默认插槽、具名插槽和作用域插槽三种。 默认插槽 默认插槽是最简单的一种插槽，和上面的描述一致，就是通过替换占位符达到在父组件中更改子组件中内容的效果。 在子组件中放置一个占位符（插槽）： <template> <span> <span>谁是最可爱的人？</span> <slot></slot> </span> </template> <script> export default { name: 'child' } </script> 然后在父组件中引用这个子组件，并给这个占位符（插槽）填充内容： <template> <div> <span>今日问答：</span> <child> <span>当然是yanggb了</span> </child> </div> </template> 这个时候页面展现的内容就会是【今日问答：谁是最可爱的人？当然是yanggb了】。 在上面的例子中，如果在子组件中没有放置<slot><slot>标签占位符，就不会有【当然是yanggb了】这个答案了，问题永远得不到任何回应

一：生命周期。 1，从Vue实例的创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ 2，生命周期钩子=生命周期函数=生命周期事件 二：主要的生命周期分类： ①创建期间的生命周期函数 ↓ beforeCreate： 实例刚在内存中就被创建出来，此时还没有实例化好data和methods属性。 created： 实例已经在内存中创建成功，此时data和methods已经创建成功，还没有开始编译模板。 beforeMount： 已经完成了模板编译，但是没有挂载到页面中。 mounted： 已经将编译好的模板，挂载到页面指定容器中。 ②运行期间的生命周期函数 ↓ beforeUpdate： 状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。 updated： 实例更新完毕以后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面渲染完成。 beforeDestroy： 实例销毁之前调用，在这一步，实例还是可以用的。 destroyed： 实例销毁后调用，调用后，Vue实例指示的所有东西就会被解绑定，所有的事件监听被移除，所有的子实例被销毁。 例子： < body > < div id = "app" > < input type = "button" value =

1，prop的大小写 HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名 2，传递prop 传入一个静态的值 < body > < div id = "example" > < blog - post title = "my name is ddd" > < / blog - post > < / div > < script > // 注册 Vue . component ( 'blog-post' , { props : [ "title" ] , template : '<h3>{{ title }}</h3>' } ) // 创建根实例 new Vue ( { el : '#example' } ) < / script > < / body > 2，传入一个对象的所有属性 < body > < div id = "example" > < div : style = "{fontSize:postFontSize+'em'}" > < blog - post v - for = "post in posts" v - bind : key = "post.id" v -

<template lang="html"> <div class="frameDiv"> <div class="frame"> <div class="title">{{ title }}</div> <div class="num">{{ num }}</div> </div> </div> </template> <script> export default { name: 'frameDiv', props: { title: String, num: Number } } </script> <style lang="less" scoped> .frameDiv { position: relative; margin-right: 18px; background:rgba(56,62,88,0.8); .frame { position: absolute; // top: -1px; // left: -1px; width: 154px; height: 71px; box-shadow:0px 0px 9px 0px rgba(82,255,226,0.23) inset; background: linear-gradient(to left, #00CDA2, #00CDA2) left top no-repeat, linear-gradient

VUE计算属性（可以写一个函数来讲计算值） 本案例为计算总分和平均分 计算属性：computed：{ } 和 data、methods 同级 HTML页面 ↓ < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > VUE 计算属性 < / title > < / head > < body > < div id = "app" > < table border = "1" > < thead > < th > 学科 < / th > < th > 分数 < / th > < / thead > < tbody > < tr > < td > 语文 < / td > // v-model.number 把双向绑定的model的值转换为数字型 < td > < input type = "text" v - model . number = "yw" > < / td > < td > { { yw } } < / td > < / tr > < tr > < td > 数学 < / td > < td > <

出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1、Win+R,cmd查询使用的端口号是否被占用： 　　输入命令:netstat -aon |findstr " 8002 " 　　按回车显示占用 8080端口对应的程序的PID号；如下图: 2、根据PID号找到对应的程序： 　　输入命令：tasklist |findstr " 12452 " 　　按回车后显示出占用该端口的程序,如下图: 3. 按快捷键“Ctrl+Shift+Esc”调出 Windows任务管理器 ，根据PID/程序对应名称结束该程序进程即可。如下图: 来源： https://www.cnblogs.com/zhoushuang0426/p/10482341.html

VUE控制指令（v-if v-else-if v-else） HTML页面 ↓ < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > VUE 控制指令 < / title > < / head > < body > < div id = "app" > < div v - if = "role == 'admin'" > 欢迎回来管理员 < / div > < div v - else - if = "role == 'hr'" > 待查看简历列表 < / div > < div v - else > 您没有权限访问 < / div > < / div > < script src = "https://cdn.bootcss.com/vue/2.6.11/vue.js" > < / script > < script src = "index.js" > < / script > < / body > < / html > JS页面↓ var app = new Vue ( { el : '#app' ,

leixign vue下载插件 1.当我使用a标签实现下载的时候，是能解决下载的问题，但是会跳转页面。 2.那么我们使用点击事件后，用window.open或者window.localtion.href，那么也会和使用a标签的效果是一样的，用户体验度，较差。 3.那么我们改成download.js，完成了预期想要的效果，但是遇见一个问题，dowload.js只能自写内容来下载，那么我们如何实现根据url来实现下载的内容那。 我们可以修改 url = !strFileName && !strMimeType && payload； 改为：url = payload；就可以实现效果了。 但是还有一个问题，就是我们直接从download.js中下载的js是()() //注：这种应该是自执行函数 所以在vue调用时会有bug，我们可以把downloadjs中复制download函数中的内容进行修改： 如下所示：（以后需要下载， 直接复制用以下内容放入一个新建js文件 即可使用） //download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage // v1 landed a FF+Chrome compat way of downloading