随笔分类 - 08-Vue相关
摘要：对于权限来说都不陌生，而菜单权限及路由权限都很好控制，但按钮权限就没那么容易了，本文主要说明每个页面的按钮根据其拥有的权限来控制： 1）定义按钮权限的指令 import Vue from 'vue' Vue.directive('has', { inserted: function (el, bin
阅读全文
摘要：1）安装js-file-download npm i -S js-file-download 2）编写下载的页面 <template> <div> <el-button @click="download">下载</el-button> </div> </template> <script> impo
阅读全文
摘要：1）安装插件 npm install svg-sprite-loader --save-dev 2）封装svgIcon组件 在componemts里新建svgIcon文件夹，新建index.vue，封装成组件 <template> <svg :class="svgClass" aria-hidden
阅读全文
摘要：在下次 DOM 数据更新循环结束之后执行延迟回调。也就是说此回调函数是延迟执行的，是在下一次DOM数据更新后自动执行。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。主要用在两方面，一种是在vue的created函数中操作DOM数据时使用，另一种是修
阅读全文
摘要：vue 的filters中 this指向的并不是vue实例，但想要获取vue实例中data中的数据，可以在 beforeCreate中将vue实例赋值给定义的全局变量app，然后在filters中通过app代替this来获取data中的数据。 <template> <div> <div v-for=
阅读全文
摘要：给定一个网址，在页面生成二维码，手机扫码后直接进入此网站。 1）安装全局的插件 npm install qrcodejs2 -S 2）组件封装 在component目录下新建一个vue文件，内容如下 <template> <div> <div id="qrcode"></div> <!-- 创建一个
阅读全文
摘要：实现打印功能，需要安装一个插件vue-print-nb，使用方法如下 1）安装全局的插件 npm install vue-print-nb -S 2）在main.js中注册 import Print from 'vue-print-nb' Vue.use(Print) 3）在页面中使用 <templ
阅读全文
摘要：1.属性的监听 普通的属性，直接在data中定义，然后监听即可。详见Vue基础。 2.对象属性的监听 对象中的属性，要想监听其中的某一属性值的变化，不能直接监听对象的变化。 data() { return { user:{ name:'', age:'' } } }, computed:{ getN
阅读全文
摘要：在vue中，若直接给一个空对象添加一个属性并且是响应式的，必须使用$set方法，只有这样才能让视图同步刷新。 当对象的属性存在时就赋值，不存在则给其添加属性，再赋值。 //判断属性是否存在 if (!this.user.age) { //参数：对象，要添加的属性名，属性值 this.$set(thi
阅读全文
摘要：provide/inject提供了一种新的组件间通信的方法。它允许父组件向子孙组件间进行跨层级的数据分发，但是provide/inject是非响应式的。一般用于子组件调用父组件的共有方法。它们两个需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时
阅读全文
摘要：对于常规的计算属性，都是直接返回单个值，如： computed: { result() { return this.one + this.two } } 其实也可以返回一个方法。且看下面的代码： <template> <el-table :data="data" border fit highlig
阅读全文
摘要：问题描述：在设置好store之后，刷新页面后导致store中的内容消失。 解决办法：在刷新前将store中的内容添加到sessionStorage。 实际代码：在App.vue的created()中存储与获取 // 在页面加载时读取sessionStorage里的状态信息 if (sessionSt
阅读全文
摘要：当有时候需要在页面显示时显示空格时，可以使用 ，但是使用这个占位符时，无论写多少个，就只能显示一个空格。要想显示多个空格进行占位，这种方式显然是可行的，解决方法是使用转义字符。 先看代码： <template> <div> <el-row style="background-color:
阅读全文
摘要：问题情景：开发中发现我的项目四周有白边，但是并没有设置样式 问题原因：vue脚手架中静态文件夹public中的index.html造成的 解决方案：找到vue脚手架中index.html页面，设置margin为0即可 <style> body { margin: 0; } </style>
阅读全文
摘要：在验证的时候，除了el-form自带的验证规则外，还可以自己进行验证，然后在规则中指定验证的方法即可。如自定义手机号验证，不管验证是否通过，必须返回一个callback对象。代码如下： <template> <el-form :model="ruleForm" :rules="rules" ref=
阅读全文
摘要：1.nrm nrm提供了一些最常用的npm包镜像地址，可以快速切换服务器地址下载资源。它只是提供了地址，并不是装包工具。如果没有安装npm，需要安装node，然后直接安装即可。node下载链接：https://pan.baidu.com/s/1kAgxxerNtSkYCIVqjXce6w 。提取码：
阅读全文
摘要：1.vue是什么？ 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，响应式的数据驱动。 2.安装 直接下载对应的vue.js,然后在html中应引入即可 <script sr
阅读全文
