vue
文章平均质量分 81
努力学习前端的77
如果文章对你有帮助或有什么差错,请点赞或留言告知
你走的每一步路都算数,保持学习热情能获得最易得的幸福感
展开
-
vue 数据双向绑定原理
0 到 1 掌握:Vue 核心之数据双向绑定写一个Vue的双向数据绑定双向绑定原理:MVVM机制双向绑定原理: view视图变化更新数据model。 model数据变化更新视图view。Vue 不允许动态添加根级响应式属性。this.obj.name 无法将name属性设置成响应式。要通过 Vue.$set(target,key,value)数据响应式:数据的变化,会自动更新视图。这就是响应式。数据双向绑定:数据变化更新视图,视图变化更新数据。数据劫持监听。Object.defineP原创 2021-09-06 15:13:12 · 194 阅读 · 0 评论 -
vue中---computed的实现原理
computed是什么,主要干嘛。有啥特点:computed 是计算属性,可缓存。主要用来替换文本中的模板。插值表达式。用来包装data数据的复杂逻辑。方便管理。当依赖的data值发生改变时会自动重新计算。包含 get 和 set。写法:data() { return { a:1 }},computed:{ aa: function() {// 1 仅读取的计算属性 return this.a++; }, bb:{ // 2 get:function() {原创 2021-09-06 14:52:58 · 446 阅读 · 0 评论 -
Virtual DOM
虚拟 DOM: 由JavaScript对象来描述真实 DOM。VUE 内部的虚拟 DOM 是改造了一个开源库 Snabbdom。真实 DOM 的操作耗能太大了。虚拟DOM的最终目标是将 虚拟节点渲染到视图:虚拟DOM的好处:维护视图和状态的关系。跟踪状态的变化。状态改变后不需要立即更新真实DOM。而是创建虚拟DOM树 最终来映射到真实DOM。复杂视图情况下提升渲染性能跨平台:浏览器平台渲染dom服务端渲染 ssr原生应用(Weex / React Native )小程序(原创 2021-09-06 14:09:04 · 120 阅读 · 0 评论 -
看板.md
#npm install 报错的情况下可以先清理缓存:npm cache clean --force然后升级版本:npm install -g npm重新安装: npm install -g cnpm --registry=http://registry.npm.taobao.org一次不行可以反复几次,就可以进行npm install操作了#命令删除node_modulesnpm install rimraf -grimraf node_modulesnpm install/cnpm in原创 2021-05-20 14:55:20 · 133 阅读 · 0 评论 -
前端脱离后端模拟接口数据---easymock/mock.js
使用easy mock 创建项目,模拟接口数据:easymock博客参考easymock官网文档–请使用谷歌浏览器直接在easymock官网注册账号创建项目,创建接口。em.demo.all回车 直接生成接口数据。需要懂得mockjs语法规范使用mockmock有两大特性:数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截 Ajax 请求不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。安全又便捷。mock实例m原创 2020-09-05 17:04:06 · 370 阅读 · 0 评论 -
mes项目 组态开发项目reademe文档 待整理
vue2 项目========= vue cmd命令所包含知识点:清除缓存:npm cache clean --force当npm install无效,需要进行npm cache clean --force命令操作,如果这样操作不成功的话,去C盘清空一个文件夹:C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除再重新npm install#删除node_modulesnpm cache clean --force原创 2021-03-19 10:53:51 · 2612 阅读 · 1 评论 -
vue :src 不显示的解决方案
vue中 img的src使用变量接收。 :src=‘url’ 不显示图片的问题转载 2020-12-11 11:22:46 · 1240 阅读 · 0 评论 -
在vue中自定义全局样式指令
使用全部指令/私有指令 使用时加上V--------全局指令Vue.directive('color',{ bind:function(el) {//和样式相关的最好写在bind中;和js行为相关的最好写在inserted中【防止js行为不生效】。 el.style.color='red'; },})-------私有指令directives:{//自定义私有指令 'fontweight':{ bind:function(el,binding)原创 2020-12-04 17:28:23 · 503 阅读 · 0 评论 -
在vue中使用datav
datav使用教程:下载:npm install @jiaminghi/data-view / npm install --save @jiaminghi/data-view全局引用:import dataV from '@jiaminghi/data-view'Vue.use(dataV)按需引入:import { borderBox1 } from '@jiaminghi/data-view'Vue.use(borderBox1)...原创 2020-12-04 17:19:48 · 4971 阅读 · 0 评论 -
在vue中使用echarts
使用echartscnpm install echarts --save在main.js全局引用:import echarts from "echarts";Vue.prototype.$echarts = echarts;import echarts from 'echarts/lib/echarts'// 引入提示框组件、标题组件、工具箱组件。import 'echarts/lib/component/tooltip'import 'echarts/lib/component/tit原创 2020-12-04 17:17:13 · 108 阅读 · 0 评论 -
在vue项目中引入视频文件的用法
#vue项目中引入视频cnpm install video.js在main.js中引入:import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video;在组件中使用:<Video id=""class=""controlspreload="auto"poster="视频封面图片的路径"src="videourl"><video id='my原创 2020-12-04 17:16:00 · 5422 阅读 · 0 评论 -
vue 切换tab实现多个不同的组件显示在同一个挂载点且不跳转路由
目录切换tab实现多个不同的组件显示在同一个挂载点1,先来看看我的文件结构查看main.vue文件切换tab实现多个不同的组件显示在同一个挂载点1,先来看看我的文件结构将页面布局单独封装一个组件的好处,功能划分清晰,也很方便实现让用户自定义主图和布局的功能。查看main.vue文件<template> <div class="main"> {{this.currentCom}} <transition name="fa原创 2020-12-04 17:04:45 · 1204 阅读 · 0 评论 -
vue知识点
vue cmd命令所包含知识点:清除缓存:npm cache clean --force当npm install无效,需要进行npm cache clean --force命令操作,如果这样操作不成功的话,去C盘清空一个文件夹:C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除再重新npm install路由配置的两种方式location.hash=“url”可以通过hash来改变href,但页面不发生刷新hi原创 2020-12-04 14:52:31 · 162 阅读 · 0 评论 -
vue组态实现矩形在画布内移动和缩放
<!-- vue组态实现矩形在画布内移动: --><template> <div id="test" @mousemove="get" :style="{'left':fastartLeft+'px','top':fastartTop+'px'}"> <h1>测试vue组态--实现移动和拖拽</h1> <p>鼠标坐标:</p> <p>原创 2020-11-12 15:08:44 · 1363 阅读 · 0 评论 -
vue-全局导航守卫/路由守卫/组件内守卫
全局导航守卫设置切换路径时的路由拦截:beforeEach(to, from, next){}beforeRouteEnter(to,from,next){}路由守卫设置切换路径时的路由拦截:beforeEach(to, from, next){}1,给需要登录验证的路由设置meta: {requireAuth: true},2,写路由守卫函数beforeEach()router.beforeEach((to, from, next) => {//to from表示将要进入和将要离开的路由原创 2020-11-05 14:09:25 · 429 阅读 · 0 评论 -
VueRouter 动态路由/路由懒加载/路由嵌套/路由传参等
VueRouter动态路由路由懒加载路由嵌套路由传参this.$router //指的是newVue的实例对象 this.$router.push/this.$router.replacethis.$route //指的是当前活跃状态下的路由对象 this.$route.params动态路由浏览器显示地址栏的信息可能是动态改变的。路由路径非固定的。需要根据用户的操作响应式更改的。比如在index.js文件中给路径传参,通过this.$route.params引用参数:{ path:'/原创 2020-11-05 10:49:06 · 1297 阅读 · 0 评论 -
权限系统reademe.md文档---待整理
1,网页布局:使用ElementUI插件:安装elementui npm/cnpm i element-ui -S/–save;在main.js程序入口文件中完整引入elementui:import ElementUI from ‘element-ui’;import ‘element-ui/lib/theme-chalk/index.css’;使用它: Vue.use(ElementUI)将登录页面写过来:点击登录,请求数据,处理数据,获取到token,有token,进入首页使用axios原创 2020-11-05 09:31:17 · 1594 阅读 · 0 评论 -
router-link
router-link基本用法:1,router-link默认会被解析为a标签,可以使用tag属性,改变它的解析结果。2,在html5的history模式下,默认使用的是history.pushState()函数,所以浏览器可以默认返回上一面。给router-link添加replace属性后,浏览器将使用history.replaceState()函数,禁止用户通过浏览器返回上一页。...原创 2020-11-04 17:05:56 · 681 阅读 · 0 评论 -
runtion compilor / runtime only
runtion compilor 和runtime only的用法区别:原创 2020-11-04 11:35:24 · 136 阅读 · 0 评论 -
vue脚手架----vue cli
脚手架工具的作用:帮助完成项目的代码目录结构,项目结构和部署,热加载,代码单元测试等功能。vue cli俗称vue项目脚手架,可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node,然后才能使用npm—npm为node自带的)vue cli使用前提:安装node:直接在官网下载安装:http://nodejs.cn/download/检测安装的node版本:node环境要求版本 >= 8.9原创 2020-11-04 09:49:06 · 154 阅读 · 0 评论 -
vue插槽slot--基本插槽/具名插槽/作用域插槽
插槽的作用:为了让组件具有可扩展性。基本插槽的使用:在自定义的组件中使用。可以在插槽内填入默认内容。在引用组件时,可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。具名插槽的使用:一个组件内可能存在多个插槽,当引用组件时,可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。<slot name="left"></slot><slot name="center"></slot&g原创 2020-11-03 09:28:02 · 184 阅读 · 0 评论 -
JS实现实现系统时间显示--动态显示秒和分
注:代码的思路是每隔一秒让获得的当前秒自增,并每隔一秒将新的秒数进行赋值。分钟是每隔60秒获取一次分钟,并给数据重新赋值。每刷新一次页面,在页面挂载完成时获得一次系统时间。精确到年月日周几和小时数。如果用户在当前页面24小时内都没有刷新过页面,系统时间的显示会有误差。因为它没有重新获取。直接上代码:<template> <span id="time"> <h3> {{ nowtime }} : {{ minutes }}原创 2020-09-01 15:27:57 · 1460 阅读 · 0 评论 -
vue 如何实现多个路由共用同一个页面组件
多个页面共用同一个组件当多个路由公用同一个组件时,切换路由不会重新触发该组件页面的钩子函数。 为了重新触发钩子函数。获取最新数据。有两种方式:方法1:假如父组件下的两个子组件A ,B需要公用同一个组件,在父组件中,router-view中添加key ,并保证key值具有类似ID值的唯一性。 这样就能实现,进行相应的子组件路由,会根据相应的key值触发相应子组件的钩子函数。方法2:通过监听路由的变化,来处理数据。方法一在router-view里添加key控制:这样的弊端是如果router-原创 2020-08-26 16:29:33 · 14146 阅读 · 3 评论 -
【vue】axios
vue-resource是Vue.js中的一款插件,它通过XMLHttpRequest或JSONP发起请求并进行处理。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到。从vue2.0之后,官方就不再维护vue-resource了,出于安全性的考量官方推荐大家使用axiosaxios首先axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端特征:从浏览器中发送 XMLHttpRequest在 node.js 发出 http 请求支持 P原创 2020-08-26 16:06:51 · 417 阅读 · 0 评论 -
自定义过滤器/vue指令/键盘修饰符
自定义过滤器自定义vue全局指令自定义键盘修饰符//自定义键盘修饰符Vue.directive('on').keyCodes.f2 = 113;Vue.config.keyCodes.f2 = 113;//使用自定义的键盘修饰符<input type="text" v-model="name" @keyup.f2="add">...原创 2020-08-26 15:17:52 · 108 阅读 · 0 评论 -
vue create创建项目
新版本创建参考旧版本创建参考原创 2020-08-12 15:25:25 · 2834 阅读 · 0 评论 -
Module Error (from ./node_modules/eslint-loader/index.js):
Module Error (from ./node_modules/eslint-loader/index.js):解决办法参考vue启动项目报如下错误:Failed to compile../src/components/Vcontent.vueModule Error (from ./node_modules/eslint-loader/index.js):E:\myvue\src\components\Vcontent.vue 4:15 error Parsing error:原创 2020-08-11 15:01:05 · 8080 阅读 · 1 评论 -
vue 生命周期-详细理解
vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板b原创 2020-08-11 13:42:49 · 423 阅读 · 0 评论 -
vue中@click.native
@click.native 给子组件绑定事件,当父组件引入子组件后,如果要触发子组件的事件,需要添加修饰符.native。 相当于把子组件中的方法传给父组件让父组件中可以调用当用了封装组件的话,使用按键修饰符需要添加.native才会触发...原创 2020-08-10 15:02:17 · 584 阅读 · 0 评论 -
vue中使用this.$nextTick()函数
vue中使用nextTick()函数Vue中nextTick()的使用Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,API 文档中官方示例如下:new Vue({ // ... methods: { // ...原创 2020-08-10 14:54:02 · 1055 阅读 · 0 评论 -
vue 事件修饰符
<div id="app"> <div class="inner" @click="divClick"> <input type="button" value="点我" @click.stop="btnClick"> </div></div> <script> // .prevent 阻止默认事件 比如a标签的跳转 // .s原创 2020-07-13 18:18:34 · 67 阅读 · 0 评论 -
vsCode npm install项目报错:npm ERR! enoent ENOENT: no such file or directory, open‘E:xxxx\package.json‘
参考npm install项目时报错如下:百度很多原因都说是package.json文件的缺失。但项目里明明有该文件。最后发现,楼主在GITHUAKUCHAVUE路径下npm intall,没有切换到项目根目录,所以导致找不到package.json文件。解决:cd切换到项目根目录,重新npm install。该问题解决。...原创 2020-07-13 16:10:52 · 5326 阅读 · 0 评论 -
Lazy Loading Routes【vue路由懒加载】
那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。博客参考路由懒加载API直通车当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。知识扩展:vue异步组件webpack的代码分割功能...原创 2020-07-03 11:20:09 · 342 阅读 · 0 评论 -
【vuex】下载安装,理解和使用
npm i vuex -S 后安装vuex。 如果使用全局script标签引用Vuex时就不需要NPM下载和以下安装vuex全局引用 ://<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>window.Promis...原创 2020-04-16 10:34:45 · 862 阅读 · 0 评论 -
vue撸权限系统学习笔记
花裤衩vue撸权限系统教程篇一router.currentRoute.pah 和 this.$route.path都是表示当前路由吗axios拦截器 请求拦截,响应拦截跨域问题 vue.config.js配置nginx反代理mock.js 前端自主搭建文档环境 模拟接口数据 自己测试module:1 Uncaught (in promise) cancel vue中取消删除...原创 2020-04-26 16:13:26 · 466 阅读 · 0 评论 -
vue 组件复用的两种方法以及el-tab-pane切换标签时如何重新触发钩子函数
当多个页面具有相同的页面模板时,想要共同同一个组件,有两种方法实现。方法一1.app.vue中 必须加上key属性,让每次进入路由时都重新触发钩子函数<router-view :key="key" />computed: { key() { // 只要保证 key 唯一性就可以了,保证不同页面的 key 不相同 // console.lo...原创 2020-04-28 14:59:42 · 7557 阅读 · 0 评论 -
路由监听【vue中当两个路由公用组件时,切换路由不会重新触发公用组件的钩子函数,可以通过局部路由监听来执行具体操作【麻烦】还可以通过router-view :key
路由监听[用来监听路由切换时,需要执行的操作]:方法一:全局监听 所有路由发生切换时,都会触发该监听方法collect()//1.watch:{ $route:{ handler:'collect' }},//2,methods: { collect() { //有效代码段 },}方法二:局部监听,监听特定的某个路由//...原创 2020-04-29 08:59:02 · 508 阅读 · 0 评论 -
路由守卫之beforeRouteEnter(to,from,next){},beforeRouteEnter不能访问this如何处理?
进入当前路由之前的钩子函数 beforeRouteEnter(to,from,next){}注意!!!此时还没有this参考链接 beforeRouteEnter(to, form, next) { next() },beforeRouteEnter不能访问this如何处理?可以通过next回调,通过vm访问组件实例:beforeRouteEnter (to, from...原创 2020-04-29 09:06:51 · 3406 阅读 · 0 评论 -
【vue过滤器 filter / filters 】
参考链接–官网文档参考链接2过滤器的定义?vue filters过滤器是vue中用来处理文本格式化的工具。可以对数据进行处理,规范项目的一些数据的特定格式。过滤器的原理?Vue的过滤器的实现参考了linux的shell命令的管道的实现原理,即上一个命令的输出是下一个命令的输入,过滤器的作用?作用是处理一些常见的文本格式化,过滤器的使用场景 / 使用方法?使用方法:过滤器可以用在两个地方: 1. 双花括号插值 2. v-bind表达式。/* 在双花括号中 */{{ mess原创 2020-07-01 14:04:30 · 362 阅读 · 0 评论 -
【vue --- meta / router.addRoutes】根据用户角色显示 相应路由 / 相应权限 / 相应菜单栏 / 动态添加路由
在做项目时,需要考虑用户的角色不同,进入同一个系统看到的内容有所不同。比如页面内容不同,菜单栏不同,侧边栏不同等。比如用户管理模块基本上只有管理员可见。比如非登录用户无法查看相应信息,比如相应角色才有相应模块功能。所以在开发过程中需要考虑用户是否登录,需要考虑当前用户属于什么角色,什么模块是TA能看的,什么模块是不展示给TA看的。由此,就需要做权限控制。可以从源头上,通过路由配置,判断相应角色是否有相应权限,来决定相应路由是否显示。【实现以上需求可用到的知识点:router.addRoute原创 2020-07-02 14:43:03 · 2243 阅读 · 3 评论