
vue
文章平均质量分 75
邱先生~
这个作者很懒,什么都没留下…
展开
-
vue路由切换动画实现
第一种<template> <div id="app"> <transition :name="switchTransition"> <router-view/> </transition> <bar></bar> </div></template><script>// import Loading from '@/base/loadi原创 2021-04-14 13:46:07 · 5622 阅读 · 1 评论 -
element-ui中el-table根据浏览器的缩放自适应宽度
最近有个pc端的项目,要求浏览器缩放的时候可以自适应宽度,但在使用element-ui中的el-table出现了点小问题,table-header、table-body的宽度是js动态计算的固定宽度在网上找了一些办法、包裹一层父元素并添加position:relative,子元素添加position:absolute;width:100%,亲测是可以达到自适应的效果的.但是!如果在table下面还需要编写页面,由于table的绝对定位,样式会乱.其实也简单,动态计算table的高度并赋值给父元素撑起原创 2020-10-21 16:15:53 · 19631 阅读 · 18 评论 -
vue响应式原理的实现
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。----官方文档引言Vue的数据双向绑定,响应式原理,其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。Observer 通过O...原创 2020-04-20 23:01:19 · 864 阅读 · 0 评论 -
vue-cli 3.x配置多页面
之前已经介绍了 2.x配置多页面,今天介绍下3.x配置多页面的步骤,相对来说比2.x方便一些~适用于vue-cli 3.x创建相应的html页面和对应的.vue ,.js文件(复制index.html,App.vue,main.js然后对应修改成相应的页面就行)配置vue.config.js1.创建多页面所需要的文件3.x创建多页面跟2.x的步骤一样这里我建议保留初始化的项目文件位...原创 2019-08-08 17:35:20 · 3198 阅读 · 0 评论 -
vue-cli3.x 配置vue.config.js
vue-cli 3.x 的一些常用配置原创 2019-08-08 17:34:21 · 3064 阅读 · 1 评论 -
vue学习--- vue-cli 3.x
vue-cli更新到3.x之后,项目的创建也跟2.x有些区别,今天就介绍下3.x下如何配置一个项目。vue-cli 2.x配置查看地址1.安装node >=8.9更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉npm uninstall vue...原创 2019-08-08 10:55:52 · 484 阅读 · 0 评论 -
vue-cli 2.x 配置多页面
1.适用于Vue-cli 2.x适用于Vue-cli 2.x创建相应的html静态文件。创建匹配html的.vue文件和对应的.js文件修改config/index.js修改build/webpack.base.conf.js修改build/webpack.dev.conf.js修改build/webpack.prod.conf.js下面以创建login.html为所需要...原创 2019-08-07 20:09:19 · 2940 阅读 · 0 评论 -
vue学习(五)---vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。原创 2019-08-02 17:52:15 · 509 阅读 · 0 评论 -
vue组件库大全(忘了的时候可以进来找一下~)
基于Vue的组件库https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件https://github.com/jdf2e/nutui 京东的Vue移动端组件库NutUIhttps://github.com/airyland/vux" Vux 基于Vue和WeUI的组件库https://github.com/El...转载 2019-08-02 16:28:48 · 1758 阅读 · 0 评论 -
vue学习(四)--- 组件
component 标签使用component标签可以通过is属性来具名的显示对应的组件。//将显示对应的组件<component is='header'></component><component :is='变量'></component>插槽 slot在组件中设置插槽<slot />,可以在使用组件的时候设置插槽里面的...原创 2019-08-02 11:18:57 · 169 阅读 · 0 评论 -
vue学习(三)---vue-router路由
1.容器 <router-view></router-view>2.路由表 let router=new VueRouter({ routes: [ {path, component}, {path, component}, {path, component}, ... ] });3.添加到v...原创 2019-08-01 15:59:16 · 644 阅读 · 0 评论 -
vue学习--- vue-cli 2.x
vue-cli脚手架搭建项目的流程,在这里简单的梳理下,方便以后的使用很简单,但很实用~~安装npm i -g vue-cli正确安装后 命令行键入 vue 能看到一些信息,说明已经安装成功!!常用的两个命令 list initvue list几种搭建项目的模板 我们比较常用的是 webpackvue init webpack xxxx 初始化一个webpack模板的...原创 2019-07-29 17:30:00 · 222 阅读 · 0 评论 -
vue学习(二)---常用指令2
1.事件修饰符2.computed3.watch事件修饰符stop 禁止冒泡once 单次事件prevent 阻止默认事件native 原生事件(组件)keycode|name 筛选按键stop 禁止冒泡<body> <div id="div1"> <div class...原创 2019-05-22 16:45:01 · 168 阅读 · 0 评论 -
vue学习(一)---常用指令
指令(directive)——补充了html的属性v-bind:xxxx=‘yyy’ 简写 :xxxx=‘yyy’<strong :title="age">{{age}}</strong> {{name}} - {{age}} data:{ name:'xxx', age:18 }v-bind可以用于任何属性,有两个...原创 2019-05-22 14:17:47 · 446 阅读 · 0 评论