vue
关注
分享
扫一扫
扫地鼠Gordon
幽己一默胜笑人三声
展开
-
安装:【vue】npm install -g @vue/cli出现错误
在cmd界面粘贴下面这句话，因为下载缓慢，所以配置了 npm 淘宝镜像，不嫌慢可以直接进行下一步的全局安装。安装Vue脚手架，cli就是Command Line Interface 命令行接口 工具。安装完后退出 命令行，重新打开命令行输入:vue，显示如下，证明 vue 脚手架已安装好。1.通过 win+s打开开始栏的搜索框，输入cmd，不知道有没有下载，可以在cmd输入。切换单 D:/vscode 目录。2.先下载node.js。原创 2023-07-20 20:20:29 · 2950 阅读 · 0 评论 -
学习vue-element-admin问题之切换路由刷新页面问题
刚把前端路由生成好，但在切换路由(或tab标签)时，会刷新之前打开过的页面后面发现是组件里面的name属性值和生成路由的name属性值不一样导致的原创 2020-07-03 16:59:18 · 3693 阅读 · 1 评论 -
vscode提示Custom elements in iteration require 'v-bind:key' directives.eslint-plugin-vue
信息报错提示[eslint-plugin-vue][vue/require-v-for-key]Elements in iteration expect to have 'v-bind:key' directives.解决方法：文件夹->首选项->设置，输入vetur.validation.template，取消选中的Validate vue-html in <te...原创 2020-02-11 23:29:04 · 1093 阅读 · 0 评论 -
element-ui 在el-row el-col 上@click失效问题解决
在el-row、el-col上面添加点击事件@click无效，用原生@click.native代替@click即可//无效<el-row @click="getList(item)"></el-row> //有效<el-row @click.native="getList(item)"></el-row> ...原创 2020-02-11 13:28:28 · 1342 阅读 · 0 评论 -
cnpm - 解决win10" cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息 。。。 "
在win10中以管理员身份启动Windos PowerShell，然后在命令行中输入set-ExecutionPolicy RemoteSigned策略更改为A即可原创 2020-02-09 13:08:27 · 1410 阅读 · 0 评论 -
package.json中^,~的区别
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/bu...原创 2020-02-05 14:26:26 · 3252 阅读 · 0 评论 -
vue+elementUI时标签里面使用三元运算符
最开始用v-if和v-else，感觉代码冗余。用{{}}语法写三元运算符又总是报错（因基础不好）尝试几种写法后，以下为准确写法<el-tab-pane :closable="(item.name)!=='main'" :key="item.name" :label="item.name" :name="item.route"></el-tab-pane>...原创 2019-12-24 09:23:09 · 7895 阅读 · 1 评论 -
elementui el-form 默认不支持回车提交，怎么解决
概念：1.在表单的提交按钮上添加 Vue 原生属性native-type="submit"可以让按钮变为表单提交按钮；2.阻止表单默认提交事件（默认是阻止），在表单上（即<el-form>标签上）添加@submit.native.prevent即可3.因为el-form默认不支持表单回车提交，在表单上（即<el-form>标签上）添加@keyup.ent...原创 2019-12-06 11:08:02 · 1960 阅读 · 0 评论 -
JS 退出登录、token过期，清除localStorage、sessionStorage
localStorage PC浏览器（永久保存）sessionStorage PC浏览器（关闭窗口就删除数据）操作1、localStorage.setItem(key,value) 保存数据2、localStorage.getItem(key) 获取数据3、localStorage.removeItem(key) 删除数据4、localStorag...原创 2019-12-05 15:30:47 · 5628 阅读 · 0 评论 -
vue学习 21属性传值props
vue传值的两种形式：1.父组件向子组件传值2.子组件向父组件传值父组件向子组件传值（属性传值），使用props属性在App.vue（父组件）中返回数据<template> <div id="app"> <app-header></app-header> <users v-bind:users="use...原创 2019-04-29 09:23:37 · 383 阅读 · 0 评论 -
vue学习 22传值和传引用
属性传值可以传两种东西1.传具体的值2.传一个引用如果是传引用，基本上就两个，一个是我们的数组，一个是对象传引用的话，如果有不止一个地方应用到。改变其中一个，别的地方也会被改变。无论是否在一个组件当中传值的话，只会改变当前组件中应用到的地方Users.vue<template> <div class="users"> <ul&...原创 2019-04-29 10:30:31 · 418 阅读 · 0 评论 -
vue学习 23事件传值（子to父）
想法：在Header.vue里面有一个方法changeTitle，当触发changeTitle方法时，App.vue中的title值被改变实现流程：Header.vue的方法。在changeTitle方法中注册一个事件methods: { changeTitle: function(){ // this.title = 'changed'; this.$e...原创 2019-04-29 11:46:34 · 136 阅读 · 0 评论 -
vue学习 35路由精讲之复用router-view
分离路由配置文件routes.jsimport Home from './components/Home'import Menu from './components/Menu'import Admin from './components/Admin'import About from './components/about/About'import Login from '....原创 2019-05-05 11:24:48 · 335 阅读 · 0 评论 -
vue学习 36路由精讲之控制滚动行为
main.jsconst router = new VueRouter({ routes, mode: 'history', scrollBehavior(to, from, savedPosition){ // return {x: 0, y:100} // return {selector: '.btn'}, // if (savedPosition) { // ...原创 2019-05-05 17:16:37 · 161 阅读 · 0 评论 -
vue学习 24生命周期（钩子函数）
生命周期：一个组件从实例化，创建它开始到结束的一个过程作用：调试、寻找问题、找错误、解决需求钩子函数：与el属性同级 beforeCreate:function(){ alert("组件实例化之前执行的函数"); }, created:function(){ alert("组件实例化完毕，但页面还未显示。一般在此时调用接口数据,并把值赋值给属性"); }...原创 2019-04-30 09:50:20 · 146 阅读 · 0 评论 -
vue学习 16搭建脚手架CLI
CLI：命令行界面（英语：command-line interface，缩写：CLI），也有人称之为字符用户界面（CUI）vue cli的好处脚手架是通过webpack搭建的开发环境使用ES6语法打包和压缩JS为一个文件项目文件在环境中编译，而不是浏览器实现页面自动刷新全局安装vue-cli下面是安装2.9.6版本的npm install --globa...原创 2019-04-25 16:23:58 · 146 阅读 · 0 评论 -
vue学习 25路由和Http
路由路由跳转：性能比a标签好a标签：发送请求、跳转、页面刷新路由：不会请求，页面刷新，直接跳转安装路由（安装到node_modules组件中） npm install vue-router --save-dev融合到项目中vue add routermain.js// The Vue build version to load with the `impo...原创 2019-04-30 16:16:56 · 121 阅读 · 0 评论 -
npm 如何提升最新版本 安装 卸载
首先我们查看一下npm当前版本，打开cmd运行指令npm -v如果不是最新版本，运行一下代码即可。运行指令npm install -g npm这样npm就更新到最新版本了。如果想更新到指定版本，运行指令npm -g install npm@2.9.1（@后跟版本号），这样我们就可以更新npm版本了。还有一点需要注意的，因为国内的...原创 2019-05-06 22:05:03 · 846 阅读 · 0 评论 -
vue-cli3预设preset记录
转vue-cli3预设preset记录这两天公司搭建新项目的时候发现vue-cli3有一个神奇的的东西：preset（预设）。preset其实是你在create新vue项目的时候，生成的插件配置项预设，也就是你在项目中需要用到的插件安装成功了之后，会生成一个关于preset的文件，当你再次create新的vue项目的时候，就不需要再去选择同样的插件，直接用preset安装就好了。可以参考这两篇...转载 2019-05-31 10:52:08 · 1348 阅读 · 0 评论 -
解决： vue CLI 3 项目创建时，git bash 箭头选择无效问题
选择git bash 的安装目录，找到bash.bashrc文件 文件末未添加 ： alias vue='winpty vue.cmd' 重启git bash 即可转载 2019-05-31 11:58:08 · 1823 阅读 · 0 评论 -
phpstorm+vue+elementUI+axios开发项目
phpstorm调用terminal命令行安装vuenpm install -g @vue/cli创建项目vue create <项目名称> #若是以当前目录作为项目名称，写法为vue create .自定义配置label,router,css Pre-processors安装elementUinpm i element-ui -S安装axios...原创 2019-06-23 16:32:03 · 755 阅读 · 0 评论 -
layui数据表格动态cols（字段）动态变化
如搜索查询时，常会遇到按日期时间段查询，并显示查询的每个日期的数据，后台拼装数据此处不讨论。把表格渲染封装在函数里面，cols_arr是传入的字段数组function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'p...原创 2019-07-02 15:11:30 · 36766 阅读 · 4 评论 -
vue学习 9 vue计算属性Computed
vue对象中的methods对象所有的方法，都会在页面加载时执行一次，这是正常的，但有个问题：methods中每有一个方法被调用，其他方法都会执行一次，这样很耗费性能。而computed计算属性（也是对象，和methods兑现一样），就避免了该问题，调用其中一个方法时，其他方法不会被调用。通常情况下，我们还是使用methods属性写方法，只有在搜索查询或比较耗时的情况下才会用到computed...原创 2019-04-07 10:39:05 · 220 阅读 · 0 评论 -
vue学习 34导航守卫，路由独享-组件守卫
后置钩子（进入组件之后），写在main.js中// 后置钩子router.afterEach((to, from) => { alert("after each");})路由独享的守卫，和全局守卫操作一样，但作用域范围不一样。全局守卫写在main.js中，路由独享的组件守卫写在各自的组件中Admin.vue<template> <h1>Ad...原创 2019-05-04 17:31:36 · 230 阅读 · 0 评论 -
vue学习 33路由精讲之导航守卫(全局守卫)
使用场景：系统未登录，进入除登录外的任何功能，提示未登录并跳转到登录界面。router.beforeEach()进入组件之前const router = new VueRouter({ routes, mode: 'history'})// 全局守卫(to:要进入到那个路由里面去；from：你从哪个路由离开；next:对应的一个函数)router.beforeEach((to...原创 2019-05-04 13:27:13 · 259 阅读 · 0 评论 -
vue学习 15初识组件的应用
new Vue({ el: "#vue-app-one"});只需要绑定元素即可，这样每个对象都非常干净html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> ...原创 2019-04-19 17:14:15 · 204 阅读 · 0 评论 -
vue学习 11指令v-if
v-if绑定的元素不占用html文档v-else-if搭配v-if做条件继续判断v-show会占用html文档，是对样式style="display:none"的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>...原创 2019-04-09 11:08:27 · 262 阅读 · 0 评论 -
vue学习 14实例化多个vue对象
在第二个组件当中，去改变第一个组件当中的某个属性的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="text...原创 2019-04-12 10:19:55 · 385 阅读 · 0 评论 -
vue学习 10vue-动态绑定CSS样式
标签绑定class属性：v-bind:class="{changeColor: true}"注意里面的写法是对象的形式html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title&g...原创 2019-04-08 17:38:55 · 395 阅读 · 0 评论 -
vue学习 1初识vue及引入CDN
Vue官网渐进式：没有太多限制的框架，能与很多其他框架配。AngularJS有很多限制、规则。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel=...原创 2019-04-10 08:38:55 · 272 阅读 · 0 评论 -
vue学习 8vue-双向数据绑定
双向数据绑定一定是跟input、select或者是textarea有关系的（因为他们可以选择、输入）在vue中使用v-model更适合ref：ref在vue2.0中是可以用来给input标签标记的，标记完之后，我们就可以在js里面通过$refs去调用input标签中的值了。<input type="text" v-on:keyup="logName" ref="name">...原创 2019-04-05 13:53:03 · 133 阅读 · 0 评论 -
vue学习 7键盘事件及键值修饰符
键盘事件：按键按下，按键抬起，点击等等。键值修饰符：.enter（回车）；.alt（alt键）；可链式操作，如.alt.enter需同时按下alt键和回车按键抬起时触发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>...原创 2019-04-04 17:56:40 · 244 阅读 · 0 评论 -
vue学习 6Vue事件修饰符（once、prevent、stop）
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面，阻止跳转到另一个页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 点击事件将只会触发一次 --><a...原创 2019-04-04 17:10:16 · 1453 阅读 · 0 评论 -
vue学习 5vue事件，点击、双击、鼠标事件
vue中绑定事件：v-on:click="add(1)"，使用v-on:绑定一个事件（也可以用@符号，如@click="add(1)"）,(如点击事件，触发add()方法)html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <titl...原创 2019-04-04 15:23:08 · 4031 阅读 · 0 评论 -
vue学习 4vue-属性绑定
给属性绑定一个值：v-bind:标签的属性名="vue对象的data对象里面的属性值（如果不是data对象里面的属性值，会报错）"，双向绑定（v-model）绑定一个html标签：v-html="websiteTag"。把标签的内容显示在DOM文档中html<!DOCTYPE html><html lang="en"><head> ...原创 2019-04-04 11:59:03 · 178 阅读 · 0 评论 -
vue学习 12指令v-for
v-for="(item, index) in arr",其中item就是arr中的每个值,index是每个元素的索引（0开始）。若item是对象，则item.对应的属性名；如果v-for绑定的DOM对象是template标签（<template v-for="(item, index) in arr">），则template标签不会被渲染在html文档中...原创 2019-04-09 13:21:48 · 624 阅读 · 0 评论 -
vue学习 32路由精讲之二级路由和三级路由
分级时，默认打开指定下级的路由，使用redirect属性，其值为子级路由的路径path.子级使用属性children: 值为数组，数组中每个元素都是一个路由对象二级路由在main.js中配置路由// 二级路由import Contact from './components/about/Contact'import Delivery from './components/ab...原创 2019-05-04 10:38:14 · 1631 阅读 · 0 评论 -
vue学习 30路由精讲之路由name属性及跳转方法
知识点： 路由起一个名字，路由跳转方法const routes = [{ path: '/', name: 'homeLink',//路由的名字 component: Home }, { path: '/menu', name: 'menuLink', component: Menu }, { path: '/admin', name: 'adminL...原创 2019-05-03 16:25:27 · 2638 阅读 · 0 评论 -
vue学习 28路由小细节redirect和tag
<router-link></router-link>默认是a标签，可使用tag属性<router-link tag="div"></router-link>指定标签。<router-link to="/"></router-link>， 可使用<router-link :to="属性值（可变属性）"><...原创 2019-05-03 13:53:56 · 158 阅读 · 0 评论 -
vue学习 27制作导航和配置路由跳转
所有组件运用相同的导航vue可搭配很多前端插件，但基本上都是只采用它们的样式，如：bootstrap4，element UI。个人推荐vue + element ui样式引入放在index.html文件中。（如：下面引入bootstrap4样式）<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4...原创 2019-05-03 11:19:38 · 232 阅读 · 0 评论