Vue
文章平均质量分 68
Judy1623
前端是个非常具有挑战的工作,只要自己心有所爱,就会成为那个最好的自己!
展开
-
Element-UI相关问题
2)el-dialog的显示层和遮罩层都设置了position:fixed,当然显示层的z-index肯定要比遮罩层的大,才能正常的显示弹出框。问题就出在此处,若el-dialog的父级也设置了position:fixed,并且其z-index比弹出框的遮罩层的小(遮罩层处于更高一层),那么弹出框的内容就会被遮罩层所遮挡住了。3)el-dialog的父级元素确实设置了position:fixed,并且其z-index比弹出框的遮罩层的小,所以就会出现遮罩层把内容挡住的问题。原创 2024-05-15 16:03:11 · 411 阅读 · 0 评论 -
Vue的基础理解(八)
为什么会出现vue修改数据后页面没有刷新的问题?受ES5的限制,Vue不能检测对象的属性的添加和删除Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。第一次页面加载会触发哪几个生命周期?4个生命周期 : beforeCreate - created - eforeMount - mou...原创 2020-03-03 10:53:21 · 200 阅读 · 0 评论 -
Vue的基础理解(七)
Vue常用的修饰符有哪些?Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。.prevent : 拦截默认事件.passive: 不拦截默认事件.stop : 阻止冒泡事件.self : 事件不是从内部元素触发的,是前元素自身时触发处理函数.self.prevent 只会阻止对元素自身的点击。.once : 只会触发一次.capture ...原创 2020-03-02 10:00:35 · 189 阅读 · 0 评论 -
Vue的基础理解(六)
Vue中 v-html有什么作用?会导致什么问题?v-html可以用来识别HTML标签并渲染出去。**导致问题:**在网站上动态渲染html,很容易导致xss攻击,所以只能在可信内容上使用v-html,且永远不能用于用户提交的内容上。keep-alive在vue中的作用是什么?keep-alive是Vue提供的抽象组件,用来对组件进行缓存,从而节省性能,当组件在keep-aliv...原创 2020-03-01 15:53:13 · 158 阅读 · 0 评论 -
Vue自定义指令
Vue自定义指令15个自定义指令:https://my.oschina.net/liuyuantao/blog/3130325什么是自定义指令比如v-show元素的显示/隐藏,vue允许我们自己设置自定义的指令自定义指令传递的参数el: 指令所绑定的元素,可以用来直接操作DOM。 binding: 一个对象,包含指令的很多信息。 vnode: Vue编译生成的虚拟节点。...原创 2020-02-24 18:48:26 · 208 阅读 · 0 评论 -
【vue】directive自定义指令
directive指令目的:实现自定义指令,比如v-focus<input v-focus />全局注册:Vue.directive('focus',{ inserted:function(el){ el.focus() }})局部注册:directives:{ focus:{ inserted:function(el){ el.focus();...转载 2019-12-10 11:09:01 · 97 阅读 · 0 评论 -
【vue】纯前端导出表格数据(vue+element-ui)
1.安装依赖安装依赖xlsx,file-savernpm install --save xlsx file-saver2.在组件中引入import FileSaver from 'file-saver'import XLSX from 'xlsx'3.添加下载方法#out-table为table节点的id outTab () { /* 从表生成工作簿对象 */...转载 2019-12-09 16:03:02 · 741 阅读 · 0 评论 -
【 VUE 】vue中的filter
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:原创 2019-11-21 11:47:19 · 97 阅读 · 0 评论 -
【vue】computed的应用
计算属性的应用对于输入框模糊搜索,动态监听改变数组(使用过滤器)计算属性计算时所依赖的属性一定是响应式依赖,否则计算属性不会执行计算属性是基于依赖进行缓存的,就是说在依赖没有更新的情况,调用计算属性并不会重新计算,可以减少开销<template> <input type="text" v-model="query" /> <li v-for=...原创 2019-11-20 14:13:12 · 214 阅读 · 0 评论 -
VUE 获取路由参数
vue 获取当前页面的路由参数 this.$route在当前页面 this.$route 输出当前页面路由信息 { name: "home", meta: {…}, path: "/", hash: "", query: {…},fullPath:'/',matched:[{}] ,params:{} }获取当前页面的路由信息 this.$route...原创 2019-11-19 15:21:43 · 914 阅读 · 0 评论 -
[ Vue ] 父子组件通讯
父子组建通讯,父组件引用子组件,子组件定义props,父组件按照props定义的规则传值,子组件定义事件this.$emit(事件名,参数 / 对象/数组) ,父组件通过相应的事件接收。思路:父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息,即 prop 向下传递,事件向上传递。子组件( 基于element-ui )<template>...原创 2019-08-11 17:45:03 · 110 阅读 · 0 评论 -
vue+element-UI 导出表格遇到的问题
需求: Vue+element UI table下的根据搜索条件导出当前所有数据准备工作: 1、安装依赖:npminstall--savexlsxfile-saver 2、在放置需要导出功能的组件中引入 import FileSaverfrom'file-saver' import XLSXfrom'xlsx' 3、HTML中的设置...转载 2019-07-23 09:21:54 · 2580 阅读 · 5 评论 -
element-UI表格排序问题
遇到的问题:表格不能排序解决:在列上加: :sort-method = "sortChange1" 方法<el-table:data="tableData"style="width: 100%":default-sort = "{prop: 'date', order: 'ascending'}" height="300"><el-table-c翻译 2019-03-05 10:49:02 · 5905 阅读 · 2 评论 -
vue- cli3.0 打包并在本地查看
用vue-cli3 直接用npm run build 打包后在本地不能查看 解决:在项目的根目录下新建文件 : vue.config.js//vue.config.jsmodule.exports = { // 基本路径 publicPath: './' //之前是 baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。 }如果放...原创 2019-02-20 14:39:51 · 1283 阅读 · 1 评论 -
axios Post与Get请求
1.使用npm安装Axiosnpm install axios --save2.页面中引入axiosimport axios from 'axios';Vue.prototype.$http = axios;axios.defaults.baseURL = 'http://maa.fashvn.com';post的请求 post () {let param = ne...原创 2018-08-02 17:41:36 · 321 阅读 · 0 评论 -
编程式导航(路由传值)
路由间传值:有这种方法,一种是显示在地址导航栏里,一种是不显示地址导航里1.params形式 :参数不显示在地址栏 (1)在app.vue中写入方法,点击按钮跳转到HelloWord的页面data(){ num:2}methods:{ goback(){ this.$router.go(-1) }, goHome(...原创 2018-08-02 11:18:31 · 3907 阅读 · 1 评论 -
vue 父子组件通信
1.父子组建通信 for循环出来的数组传到子组件:组件功能是点击组件,字体扩大//父组件<div id="blog-posts-events-demo"> <div> <blog-post :style="{ fontSize: postFontSize + 'em' }" v-...原创 2018-06-06 15:16:14 · 133 阅读 · 0 评论 -
Vue跳转传值 router-link
1.router-link<router-link :to="{name:'hi',params:{id:2,text:'judy'}}"></router-link>2.routers路由在router的文件夹目录下引入import hi from '@/components/pages/HelloWorld' //配置路由hi 组件export default new ...原创 2018-07-05 13:36:25 · 247 阅读 · 0 评论 -
vue数组操作
vue对数组的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2018-07-18 11:35:47 · 1566 阅读 · 0 评论 -
vue-cli脚手架,实现单页面路由
1.安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10。如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。下载地址:http://nodejs...转载 2018-07-24 14:39:51 · 1990 阅读 · 0 评论 -
Vue $mount的用法
$mount的用法1.$mount方法是用来挂载我们的扩展的做一个扩展,然后用$mount的方法把扩展挂载到dom上var judy = Vue.extend({ template:'<p>{{message}}</p>', data: function () { return{...原创 2018-07-19 13:15:58 · 33416 阅读 · 0 评论 -
vue-router 动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』(dynamic segment)来达到这个效果:1.我们可以在src——routers——index.js文件中export default new Router({...原创 2018-07-25 14:21:53 · 4338 阅读 · 0 评论 -
vue-router 嵌套路由
一、改造App.vue的导航代码 <p> 导航: <!--<router-link :to="'/hi/'+'judy'">hi页面</router-link>--> <router-link to="/hi">hi页面</router-link>转载 2018-07-25 16:26:11 · 192 阅读 · 0 评论 -
详解vue生命周期(重点!!)
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: 可以看出在vue——整个的生命周期中会有很多钩子函数提供给我们在vue生命周期的不同时可进行操作,那么先列出所有的钩子函数,然后我们在一一详解!beforeCreate //实例创建前状态 el与data都为undefi...转载 2018-07-30 11:40:52 · 4315 阅读 · 0 评论 -
vue-router 利用url传递参数
在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。 一 : 冒号的形式传递参数我们可以在理由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。1.配置路由在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。...转载 2018-07-27 14:21:55 · 6540 阅读 · 0 评论 -
vue中在页面中由多个组件显示
Vue.js 目录结构目录解析目录/文件 说明 build 最终发布的代码存放位置。 config 配置目录,包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: assets: 放置一些图片,...原创 2018-07-27 15:58:24 · 19555 阅读 · 1 评论 -
路由中的钩子函数
我们知道一个组件从进入到销毁有很多的钩子函数,同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中,也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。路由配置文件中的钩子函数 我们可以直接在路由配置文件(/src/router/index.js)中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码...转载 2018-07-31 15:36:06 · 7457 阅读 · 0 评论 -
编程式导航
之前的导航都是用<router-link>标签或者直接操作地址栏的形式完成的,那如果在业务逻辑代码中需要跳转页面我们如何操作?这就是我们要说的编程式导航,顾名思义,就是在业务逻辑代码中实现导航。this.$router.go(-1) 和 this.$router.go(1) 这两个编程式导航的意思是后退和前进,功能跟我们浏览器上的后退和前进按钮一样,这在业务逻辑中经常用到。...转载 2018-08-01 10:02:04 · 6364 阅读 · 0 评论 -
过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: <!-- 在双花括号中 -->{{ message | capitalize }}你可以在一个组件的选项中定义本地的过滤器:fil...转载 2018-08-06 16:58:03 · 175 阅读 · 0 评论 -
vue,router-link传参以及参数的使用
1.路径:http://localhost:8081/#/test?name=1<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)使用:this.$route.query.id2.路径:http://localhost:8081/#/test/1<router-link...转载 2018-06-05 10:25:45 · 399 阅读 · 0 评论