vue
vue 框架的核心内容
柚子·小哥哥
这个作者很懒,什么都没留下…
展开
-
修改element 里面的复选框的默认样式
效果演示:具体的实现思路:.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: #277f7b; color: #fff;}.el-pagination.is-background .el-pager li.active { color: #fff; cursor: default;}.el-pagination.is-background .el-pager li原创 2021-01-06 18:33:37 · 1104 阅读 · 0 评论 -
element ui组件库使用面包屑组件
效果展示:实现的思路需要在路由的meta中设置breadNumber字段,‘一级页面’不设置breadNumber(因为大部分页面是一级页面,所以就不设置了~),‘二级页面’设置breadNumber=2,‘三级页面’设置breadNumber=3,以此类推…meta的定义:meta简单来说就是路由元信息 也就是每个路由身上携带的信息。meta的作用:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎在面包屑的页面监听路由,路由变化时则触发面包原创 2020-12-02 22:54:26 · 2599 阅读 · 1 评论 -
vue播放视频插件
vue 播放视频的插件是名称是:vue-video-player安装指令是:yarn add install vue-video-player --save在main.js 里面引入插件import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)在组件中使用:原创 2020-11-21 18:28:14 · 1665 阅读 · 2 评论 -
vue 右键探出菜单
插件名称yarn add install vue-contextmenu --save引入import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu)在组件中使用<template> <div> <div id="app" @contextmenu="showMenu" style="width: 100% ;height: 500px原创 2020-11-17 11:57:08 · 241 阅读 · 0 评论 -
vue3.0按需引入element-ui组件库
1.引入vue add elementHow do you want to import Element? -->选择 Import on demand (关键)Choose the locale you want to load–>选择 zh-CN2.回车后,系统会自动配置引入babel.config.jsmain.jssrc\plugins\element.jsApp.vue 自动将el-button作为范例3.cd src\plugins\element.js修改,原创 2020-11-11 18:25:40 · 2482 阅读 · 2 评论 -
v-if 和v-for的优先级
当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用推荐<ul><li v-for="user in activeUsers":key="user.id" >{{ user.name }}</li></ul>## 或者:<ul v-if="shouldShowUsers"><li.原创 2020-10-12 23:44:50 · 1366 阅读 · 0 评论 -
vue中的data为什么是一个函数?
因为组件是用来复用的,且 JS 里对象是引用关系,如果组件中 data 是一个对象,那么这样作用域没有隔离,子组件中的 data 属性值会相互影响,如果组件中 data 选项是一个函数,那么每个实例可以维护一份被返回对象的独立的拷贝,组件实例之间的 data 属性值不会互相影响;而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。例子一:function Component() {}Component.prototype.data = { name: "jack",.原创 2020-10-12 08:58:50 · 526 阅读 · 0 评论 -
vue项目打包上线
电商后台管理系统一.项目优化策略生成打包报告第三方库启用 CDNElement-UI 组件按需加载路由懒加载首页内容定制1、生成打包报告打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:① 通过命令行参数的形式生成报告// 通过 vue-cli 的命令选项可以生成打包报告// --report 选项可以生成 report.html 以帮助分析包内容vue-cli-service build --report② 通过可视化的UI面板直接查看报告(推原创 2020-09-24 23:04:45 · 326 阅读 · 0 评论 -
vue 中的provide和inject【跨组件传值】
前言:vue 中的父子组件传值:vue 中的父子传值使用过:prop和$emit的组合。 来实现父子传值;如果跨组件传值,还要使用prop的话,是不麻烦,在这里除了vuex,接下来,给大家说一下,除了vuex ,也可以实现跨组件传值。provide一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。inject一个字符串数组原创 2020-09-22 19:34:16 · 1720 阅读 · 0 评论 -
vue 过滤器
vue过滤器的使用场景以及用法定义:过滤器是对 即将显示的数据做进一步的筛选处理,然后显示,过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据## 过滤器的使用场景时间戳过滤:export default { name: 'FilterDemo', /* 局部过滤器 */ filters: { /* 格式化时间戳 */ formatDate (val) { const date = new Date(val);原创 2020-09-21 21:37:38 · 71 阅读 · 0 评论 -
自定义指令,以及使用场景
vue 的自定义指令:概述:vue 除了提供默认的内置指令,还可以允许开发人员根据实际情况自定义指令,他的作用价值在于开发人员在某些场合下需要对普通的DOM元素进行操作;自定义指令的参数以及钩子函数1、 bind: 只调用一次,指令第一次绑定到元素是调用;2、inserted: 被绑定元素插入父节点时调用;3、update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新原创 2020-09-21 21:06:27 · 937 阅读 · 0 评论 -
vue 生命周期的11中方法详解
vue 生命周期的十一中方法详解vue 生命周期的定义vue实例 从创建到销毁,也就是说从创建 -> 初始化 数据-> 编译模版 -> 挂载Dom -> 渲染 更新 -> 渲染卸载vue 生命周期的钩子函数有那些1、 beforeCreated()创建阶段的第一个生命周期函数,当执行到beforeCreated 钩子函数的时候,当前的vue实例到data数据和methods 方法,都没有初始化完成,因此这个函数对外开放发实际意义不大2、 Creat原创 2020-09-15 23:28:21 · 562 阅读 · 0 评论 -
Vuex 的详解:(四个辅助函数)
什么是vuex:vuex 是应用程序开发的状态管理状态,他采用了集中式储存管理的应用的所有的组件状态;Vuex的使用场景:多个视图使用一个状态:传参的方法对于多层嵌套的组件将会很麻烦,当你使用的vuex这个状态会在你项目的任何地方都可以使用这个状态;不同试图需要变同一状态:采用父子组件直接或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护代码;Vuex简化流程:View components -> actions(dispatch方式) -> muta原创 2020-09-03 22:56:16 · 2623 阅读 · 0 评论 -
判断网页是PC端或者是移动端
这个 if 判断要放在项目的全局组件,app.js 组件内 mounted() { this.isMobile(); }, methods: { // 添加判断方法 isMobile() { this.flag = navigator.userAgent.match( /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|F.原创 2020-08-31 10:18:45 · 320 阅读 · 0 评论 -
代码必要的注我释
vue 文件方法声明的顺序:-components - props - data - computed - created - mounted - activited - update - beforeRouteUpdate - methods - watch;vue.js组件注释:/*! * Vue.js v2.6.10 * (c) 2014-2019 Evan You * Released under the MIT License. */JQ原创 2020-08-25 11:42:47 · 218 阅读 · 0 评论 -
用vue自定义指令实现图片懒加载:
功能实现的核心思维:我是用的IntersectionObserver API去实现的;IntersectionObserver 对象的observe() 方法向IntersectionObserver对象监听的目标集合添加一个元素。一个监听者有一组阈值和一个根, 但是可以监视多个目标元素,以查看这些目标元素可见区域的变化;链接地址: IntersectionObserver API 封装的图片懒加载的核心代码;// 这个是引入的一张logon图片import img from "@/as原创 2020-08-09 20:15:14 · 1080 阅读 · 0 评论 -
element ui 组件的库的Backtop用法,以及没有效果的问题
Backtop组件的基本用法:js代码// 这个div标签叫作用是,滚动的到顶部的距离是以他基准,最好放到顶部<div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop>css代码:.container { width: 100%; /原创 2020-08-05 22:55:16 · 1196 阅读 · 0 评论 -
vue实现专场动画(css3)
html 核心代码:<template> <div id="app"> <transition :name="transitionName"> <keep-alive> <router-view class="child-view "></router-view> </keep-alive> </transition> </div>.原创 2020-07-27 20:03:35 · 398 阅读 · 0 评论 -
element ui 组件分页器用法【修改样式】
下载element ui 组件库的安装指令是:1、yarn add element-ui -S全局引入 ui 组件库:import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);一下是element ui 组件里面的一个表格 <el-table :data="showlist.slice((currpage - 1.原创 2020-07-25 09:52:59 · 2882 阅读 · 2 评论 -
v-for 绑定key值,不建议使用index (原因详解)
v-for 中的key值:使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;例子:const list = [ { id: 1, name: 'test1', }, { id: 2, name: '原创 2020-07-10 20:12:46 · 7039 阅读 · 5 评论 -
在vue组件中使用echarts
从yarn中下载eacharts模块yarn add install eachartshtml <h5>统计销量</h5> <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>在vue组件中使用:eacharts<script>export default { name: "hello", data() { .原创 2020-07-07 19:50:57 · 1618 阅读 · 0 评论 -
从码云上克隆代码,修改完之后,在提交上去(图解)
第一步: 向克隆仓库里面的代码:点击复制按钮。在你需要把项目放在的那个目录下打开Git(这里直接在桌面打开Git,这里使用Git Bash Here),输入Git命令:git clone +你刚才复制的地址,敲回车就可以了。(推荐使用Git命令的这种方法)这个是克隆代码修改代码:先输入命令git pull,他的作用主要在于合并码云上的项目。(因为有时候是团队开发,有可能在你修改完代码之前,别人先修改了一些东西,这个时候你不可能重新去clone一份,效率太慢了)。如果没有人修改则会提原创 2020-06-26 01:18:23 · 1348 阅读 · 0 评论 -
vue监听滚动条,返回顶部
监听滚共条触发的事件: listenerFunction(e) { document.addEventListener("scroll", this.handleScroll, true); }, beforeDestroy() { document.removeEventListener("scroll", this.listenerFunction); }, handleScroll () { console.lo原创 2020-06-22 18:30:16 · 587 阅读 · 0 评论 -
前端:时间( ISO)标准时间转换为时间戳
前端:时间( ISO)标准时间转换为 Date 对象。 gettime(ms){ //2020-06-01T04:24:43.230Z // 把时间的中的T和Z 替换成空字符串 let date = ms.replace('T',' '); let data = date.replace('Z',''); // 声明一个变量赋值给:日期时间字符原创 2020-06-01 12:36:04 · 2163 阅读 · 0 评论 -
vue,组件传值
组件的传值:1. 父传子:1.在父组件中给子组件中设置一个属性,在这个属性上挂载要传递的值。2.在子组件中用props来接受数据3.props可以传递的类型有:String(字符串)data(对象)Bollean(布尔值)Array(数组)Number(数字)父组件:(组件名称:Father)<template> <div> // 调用子组件; <Children v-for='(it原创 2020-06-03 18:27:45 · 134 阅读 · 0 评论 -
vue:实现购物车小球动画
vue (动画)vue 动画的概念:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kVQPv6Zk-1589720203538)(C:\Users\柚子小哥哥\AppData\Roaming\Typora\typora-user-images\1589719042403.png)]vue 把一个完整的动画,拆分了两个部分,一个是入场动画磨合出厂动画;入场动画中,包含;两个时间点,分别是进入之前(v-enter) ,进入之后(v-enter-to);v-enter原创 2020-05-17 21:01:27 · 760 阅读 · 0 评论 -
vue 3,0 修改端口号
vue.3.0 修改端口号在package.json 文件下加命令行:原创 2020-05-11 18:45:15 · 1019 阅读 · 0 评论 -
axios 的基本使用:
1、基本用法安装cnpm i axios --save在 main.js 中引入 axiosimport axios from 'axios'Vue.prototype.$axios = axios在组件中使用 axios<script> export default { mounted(){ this.$axios.get('/goods.json')....原创 2020-05-07 21:23:22 · 1360 阅读 · 0 评论 -
Vue 脚手架搭建环境:
Vue 脚手架搭建环境:搭建 2. 0 版本的配置1.全局安装vue脚手架yarn add install -g vue-cli2. 检测vue版本号vue -V3. 使用vue-cli 创建项目vue init webpack 【项目名称】安装配置参考:安装vue 3.0 的脚手架搭建1 如果安装的vue以前的版本,请卸载您以前安装的版本,...原创 2020-04-24 23:37:56 · 199 阅读 · 0 评论 -
打造属于自己的音乐播放
打造属于自己的音乐播放器html 代码<!DOCTYPE html><html lang="zn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...原创 2020-04-22 13:44:57 · 345 阅读 · 0 评论 -
vue TodoList 功能
<section id="todoApp"> <header> <h1>TodoList</h1> <!-- 绑定键盘回车事件,双向绑定事件 --> <input @keyup.enter="add" v-model="inp...原创 2020-04-20 17:55:30 · 164 阅读 · 0 评论 -
vue 框架的入门教程
vue框架的入门教程el 挂载点:el 是用来设置vue实例挂载,(管理)的元素vue会管理el选项命中的元素以及内部的后代元素可以使用其他的选择器,但是不建议使用ID选择器可以使用其他的双标签,不能挂载到HTML和body上data :数据对象vue 中 用到的数据定义在data中data中可以写复杂类型的数据渲染复杂数据时,遵守js的语法即可 <di...原创 2020-04-18 20:18:48 · 567 阅读 · 0 评论