Vue
夜空下的微笑
这个作者很懒,什么都没留下…
展开
-
vue-router 动态路由传参 & 打开新窗口页面
一. 路由传参 使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。 使用query方法,就没有这种限制,直接在跳转里面用就可以。 对比1: query方法,可以与path和name共用,params只能对应name。 query & params,前者在浏览器地址栏中显示参数...原创 2019-06-04 15:30:56 · 6110 阅读 · 0 评论 -
在iview的表格render函数中给v-html赋值,table加载html标签问题解决方法
如果想要在表格渲染一个标签,尝试在render的props中放置v-html或者vHtml都不好用。错误写法:解决方案:勾选部分链接:https://www.jianshu.com/p/62b1305ca2d8...转载 2019-06-18 10:44:35 · 2797 阅读 · 0 评论 -
vue 导航菜单重新加载刷新页面
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求应用vue在当前页面内路由参数发生变化,怎么进行页面刷新。传统方式window.location.reload(); 整个页面进行刷新,会出现白屏,体验不好this.$router.go(0); 同上,体验不友好推荐方法使用provide / inject组合方式原理:允许一个祖先组件向其子孙后代注入一个依赖,不论组件层次有...原创 2019-08-29 14:16:37 · 9758 阅读 · 2 评论 -
Vue 组件之间互相通信
vm.$emit(event, [...args]) 触发当前实例上的事件,附加参数都会传给监听器回调。涉及到组件之间的通信的问题,组件之间的通信可以分为以下几种:父子组件传递,父向子传递采用 props,子向父采用事件 emit。 非父子组件的传递,全局 event bus, 创建一个新的 vue 的实例,采用事件的方式通信,再者采用 vuex 全局状态管理。父子组件相互通信方法详情...转载 2019-06-05 15:25:59 · 181 阅读 · 0 评论 -
vue脚手架run dev之后自动启动浏览器
现在需要手动Alt+点击:http://localhost:8080config文件夹下index.js文件,里面有个dev方法,修改autoOpenBrowser状态为true原创 2019-05-28 16:54:30 · 519 阅读 · 0 评论 -
Vue.js v-model 指令的修饰符
1 .lazyv-model 指令默认会在 input 事件中加载输入框中的数据(中文输入法中输入拼音的过程除外)。我们可以使用 .lazy 懒加载修饰符,让其只在 change 事件中再加载输入框中的数据。<input type="text" v-model.lazy="content" placeholder="请输入" value="初始值"><p>输入框:{转载 2019-01-16 14:09:07 · 1228 阅读 · 0 评论 -
vue之tab标签切换功能(一)
项目开发中,使用vue实现tab页签切换功能。具体实例如下:(1)首先定义子组件如下图:(select01.vue子组件)<template> <div slot='select01'>{{msg}}</div> </template> <script> export default { dat...转载 2018-03-19 13:37:04 · 34562 阅读 · 5 评论 -
vue之tab实现切换功能(二)
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷。实际上,一直让Vue引以为豪的是它的便捷性、执行力、灵活性。 目前在学习Vue.js。在学习的时候需要把手动操作DOM的思维去掉,因为Vue是数据驱动,不需要手动操作DOM。他通过一些特殊的hmtl语法,将DOM和数据绑定起来。一旦创建了绑定,DOM就会和数据保持同步,每当变更了...转载 2018-03-19 13:43:26 · 4016 阅读 · 0 评论 -
vue 之 tab切换功能实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">转载 2018-03-19 13:53:54 · 2638 阅读 · 0 评论 -
vue之tab标签切换
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">转载 2018-03-19 13:56:07 · 834 阅读 · 0 评论 -
vuex详细用法
搭建好Vue脚手架工具构建好项目,安装 npm install --save vuex引入:import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)Vuex的组成部分完整的应用Vuex开发的应用结构应该是这样的:...原创 2018-03-13 15:36:58 · 470 阅读 · 0 评论 -
idea关于vue高亮显示配置
Intellij IDEA准备如果你想在Intellij IDEA的Terminal中构建vue-cli项目,还需要做一点准备。如果使用cmd构建,则跳过此步骤。1)安装vue.jsFile -> Settings -> Plugins -> Browse respositoties...搜索vue.js,右侧提示Install(截图时已安装,未安装会提示In...转载 2018-03-13 15:40:50 · 17518 阅读 · 0 评论 -
vue+elementui 之 table+pagination
<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe width="300"> <el-table-col...原创 2018-03-30 14:11:20 · 1268 阅读 · 0 评论 -
【vue】在网页上增加水印
https://blog.csdn.net/zou15590/article/details/80906357基于vue的架构中,在页面上增加水印,代码如下。watermark.js'use strict' let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.1234124...转载 2018-07-30 10:31:48 · 2132 阅读 · 2 评论 -
vue-点击添加class 其他标签删除class
class && style 用法 <div id="app"> <grid :cols="2" style="margin: 0 -1px -1px;"> <grid-item class="reset-p" :class="{active: i == active}"原创 2018-11-15 13:02:24 · 2076 阅读 · 0 评论 -
vue + webpack + node + yarn + less + scss 项目环境搭建
一、安装node环境和安装yarn环境 1、下载地址为:https://nodejs.org/en/ 2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功 node -v npm -v (npm ,yarn包管理工具) 3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:n...原创 2017-11-23 09:58:56 · 3516 阅读 · 0 评论