Vue
雨雪风晴是你
波浪式前进,螺旋式上升
展开
-
【Vue】vue中的$attrs到底是什么?
先来看看官方文档给的定义:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。既然来到这里就继续往下看!既然是跟组件间数据传值有关,话不多说,直接上栗子:<div id="app"> Parent: ...原创 2020-05-30 20:00:24 · 3158 阅读 · 0 评论 -
【Vue】怎么理解Vue中双向数据绑定v-model?
1:v-model是什么?语法糖。不够详细?实现数据双向绑定的语法糖!2:v-model的本质?既然是实现数据双向绑定,那么如果不使用v-model该怎么实现?请看下面栗子:<div id="app"> <input type="text" v-bind:value="defaultValue" v-on:input="setDefaultValue($event.target.value)"></div>let vm = new V原创 2020-05-30 19:22:48 · 605 阅读 · 0 评论 -
简述Vue的响应式原理
当一个Vue实例创建时,vue会遍历data选项的属性,用Object.defineProperty将它们转为getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。 巴拉巴拉:==...原创 2019-02-27 17:06:36 · 2816 阅读 · 0 评论 -
详细解析Vue中的各类修饰符
原文:地址1.表单输入框input中的修饰符(1).lazy:加lazy修饰符的区别相当于在输入后失去焦点或者摁了enter键视图才更新。不加lazy则是在keyup就更新,如下:<input v-model.lazy="msg" ><h3>{{msg}}</h3>(2) .number:把输入的数值从字符串或其他类型转换为number类型...转载 2019-03-08 09:29:05 · 700 阅读 · 0 评论 -
Vue:【警告】重复命名路由定义[vue-router] Duplicate named routes definition
[vue-router] Duplicate named routes definition: { name: "模板", path: "/exam/" }这里警告的意思是说重复命名路由,在路由配置文件中,找到对应name,会发现有两处或者两处以上都使用了“模板”这个name;解决办法:直接删除获取修改name使其具有唯一性即可。巴拉巴拉:==主页传送门==...原创 2019-03-24 21:43:27 · 43412 阅读 · 0 评论 -
Vue:怎么实现异步组件加载(按需加载)
原文:地址有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的。如果只是针对这个问题的话,我们可以考虑以下两方面:nignx开启gzip、缓存。 文件再次拆分-异步加载下面就主要说以下vue组件异步加载的方法:(测试所用的webpack:^4.12.0)1.使用() => import();2.使用resol...转载 2019-03-30 15:30:55 · 1338 阅读 · 0 评论 -
Vue:_handler.apply is not a function解决apply不是一个函数的报错情况
今天偶然间碰到了一个从未碰到过的问题(谷歌浏览器下检查出的错误):TypeError: handler.apply is not a function!出现这个报错的原因是因为当前页面中的变量名与事件名一致发生了冲突,项目涉及到的变量以及事件名称过多,导致自己在定义这些变量名以及事件名称的时候大意了,只需要找到对应的变量名和事件名,任改其一,即可解决apply不是一个函数的报错。S...原创 2019-04-13 13:24:02 · 20374 阅读 · 0 评论 -
Invalid default value for prop "tableData": Props with type Object/Array must use a factory function
原文参考:地址问题:问题大致意思为:“tableData”的默认值无效:带有对象/数组类型的道具必须使用工厂函数返回默认值导致问题的代码:props:{ tableData:{ type:Array, default:[] },}解决办法:修改default返回类型的方式props:{ tableDat...原创 2019-05-15 14:19:08 · 7443 阅读 · 0 评论 -
Vue:子组件接收不到父组件所传的值(v-bind)
一个很基础的父组件向子组件传值:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-07-03 18:01:58 · 4284 阅读 · 0 评论 -
VUE插件汇总
框架:element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的...转载 2019-02-15 15:05:21 · 352 阅读 · 0 评论 -
VUE中引入插件实现px转换rem
1.使用命令行安装lib-flexible:npm install lib-flexible--save2.引入lib-flexible:在项目入口文件 main.js 里 引入 lib-flexibleimport 'lib-flexible'3.配置meta标签:在项目根目录的 index.html 中添加如下 meta<meta name="v...原创 2019-02-15 13:58:28 · 5138 阅读 · 4 评论 -
Vue 手机测试vue移动端项目
1:获取电脑网络ip地址(注意:手机端与电脑端需在同一无线局域网下,可电脑连接手机热点)命令行输入:ipconfig回车后获取到ip地址:如图中的172.20.10.42:将获取到的地址替换项目中的http:localhost:8080地址具体步骤:打开项目中的package.json文件,将红色部分代码段"scripts": { "dev": "webp...原创 2019-01-08 23:30:20 · 693 阅读 · 0 评论 -
Vue动态路由 使用params进行传参。
1、若要传参首先要创建一个小小的项目来渲染,这里就不多言了。2、在src/components文件夹下定义父组件(首页)Home.vue进行传参:<template> <div> <h1>Hello NyDynamicRouter!</h1> <p v-for="(item,index) in userInfo" :key="...原创 2018-12-27 23:55:51 · 9054 阅读 · 0 评论 -
Vue轮播图 实现根据数据动态添加页码
想要达到的效果:假设轮播图单个slide(单页)内存在8组渲染数据,当数据存在9组的时候,slide会自动将第9组数据渲染到第二个slide下;数据存在7“个”时:数据存在10“个”时:其中数据为定义的模拟数据,接下来是代码的实现过程:1、使用swiper插件:vue-awesome-swiper(Github上搜索相对应插件)2、下载插件到项目内:npm inst...原创 2018-12-28 22:52:31 · 1320 阅读 · 0 评论 -
Vue:获取当前定位城市名
实现思想:通过定位获取到当前所在城市名;1、在工程目录index.html中引入:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>ps:秘钥可以去百度开发者平台申请2、在build/webpack.base.conf.j...原创 2018-12-30 01:22:16 · 14502 阅读 · 10 评论 -
Vue同级(兄弟)组件间数据的传递
同级(兄弟)组件间不能直接传递数据,需要建立一个类似桥梁的载体去实现。1、定义一个公共文件public.js,创建位置工程src目录下与main.js同级(代码内容是创建一个空的vue实例):import Vue from 'vue'export default new Vue() 2、创建好以后,同级(兄弟)组件分别引入public.js这个文件:import Public...原创 2018-12-30 21:27:36 · 1079 阅读 · 3 评论 -
VUE中的常见问题
1.请谈谈Vue中的MVVM模式?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通...翻译 2019-01-06 01:02:45 · 284 阅读 · 0 评论 -
在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate用法:首先npm install animate.css --save然后在vue文件的script中引入:import $ from '../assets/js/jquery.js';//非必要import animate from 'animate.css' 最后绑定元素使用:...转载 2019-01-06 15:23:25 · 5355 阅读 · 0 评论 -
QS:vue中qs的使用
关于Vue中,序列化字符串,处理发送请求的参数使用工具qs来处理参数步骤:1、首先先下载:npm i qs 2、然后引入 :import qs from 'qs'3、qs主要有两个方法 :方法一:将对象序列化,多个对象之间用&拼接(拼接是由底层处理,无需手动操作)qs.stringify() 转换成查询字符串let comments = {c...原创 2019-01-06 17:29:24 · 45448 阅读 · 13 评论 -
Vue中使用v-for警告:呈现的组件列表应该有显式的键值!
在vue中使用v-for渲染数据初始代码:<divider v-for="item in list">{{item.name}}</divider>遇到警告:(Emitted value instead of an instance of Error) <divider v-for="item in list">: component lists...原创 2019-01-18 10:01:51 · 2948 阅读 · 0 评论 -
Vue(Router) query与params传参/接收参数的区别
关于路由传参的区别:1:query方式传参和接收参数:传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数:this.$route.query.id 需要注意的是:传参是this.$router ,而接收参数是this.$route,...原创 2018-12-27 23:14:11 · 425 阅读 · 0 评论