vue
码代码的程序员
这个作者很懒,什么都没留下…
展开
-
pc端纯前端实现文件下载
说明:下面的例子都是使用vue写的例子1.txt下载利用a标签进行下载 onClickDownDaily() { //定义文件内容,类型必须为Blob 否则createObjectURL会报错 const jsonData = [ { name: "路人甲", phone: "123456789", email: "000@123456.com", }, .原创 2021-12-10 17:41:57 · 485 阅读 · 0 评论 -
Vue.js中$router和$route的区别
1.$router$router是VueRouter的一个对象,通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由,包含了许多关键的对象和属性用法:$router.push({path:'home'}),本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录$router.replace({path:'home'}),//替换路由,没有历史记录2.$route是一原创 2021-03-02 00:55:40 · 984 阅读 · 0 评论 -
v-if 与 v-for 的优先级对比
2.x 版本中在一个元素上同时使用v-if和v-for时,v-for会优先作用。3.x 版本中v-if总是优先于v-for生效原创 2021-03-02 00:03:58 · 540 阅读 · 0 评论 -
vue中的混入 mixin
什么是mixins? 官方解释:混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。mixins可以理解成常见函数封装,想像一下封装JS方法。一个方法你想到处使用,是不是可以提个文件出来封装个函数。 但也不一定只干这个事,也可以进行一些业务逻辑的拆分、组合。不过这个还是风险比较大(命名冲突的问题)的。混入方式 组件按需混入、// 定义一个混入对象.jsvar my原创 2020-10-19 00:44:22 · 244 阅读 · 0 评论 -
vue中v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别
不具名插槽子组件:<template> <div> <!--定义不具名插槽 --> <slot></slot> <h3>这里是不具名插槽组件</h3> </div></template><script>export default { data() { return {} }, created() {}, moun原创 2020-07-24 11:19:58 · 797 阅读 · 0 评论 -
vue中使用pdf.js预览pdf文件
1.官网直接下载pdf.js,链接:点击打开链接这里面有核心的pdf.js和pdf.worker.js,以及展示pdf的viewer页面把它作为静态资源来编译,基本想要的build和web这两个重要文件夹的东西都正常编译。当然你可以可以npm install一下,整个文件放在static目录下的不好地方就是打包会很大哟(当然你可以选择性的删除里面的文件,比如绝大部分语言包)2.个人弄的一...原创 2020-03-29 23:29:15 · 802 阅读 · 0 评论 -
经典面试题----Eventloop(事件循环)
Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。JavaScript代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(task queue)(先进先出)来搞定另外一些代码的执行Javascript单线程任务被分为同步任务和异步任务,同步任务会在调用栈中按照顺序等待主线程...原创 2020-03-29 22:42:47 · 5704 阅读 · 1 评论 -
export default 和 export的一些区别
正确写法let man ={name:"13123",year:323,}export default man错误的写法(会报错)export default man ={name:"13123",year:323,}导入使用import man form xxx原创 2020-03-27 15:29:23 · 2594 阅读 · 0 评论 -
vue-cli3配置去掉console.log
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。webpack提供了删除console的插件,在vue-cli3里面是这样用的:首先安装terser-webpack-plugincnpm install terser-webpack-plugin -Dvue.config.js中的配置const TerserPlugin ...原创 2020-03-11 16:00:03 · 3584 阅读 · 1 评论 -
vue中引用阿里iconfont
1.安装svg-sprite-loadercnpm i svg-sprite-loader -D2.在阿里iconfont下载好icon,保存成svg格式,放在vue项目文件下面,我这里是icon文件夹,然后创建一个index.js文件icons--index.jsimport Vue from 'vue'import SvgIcon from '@/component...原创 2020-02-25 15:16:22 · 348 阅读 · 0 评论 -
基于 webpack 的require.context来实现自动加载组件并注册的全局的功能
require.context:一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。require.context(directory, useSubdirect...原创 2020-02-21 21:22:55 · 1268 阅读 · 0 评论 -
谈谈vue中的.sync修饰符用法及原理
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态例如://父组件给子组件传入一个函数 <Footers :name="...原创 2020-02-21 00:41:42 · 1817 阅读 · 0 评论 -
Vue 新增的$attrs与$listeners的详解
inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承(简单的说,inheritAttrs:true 继承除props之外的所有属性;inheritAttrs:false 只继承class属性)$attrs--继承所...原创 2020-02-20 19:29:24 · 773 阅读 · 0 评论 -
vue-cli3.0中的vue.config.js
vue.config.js一般的配置module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * for example GitHub Pages. If you plan to deploy your si...原创 2020-02-18 19:28:13 · 325 阅读 · 0 评论 -
router-link-active
组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名,就是router-link-active,我们就可在a标签被点击时,给a标签添加颜色或背景如果你觉得router-link-active这个名字过长时,你可以在main...原创 2020-02-16 17:49:56 · 5360 阅读 · 0 评论 -
移动端的rem适配方法---vue中的用法
1.创建一个scss文件//a.scss文件@function px2rem($px) { $rem: 37.5px;//苹果6的设计稿 @return ($px / $rem) + rem;}2.在vue中配置全局的sass在vue.config.js文件中加入下面代码就可以scss文件里面的方法全局引用module.exports = { css: {...原创 2020-02-07 22:36:35 · 616 阅读 · 0 评论 -
vue中全局配置sass变量或者方法
1.vue-cli3.0中,在vue.config.js文件中设置如下代码module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 sass: { // @/ 是 src/ 的别名 //...原创 2020-02-07 21:37:50 · 2127 阅读 · 0 评论 -
工作中的elelemtn的一些小诀窍以及vue中的一些小问题
1.表单验证可以同时实现blur,change(触发方式,blur失去焦点,change数据改变){ required: true, message: "嘻嘻嘻嘻嘻", trigger: ["blur",'change'] }2.动态配置校验(:rules="itemforms.isMustFi...原创 2020-01-17 10:38:48 · 334 阅读 · 0 评论 -
vue脚手架搭建
vue-clivue-cli脚手架第一步全局安装脚手架npm install -g @vue/cli第二步在一个文件夹下,打开命令行,在里面输入以下命令,来去初始化一个vue的项目vue create 项目名字(英文,比如:vue-project)第三步如果安装成功cd vue-projectnpm run serve...原创 2018-11-02 00:28:12 · 305 阅读 · 0 评论 -
vue的axios使用
安装安装或者引入CDN文件npm install axios<script src="https://unpkg.com/axios/dist/axios.js"></script><!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>--&a转载 2018-11-02 00:44:45 · 6931 阅读 · 0 评论 -
vuex的用法
vuex其实就是一个仓库,它是用来存放数据的地方,它也可以看成是一个中介,负责组件之间的通讯。第一步创建一个Vuex store 实例的根 state 对象const store = new Vuex.Store({ // 公告栏,信息表 state: { count: 1, },第二步创建getters,getters可以把state对...原创 2018-12-25 11:56:38 · 107 阅读 · 0 评论 -
vue中的watch监听方法
watch在vue的文档中是这样解释的。一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用$watch(),遍历 watch 对象的每一个属性。值是包括选项的对象:选项包括有三个。第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。第二个是deep:其值是true或false;确认是否深入监听。...原创 2018-12-26 00:02:41 · 16960 阅读 · 1 评论 -
keep-alive使用的注意点
使用keep-alive的时候就是把这个组件缓存了,组件不会被销毁,组件的状态会一直存在使用keep-alive后,mounted生命周期函数不会每次都触发(只有刷新组件的时候才起作用),而vue新增了activated和deactivated函数,所以我们可以在activated函数里执行一些操作,这个时候activated就和没有使用keep-alive时的mounted生命周期函数差...原创 2019-01-23 10:05:45 · 2213 阅读 · 0 评论 -
什么是mvvm mvc是什么区别 原理
一、MVC(Model-View-Controller) MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)。 MVC使用非常广泛,比如JavaEE中的SSH框架 二、MVVM(Model-View-ViewModel...原创 2019-02-17 21:49:21 · 1276 阅读 · 0 评论 -
vue的app监听返回键
document.addEventListener('plusready', function (a) { var first = ''; plus.key.addEventListener('backbutton', function () { //获取地址栏目中的url var urls = location.hash.split('/')[1]...原创 2019-04-11 17:31:33 · 3005 阅读 · 1 评论 -
vue-cli的3.x版本的安装使用记录
2.9版本的安装方法之前都是使用2.9的版本都是一句话 "npm install -g @vue/cli "全局安装就可以了,然后vue create 项目名字(英文,比如:vue-project),cd vue-project(进入这个项目的文件夹) npm run serve(运行项目)就可以了3.x版本的安装方法vue-cli的3.x版本安装就比2.9的要复杂一点1.n...原创 2019-04-03 09:53:43 · 1233 阅读 · 0 评论 -
vue项目在不同环境下请求不同接口地址
在vue-cli2的版本中,在项目的目录下有config文件夹,config文件夹里面有dev.env.js和prod.env.js文件,dev.env.js是开发环境的配置文件,prod.env.js是生产环境的配置文件在dev.env.js文件中配置开发环境的接口'use strict'const merge = require('webpack-merge')const pro...原创 2019-04-22 17:07:11 · 6054 阅读 · 0 评论 -
echart中的点击事件
echart的点击事件let myChart = echarts.init(document.getElementById(id)); //防止出现多次点击 if(myChart._$handlers.click) { myChart._$handlers.click.length = 0; }; //点击事件 myChart.on('click', function...原创 2019-05-22 11:48:58 · 9735 阅读 · 0 评论 -
vue-lazyload懒加载插件的使用
1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload2.安装,在vue-cli中安装npm install vue-lazyload -D3.在HTML中安装<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"><...原创 2019-06-12 11:19:59 · 3579 阅读 · 0 评论 -
axios的在请求头带上token简单封装
在请求头带上token1.导入axios$ npm install axios2.在文件中引入import axios from 'axios';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 全局更改import qs from 'qs';// 配合...原创 2019-08-24 10:15:21 · 3315 阅读 · 0 评论 -
element的一些使用注意点
1.table表格控件表头与内容列不对齐问题//将以下样式代码添加到index.html、或app.vue中(必须是入口文件,起全局作用!).el-table th.gutter{display: table-cell!important;}2.table中的el-table-column设置百分比把 width 换成 min-width ,就支持百分比显示啦 !3.表格...原创 2019-09-22 22:18:58 · 452 阅读 · 0 评论 -
v-model绑定出现问题
在vue中的v-model绑定出现问题,一般都是绑定的变量没有声明,或者是绑定的变量不是响应式属性,或者是在其他地方被覆盖成 了空的,如果不是响应式属性的话,可以通过Vue.set()方法把它设置成为响应式属性。...原创 2019-10-10 09:26:45 · 2617 阅读 · 0 评论 -
vuex的用法
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。其实最简单理解为,在我们写Vue组件中,一个页面多个组件之间想要通信数据,那你可以使用Vuex安装npm install vuex --save引用在一个模块化的打包系统中,您必须显式地通过Vue.use()来安装 Vuex:...转载 2018-10-16 00:46:41 · 284 阅读 · 0 评论