vue
张培跃吧
拥有十余年实际开发经验的骨灰级程序员!
资深IT培训讲师!
目前专注于web前端领域知识分享。
卫信工粽号:张培跃。
展开
-
基于vue-cli4配置px2rem做到移动端自适配
在实际开发中,我们需要将设计稿中的px转换成rem,然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。一、安装模块cnpm install amfe-flexible postcss-px2rem -Samfe-flexible:是rem的适配插件。(例:750px == 10rem)postcss-px2rem:负责将输入的px自动转为rem。二、入口文件main.js里引入amfe-flexibleimport "amfe-flexible";三、以下配.原创 2020-09-28 19:16:36 · 1512 阅读 · 1 评论 -
你真的搞懂VUE了吗?来,做道面试题吧!
直接上题:const MockComponent = { render(){ return this.$slots.default; }, data(){ return { status:'', }; }, watch:{ status:{ ha...原创 2020-04-11 22:04:53 · 548 阅读 · 1 评论 -
web前端知识点归纳笔记:Vue.js调试神器vue-devtools的安装
在使用 Vue 时,官方推荐我们在浏览器上安装 Vue Devtools。它允许我们在一个更友好的界面中审查和调试 Vue 应用。1、在github上打开 Vue Devtools项目https://github.com/vuejs/vue-devtools#vue-devtools2、下载压缩包3、文件解压缩4、进入压缩后的文件夹安装依赖包npm ins...原创 2019-03-11 10:37:51 · 280 阅读 · 1 评论 -
深陷axios坑中,久久不得爬出,望君莫犯!
本人一生与bug英勇奋战,可谓斩敌无数,双手沾满鲜血,对于bug早已见怪不怪了。怎奈对于一些始料未及,史无前例的另类bug,真是惊呆了我的小伙伴们!我在使用axios的过程中,遇神坑一个,坑虽不大,但深陷其中并久久不得爬出。在此记录一下,望君莫犯!一切的一切,都要从axios的transformRequest属性说起…一、transformRequest的四个特征:1、可以在向服务器发...原创 2019-04-16 21:14:13 · 1208 阅读 · 0 评论 -
通过Node.js完美解决Vue-Cli3.0上线时的二大痛点
在前端框架的历史中,React 和 Angular 一直都处于主角的位置。其间,有众多的新框架试图冲杀进来分一杯羹,但都未成功,除了 Vue。作为一个比 React 和 Angular 都更年轻的框架,Vue 自打去年在GitHub上的star数量超过React之后,其势如破竹的增长势头好像一直就未曾停歇过!Vue 有一个与React 的 create-react-app 非常相似的官方CL...原创 2019-04-25 21:45:10 · 516 阅读 · 0 评论 -
vue前端UI框架,一点都不圆润,盘它!
面对众多vue前端UI框架,看着它们干干巴巴、麻麻赖赖的样子,一点都不圆润,跟我一起盘它!Vue移动端UI框架1、Vux(star:15620)VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。暂未适配 vue-cli@3.x官网:https://vux.li/中文文档:https://doc.vux.li...原创 2019-05-03 20:52:37 · 1666 阅读 · 0 评论 -
vue使用小技巧之如何使用阿里巴巴矢量图标库
阿里巴巴矢量图标库介绍:设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。目前拥有icon即将突破500万。网址:https://www.iconfont.cn本篇文章将会为小伙伴们详细图解——在vue中如何使用阿里巴巴矢量图标!1、打开阿里巴巴矢量图标库网址2、注册并登陆(略)3、点击图标管理...原创 2019-05-08 20:42:49 · 5846 阅读 · 3 评论 -
对vue中nextTick()的理解及使用场景说明
异步更新队列:请记住:**vue是依靠数据驱动视图更新的,该更新的过程是异步的。**即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新队列)。视图需要等队列中所有数据变化完成之后,再统一进行更新。示例:<div id="myApp"> <input type="button" value="点我呀" @click="changeSt...原创 2019-06-05 20:46:23 · 4190 阅读 · 1 评论 -
vuex结合vue-meta实现router动态设置meta标签
网站的访问流量中,有相当一部分都是来自于搜索引擎,而来自于搜索引擎的流量又全部是免费的,所以网站的SEO(Search Engine Optimization 搜索引擎优化)是实现自我营销的一种最直接且最有效的手段。而SEO往往又都是从优化meta标签开始的!一、meta标签介绍meta标签提供关于HTML文档的元数据(元数据指用于描述数据的数据)。元数据不会显示在页面上,但是对于机器是可...原创 2019-06-17 21:03:24 · 8724 阅读 · 3 评论 -
Vue原理解析:Vue 实例如何实现代理 data 对象属性的访问
对于初学Vue.js的小伙伴而言,可能会认为Vue实例是一个很神奇的东西!因为它除了帮助我们完成双向绑定之外,还在某些细节方面为我们增加了一些理解上面的小烦恼!希望通过这篇文章能够为勤勉的你解惑~看一段简单代码先:new Vue({ el:"#myApp", data:{ userName:"laoWangTou", age:16 },...原创 2019-08-17 20:44:19 · 1432 阅读 · 0 评论 -
Vue3.0马上就要来了,TypeScript学会了没?
大家都知道Vue的作者是尤雨溪,而像尤雨溪这种神级的开发者可能真的具有想改变世界的想法。而有的小伙伴可能要想:神也是人,改变世界也需要钱啊!而Vue既然是一款免费的框架,那它又是如何盈利的呢?首先Vue的发展很顺畅,其用户也非常活跃,并且也为众多的开发者创造了价值!大家可以假设一下:如果有一万个人在使用其框架,其中百分之一的人愿意每月给予作者10美元的赞助,其生存应该不会有太大问题。而Vue的用...原创 2019-02-22 21:20:11 · 4628 阅读 · 2 评论 -
最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!
VUE双向绑定原理是前端小伙伴很难绕过的一道面试题!本篇文章对其原理进行了最大程度的精简,希望对面试VUE开发的前端小伙伴有所帮助!我在这里将指令 v-改为z-,主要完成z-model、z-click、z-text以及z-html四个提令。为了能够快速读懂代码,首先要先弄明白以下三个概念:1、观察者(observer):也就是数据监听器,负责数据对象的所有属性进行监听劫持,并将消息发送给订...原创 2018-11-25 00:58:31 · 416 阅读 · 0 评论 -
理解vue中的插槽------slot与slot-scope
vue当中的插槽,指的即是slot,是组件当中的一块HTML模板。该模板是否显示,以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ,你将slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块!单个插槽单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性,也可以称其为匿名插槽。 先来看一个例子。 父组件:...原创 2018-09-13 21:49:18 · 2145 阅读 · 0 评论 -
真正掌握vuex的使用方法(二)
从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍!接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票”按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示: 1、首先通过vue-cli生成一个名字叫做demo的项目 vue init webpack demo2、项目搭建完成...原创 2018-05-18 10:41:55 · 1668 阅读 · 1 评论 -
Vue-cli中的proxyTable解决开发环境的跨域问题
对于前端开发人员来讲,当你在开发环境中与后台开发人员进行数据联调时,总会遇到烦人的跨域问题!解决跨域的方法有很多种,比如你和后台人员经过友好协商后,你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域!但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口,并明确告诉你不允许修改接口,怎么办?怎么办才能实现跨域?此时你就可以通过proxyTable来解决跨域问题...原创 2018-05-12 01:54:33 · 2586 阅读 · 0 评论 -
真正掌握vuex的使用方法(三)
接下来咱们继续使用vuex来完成上篇文章的投票实例。大家一定要记住,学习编程这种事一定要慢慢来才会快!所以一定要将代码多敲几遍哦!目前当前的票数已经可以在页面中渲染出来了!接下来要做的事就是让按钮起到应有的责任:点击对应的按钮让数字加1, 总票数也要加1。很简单,只要给按钮增加一个事件,直接改变其状态即可,代码如下: &lt;div id="app"&gt; &l...原创 2018-05-18 16:00:31 · 4467 阅读 · 0 评论 -
真正掌握vuex的使用方法(六)
下面咱们来将切换的案例改为vuex来写! 首先需要在src目录下,新建一个store文件夹,然后在该文件夹内创建一个store.js文件import Vue from 'vue';//引用vueimport Vuex from 'vuex';//引用vuexVue.use(Vuex);//使用vuexconst state={ tagList:[],//用于存放与切换相关的...原创 2018-05-27 08:50:27 · 2006 阅读 · 0 评论 -
真正掌握vuex的使用方法(七)----完结
今天是关于vuex的最后一篇文章了!怎么说呢?且行且珍惜吧!!认真尝试每一行代码!之前的文章当中,我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大,共享的状态越来越多,越来越复杂!在这个时候我们需要将状态根据功能来对其进行模块化,同时也是为了便于将来的维护,所以分开写会更好一些。 今天我们主要来学习一下module:状态管理器的模块化操...原创 2018-05-27 17:55:03 · 2578 阅读 · 1 评论 -
真正掌握vuex的使用方法(四)
接下来看一下template当中计算总票数的表达式:<div><h2>总票数:{{nodeVoteCount+vueVoteCount}}</h2></div>是不是很长?是不是看着它很蓝瘦? 正常的第一反应就是将其写入到计算属性内,方便调用!所以咱们可以将computed调整如下: computed:{ ...mapS...原创 2018-05-24 15:09:50 · 1338 阅读 · 0 评论 -
真正掌握vuex的使用方法(五)
希望每一位同学可以亲自将每行代码进行一次尝试!记得对于学习代码来讲慢慢来才会更快!现在咱们先抛开vuex,一起来做一个如上图一样的切换案例:<template> <div id="app"> <!--点击此按钮index变为0,并让此按钮应用上样式active--> <input type="b...原创 2018-05-24 15:10:36 · 888 阅读 · 1 评论 -
彻底明白VUE修饰符sync
对于VUE的初学者来讲,肯定会感觉prop的写法很麻烦,很讨厌!你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得!不过现实是残酷的,如果子组件可以任意修改父组件的内容,那势必会带来数据的混乱,从而造成维护的困扰!毕竟父组件也是有尊严的!官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功...原创 2018-09-15 23:03:53 · 3424 阅读 · 0 评论 -
强大的JS方法Object.defineProperty详解及VUE.JS双向绑定原理
Object.defineProperty是一个很了不起的方法。vue.js之所以能够实现双向绑定便是拜它所赐!defineProperty直接翻译过来即是“定义属性”,不过该方法可不仅仅是定义属性这么简单,咱们还可以通过它来对属性进行拦截设置!我们知道对象是由多个键/值对组成的无序集合。对象当中的属性可以是任意类型的值。我们可以通过构造函数以及字面量的形式来定义对象。var obj={}...原创 2018-09-18 19:43:21 · 714 阅读 · 0 评论 -
真正掌握vuex的使用方法(一)
导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习!咱们知道,vue项目当中的父子组件的交互是单通道传递,父组件通过props向子组件传递参数,而在子组件当中不不能直接修改接收的参数,而是需要通过自定义事件的方式,例如:&lt;!------...原创 2018-05-17 14:54:26 · 8070 阅读 · 0 评论