Vue
关注
分享
扫一扫
走到天涯海角
从坑中爬出后，避免再次入坑！
展开
-
在element的表格上点击对应格变为input进行编辑,能改多列
效果图：思路大致和改一列差不多，只是根据label来判断点击的是哪一列。原创 2021-11-18 20:53:38 · 448 阅读 · 0 评论 -
在static中使用本地json数据时报Request failed with status code 404
发现是路径写错了原创 2021-11-16 21:58:14 · 795 阅读 · 0 评论 -
解决在同一个页面中使用vue-awesome-swiper两次的bug
遇到的问题是：下一个轮播插件切换导致上一个轮播插件分页切换的bug解决办法：不需要分页器的那个组件，pagination传空字符串就行原创 2021-11-14 14:48:30 · 1429 阅读 · 2 评论 -
安装Stylus:Module build failed: TypeError: this.getOptions is not a function
安装stylus npm install stylus stylus-loader --save-devnpm run dev后报错如何解决：降低stylus-loader的版本stylus-loader版本过高，更改为stylus-loader@3.0.1即可再次安装stylusnpm uninstall stylus stylus-loader npm install stylus stylus-loader@3.0.1 --save-dev //再次安装...原创 2021-10-26 00:14:02 · 453 阅读 · 0 评论 -
遇到peer webpack@“^5.0.0“ from stylus-loader@6.2.0问题记录
npm install stylus --savenpm install stylus-loader --save执行第二句的时候报错在package.json文件的devDependencies对象里面加上"stylus-loader": "^3.0.2",然后重新执行命令npm install stylus-loader --save-dev原创 2021-10-25 20:00:12 · 7908 阅读 · 4 评论 -
A complete log of this run can be found in
发现vue老是安装不上一堆的报错，我琢磨着，我安装vue前也只安装了一个node，之前安装都好好的，我这次不过是用了以前的版本，难道是这个原因......NPM版本太低，更新NPMnpm install npm -g然后再安装脚手架和测试，发现可以正常运行了...原创 2021-10-18 20:30:49 · 200 阅读 · 0 评论 -
Vue中遇到无法加载文件的问题，在系统上禁止运行脚本
遇到问题如下：如何解决这个问题呢？系统：win10左下角菜单区域，搜索PowerShell执行：set-ExecutionPolicy RemoteSigned这时候再运行vue create one-vue就不会报错了。原创 2021-10-06 22:28:28 · 311 阅读 · 1 评论 -
从基础到项目（vue2.0 app实战（5））温故知新
5.1 项目环境准备1.需要安装node2.通过码云管理代码2.1 新建一个git仓库3.安装git如何让git仓库和本地做关联呢？如何生成SSH公钥呢？1.右键点击git Bash here根据上面截图来添加成功后1.克隆仓库代码到本地如何在仓库里面安装Vue环境呢？关键：全局安装vue-cli：npm install -g @vue/cli5.2 项目代码结构介绍5.3 单文件...原创 2021-10-06 17:43:55 · 227 阅读 · 0 评论 -
从基础到项目（vue2.0 app实战（4））温故知新
Vue中的动画特效4.1 Vue中CSS动画原理（过渡动画）如何做到渐隐渐显的动画效果呢？关键：只要在想实现动画的容器外加上transition标签，并加上相应的样式。 <style> .v-enter{ opacity: 0; } .v-enter-active{ transition: opacity 1s; } </style>.原创 2021-10-05 11:13:14 · 234 阅读 · 1 评论 -
从基础到项目（vue2.0 app实战（3））温故知新
3.1 组件使用的细节点细节点1：关键：当我们把tr封装成小组件，会出现些小问题。<body> <div id="app"> <table> <tbody> <row></row> </tbody> </table> </div> <script&原创 2021-10-04 16:32:31 · 226 阅读 · 1 评论 -
从基础到项目（vue2.0 app实战（1））温故知新
1.NUXT服务器端渲染，WEEX编写原生APP2.内容：基础内容->基础语法->MVVM模式->组件化-> 生命周期->动画特效-> 实战项目->环境搭建->使用Git->数据模拟->本地开发 联调->真机测试->上线3.知识点：Axios：获取数据Vue Router：页面路由Vuex：组件间数据共享异步组件：代码上...原创 2021-10-01 22:53:54 · 492 阅读 · 1 评论 -
Vue-Cli3中如何设置跨域
1.首先要使用axiosnpm install axios --save2.在main.js中引入import axios from 'axios';Vue.prototype.$ajax = axios;3.简单地实现一下后端4.这时候我们去请求，就会报跨域的错5.如何解决跨域：新建vue.config.js文件module.exports = { //devServer.proxy适用于本地开发使用， //生成环境请用第三方代理软件，如ngin原创 2020-06-22 10:38:18 · 4158 阅读 · 0 评论 -
组件如何实现复用，简单演示
我们在写页面的时候，经常会遇到一些相似的页面模块，我们这时候就可以复用组件来提高开发效率。自定义组件：HelloWord首先我们写一个自定义的组件，我数据是写死的，但是通过axios接收后台的数据的做法也很简单，也要用到父子组件传值，我之前有提过。<template> <div class="hello"> <h1>{{ msg }}</h1> <p>{{info}}</p> <ul&g原创 2020-06-20 21:04:40 · 2379 阅读 · 0 评论 -
用Vue实现登录
1.在桌面上创建一个vue的项目：vue-cstudycdvue-cstudynpm run serve2.下载AntDesignnpm install ant-design-vue --save3.把多余的代码先删除掉4.在main.js中引入AntDesign以及默认样式import Antd from "ant-design-vue"import "ant-design-vue/dist/antd.css"Vue.use(Antd)5.一般的API没有什么好...原创 2020-05-29 20:24:31 · 951 阅读 · 0 评论 -
Sass复习总结
css的问题：没有变量，没有封装，没有组合，原生的模块化语法不好用css预处理器 sass less编译成css，变量，组合，模块 容易结合到已有的工具中好处：让我们经常使用的东西变成变量代码更好维护和组织好上手，已有的库供我们使用语法比较：因为scss语法比较接近css，所以更好上手index.scss.header{ color:red;}index.sass：没有大括号.header color:red1.嵌套语法<div class原创 2020-05-21 22:41:55 · 284 阅读 · 0 评论 -
下载使用IVIEW4.0组件库的过程以及遇到的一个问题
1.安装npm install view-design --save2.在main.js入口文件引用import ViewUI from 'view-design';import 'view-design/dist/styles/iview.css';Vue.use(ViewUI);3.使用表单遇到了错误，下图是报错位置原因是：vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。所以我们在根目录的.eslintrc.js的rules:{.原创 2020-05-21 15:10:01 · 582 阅读 · 0 评论 -
Vuex状态管理库的简单使用
官网：https://vuex.vuejs.org/zh/为什么使用Vuex呢？以下是官方解释：对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发原创 2020-05-17 11:53:31 · 216 阅读 · 0 评论 -
vue路由插件router的使用
之前的切换页面的做法存在的问题是：没有匹配相应的路由。官网：https://router.vuejs.org/1.下载npm install vue-router --save2.使用在main.js中使用router插件import vueRouter from "vue-router"Vue.use(vueRouter)const router=newvueRouter({routers:[ {path:"/"，}]})new Vue({...原创 2020-05-16 23:39:37 · 571 阅读 · 0 评论 -
Vue第三方库axios
以前使用的是vue-resource，现在推荐使用vue-axios1.axios的使用：https://github.com/axios/axios很详细2.下载axiosnpm install axios --save3.下载postman(测试后台接口)：https://www.postman.com/downloads/4.可以单独配置axios，也可以全局配置axios4.1.单独配置axios引入import axios from "axios"写法一：.原创 2020-05-13 17:33:55 · 399 阅读 · 0 评论 -
组件传值（父子组件传值、兄弟组件传值）
父子组件是两个封闭的作用域父组件为User.vue 子组件为status.vue，detail.vue父组件往子组件里面传值：1.在子组件中自定义可以接收的属性：<script>export default{ props:['name']//props:['name','age']可以传多个自定义属性}</script>2.在父组件中引用子组件<template><app-status :name="name..原创 2020-05-11 16:37:14 · 1358 阅读 · 1 评论 -
Vue组件的理解
template模板和dom同时写，template模板会覆盖当前这个dom节点，要有根节点包裹组件化的优点：1.代码可以复用，2.降低代码的耦合性。div的id为app是我们要挂载到Vue实例的一个dom节点；src文件会整个打包成一个js文件；模板-->编译-->ast-->数据-->render函数-->虚拟dom-->真实html直接写render函数会减少编译过程，提高效率，但是写起来比较麻烦1.全局组件：1.写一个server.原创 2020-05-11 11:32:21 · 289 阅读 · 0 评论 -
如何使用1.Vue-CLI3.0创建项目以及2.如何打包项目不出现空白页
1.Vue-CLI3.0创建项目1.开发需要用到：Babel将ES6语法转换成ES5语法；postcss是后处理器，less和sass是预处理器；esLint为代码规范；2.前端自动化构建工具：Webpack、Gulpwebpack通过npm把各种工具引入进来，并且还有webpackdev-server一键把开发服务器启动；3.Vue-CLI3.0安装流程：首先要有npm，npm是node的包管理工具1.地址栏输入nodejs.org访问node官网，下载的版本要大于原创 2020-05-09 21:22:05 · 303 阅读 · 0 评论 -
Vue的简单使用（5）v-if、v-for
1.v-if、v-show条件渲染，我们一般会使用v-if，因为v-if比较灵活v-if、v-else-if、v-else这三个搭配使用<template> <div id="app"> <p v-if="sex=1">男</p> <p v-else-if="sex=2">女</p> <p v-else="sex=3">其他</p> </div></tem原创 2020-05-09 14:19:14 · 619 阅读 · 0 评论 -
Vue的简单使用（4）：class、：style
在Vue中动态的改变样式，我们可以绑定class，也可以绑定style绑定的class里面可以写对象，也可以写数组，数组里面写对象<template> <div id="app"> <div class="shape" @click="isCircle=!isCircle" :class="{circle:isCircle}"></div> </div></template> <script>e原创 2020-05-09 11:25:55 · 322 阅读 · 0 评论 -
Vue的简单使用（3）v-model、methods、computed、watch
1.双向数据绑定2.计算属性与监听理解：1.在vue中有单向数据流（v-bind）和双向数据流（v-model）1.1v-bind和input配合也可以实现双向数据流，v-bind为单向的数据流，如输入框的改变不会使得下面p中的value改变；当我们属性改变的话，他并不会改变数据；我们通过v-on事件来改变数据；<template> <div id="app"> <input type="text" ：value="va原创 2020-05-08 23:17:49 · 914 阅读 · 0 评论 -
Vue的简单使用（2）
动态绑定使用v-bind：（缩写为：），绑定事件用v-on：（缩写为@ ）1. ：经常用于动态绑定数据2. @ 经常用来绑定事件，不仅可以用来绑定点击事件@click，还可以用来绑定其他的事件如@mousemove移动属性<template> <div id="app"> <p @mousemove="moveXY">输出当前鼠标的x和y的值{{x}}/{{y}}</p> </div></template>.原创 2020-05-08 20:58:51 · 226 阅读 · 0 评论 -
前端三大主流框架的对比和Vue的简单使用（1）
（一）前端框架的特点：1.组件化2.社区强大3.第三方库多4.浏览器插件debugging5.单页面友好为什么使用框架？为了保持UI和状态同步，原生JS保持同步要写很多代码原生实现的问题：用js代码创建UI可读性差三大框架对比：Angular:双向数据绑定：如多级菜单；依赖注入，使组件之间的耦合度降低，提高代码的可读性；typeScript是JS的超级；angular1.0主要面对的是PC端，angular2.0以后才兼容PC端和移动端；优原创 2020-05-08 20:08:38 · 1602 阅读 · 0 评论 -
使用vue和vant的在线CDN方式
<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <ti...原创 2019-12-18 09:04:27 · 5494 阅读 · 3 评论 -
看不懂iview组件库的render函数样式怎么办？
我看了iview组件库的树形控件的render函数样式，看蒙了，不知道从哪里下手。 [ h('Button', { props: Object.assign({}, this.button...原创 2019-11-22 11:33:02 · 234 阅读 · 0 评论 -
iview中树形控件的按钮如何隐藏？
需求：隐藏iview中树形控件的按钮，在点击的时候根据id来显示出来1.通过右键控制台，发现这些按钮外层还包着一层span,这些按钮是用render函数渲染出来的，我一时半会有点懵。2.尝试了一下发现在这个位置把显示改为隐藏，发现果然有效果。3.这时候要判断哪两个值相等的时候显示，否则隐藏。4.这时候就要去打印，console.log("一些变量");5.使用三目运算符来判断这...原创 2019-11-22 10:09:13 · 1304 阅读 · 0 评论 -
接口格式
写一个功能要获取数据的时候，只要调一下这个函数就可以了。 methods:{ refreshTableData() { //清空数据 ...... //调一下获取数据的函数 this.loadTreeData(); ...原创 2019-11-20 21:10:46 · 866 阅读 · 0 评论 -
刷新功能
1.把数据清空后再重新通过接口去请求数据。 <span @click="refreshTableData">刷新</span> methods: { refreshTableData() { this.selectDict = ''; this...原创 2019-11-20 20:20:50 · 378 阅读 · 0 评论 -
vue中触发点击事件切换不同的div
从左侧的点击事件中观察要拿什么值来切换不同的状态。1.一开始没有数据的时候，切换到没有数据的页面(相应的div)。2.通过点击事件获取到数据后，切换到有数据时页面(相应的div)。 <div v-if="selectConfig.id"> 有数据的页面 </div> <div v-if="!selectConfig.id">...原创 2019-11-20 20:03:08 · 3129 阅读 · 0 评论 -
怎么解决iview的样式覆盖问题？
在vue中使用iview组件库经常发现自己写的样式没有生效，被iview覆盖。1.我们要把样式写在scss中，并且去掉scoped。2.加上多层div,防止出现覆盖其他页面样式的问题。<style lang="scss">.ge-content{ .ge-left{ .ivu-card-body { padding: 11px; }...原创 2019-11-20 19:33:41 · 2734 阅读 · 0 评论 -
vue实现页面切换的两种方法
一种是通过vue-router切换页面，一种是通过v-if来切换页面。1.vue-router的方法：(1).安装Vue-Clinpm install -g @vue/cli(2).创建一个项目vue create hello-world(3).通过空格勾选上router、store、scss系统会自动生成router.js文件，store.js文件(4).新建...原创 2019-11-15 11:49:07 · 20915 阅读 · 0 评论