vue2.0
大白的博客
这个作者很懒,什么都没留下…
展开
-
v-show 和 v-if 的区别
v-show 和 v-if 的区别共同点都是用来控制元素的显示与隐藏的不同点V-show是对class样式切换;v-if是对Dom元素切换;频繁切换用v-show,切换消耗小,反之用v-if,运行条件很少改变,那为什么建议控制v-if 的使用v-if是真正意义上的“条件渲染”。符合条件就渲染,否则不渲染DOM,浏览器中找不到这个DOM。v-show严格意义上说“条件隐藏”。浏览器首先把HTML元素先渲染出来,符合条件就显示,不符合条件display就为none,不显示,但是元素还在那原创 2020-12-28 11:24:31 · 390 阅读 · 0 评论 -
vue css 中 scoped的实现原理
vue style 中 scoped的实现原理在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。vue中的scoped属性的效果主要通过PostCSS转译实现PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CS原创 2020-12-28 11:10:39 · 1402 阅读 · 1 评论 -
element-ui DateTimePicker 日期选择 日期禁用
日期区间选择器,当开始时间变化,就将之前的日期禁用,结束日期变化,就将此日期之后的禁用,效果如图主要用到的参数picker-options 当前时间日期选择器特有的选项参考下表 <template> <el-form ref="form" :rules="rules" :model="form" :label-width="180px" class="form-style"> <div class="form-group...原创 2020-10-16 22:11:30 · 3126 阅读 · 0 评论 -
Vue props用法详解
Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为:props down, events up父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。父子级组件比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可...转载 2019-11-18 15:01:01 · 1209 阅读 · 0 评论 -
[Vue warn]: Error in nextTick: "TypeError: Right-hand side of 'instanceo
报错如下原因:props 中出传来的默认值给的是具体的字符串解决办法:将具体字符串变成String,类型解决根据:验证传入的 props 参数的数据规格,如果不符合数据规格,Vue 会发出警告。能判断的所有种类(也就是 type 值)有:String, Number, Boolean, Function, Object, Array, Symbol...原创 2019-11-18 14:58:59 · 1870 阅读 · 0 评论 -
Error in created hook: "TypeError: Cannot read property 'getAttribute' of undefined"
表现:vue项目中,进入页面的时候,报错如下原因:我把Echarts 的初始化,写到了created 的回调函数中了,解决办法:将初始化写到mounted的回调函数中理由:created: 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染mounted:在模板渲染成html后调用,通常是初始化页面完成之后,再对html的dom节点进行操作注意:如果是弹框中包...原创 2019-11-11 12:43:50 · 7305 阅读 · 1 评论 -
vue 引入 scss 文件到 main.js 报错
在引入公共 scss 文件的时候,发现一直编译不成功,报错如下,This relative module was not found: * ./main. in ./src/main.js本来以为是路径写错了,直接放到平级目录,还是引入不成功,结果发现是sass loader 的问题找到 webpack.base.conf.js 文件,删掉以下配置{ test: /...原创 2019-08-08 20:29:40 · 2020 阅读 · 0 评论 -
vue-cli 搭建项目
用 Vue 已经很久了,但是没有想起来总结一下,今天先总结一些,慢慢补充,要知道每天的工作还是很饱和的所需环境nodenpmcnpm // 用于加快下载速度步骤1.在自己新建的文件夹中 打开命令行工具,全局安装 npm install -g vue-cli,2.vue init webpack + 项目名称 // 不可用中文3.然后会出现很多选择,如下1.Project ...原创 2019-08-05 20:30:08 · 200 阅读 · 0 评论 -
vue 提示弹框
分享一个很好用的提示弹框(几秒消失的那种)非常适用于前端内容增删改查成功或失败后的提示语templet 中的 Dom<div class="alsrtInfo" :style="{display: displayStsates}" ref="alertMsg"> <div class="profPrompt_test">{{aletMsg}}<...原创 2019-07-16 19:25:38 · 15063 阅读 · 0 评论 -
v-model.trim使用
v-model.trim用于去掉输入框内首尾空格如下绑定的时候加上.trim 那么如果直接在开头输入空格,或者是在末尾输入空格,是不会显示有输入内容的,<el-input type="textarea" v-model.trim="deleNsbp" ></el-input>之前看到有人问他赋值的时候,为什么不能去除前后的空格,当输入内容之后,前后空格就被解...原创 2019-07-26 12:48:54 · 33278 阅读 · 0 评论 -
Vue Router 的params和query传参刷新后参数丢失情况
经常遇到刷新页面参数丢失的情况,今天总结一下params是路由的一部分,创建路由时,须要在路由后边添加参数名。 query是拼接在URL后边的参数,创建路由时,不用必须添加,可以直接跳转的时候携带即可params 参数丢失分析因为 params 传参需要在路由后边添加参数名,例如:/:id/:name,所以,如果没有在配置中写,当页面刷新之后,所传参数就会消失 如果在路由中配置了参...原创 2019-06-11 15:50:33 · 13046 阅读 · 2 评论 -
vue 监听对象的属性
本文举几个 wacth 的例子普通情况 -- 监听 ''单个值'' 监听对象 监听对象中的某个属性 监听对象中的所有属性(即对象中属性发生变化时,触发该对象的监听)常见实例表单监听实例:监听一个表单中的所有属性都不为空(即对象中属性发生变化时,触发该对象的监听)监听 ''单个值''data() { return { text: '' // 该值可...原创 2019-05-13 16:57:59 · 5330 阅读 · 1 评论 -
vue angular react 的区别
一 数据流数据绑定Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。实现原理:$scope变量中使用脏值检查来实现。像 Vue 是基于ES5 的 setter,getter的观测机制,$scope.$watch函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。使用ng-...转载 2019-05-13 17:06:48 · 394 阅读 · 0 评论 -
vue
https://router.vuejs.org/zh/api/#router-modehttps://cn.vuejs.org/v2/api/index.html#datahttps://vuex.vuejs.org/zh/guide/state.htmlhttps://segmentfault.com/a/1190000009404727?utm_source=tag-newest...原创 2019-04-02 18:46:48 · 251 阅读 · 0 评论 -
elementui select 获取 value
一般情况下,下拉框中的值会以数字的格式向后台传参,可是获取绑定的值的时候,总是提出来的字符串,如何解决呢?解决办法:将 v-model 绑定的 selectValue 的类型和 :value 的值类型相同,才能取出其中的为数字类型的 value如下:<template> <el-select v-model="selectValue" placeholder...原创 2019-04-22 14:12:29 · 5192 阅读 · 0 评论 -
Vue 父子组件传值
父组件 --> 传子组件父组件代码 -- parents.vue<template> <child :list='List'></child> // 子组件通过 props 接收传递过去的 list // 父组件向子组件传递 list ,list 的值 为List 数组,此处故意不同大小写,为了区分参数和值<...原创 2019-04-22 16:11:44 · 190 阅读 · 0 评论 -
elementUI textarea 禁止拉伸
普通的textarea 可以设置样式 禁止拉伸 -- resize: none; resize: none;elementUI textarea 禁止拉伸,因为elementUI 封装了很多类,所以对每个组件都设置样式,不如公共部分设置一下,这样就需要重写部分elementUI 的样式,如下@import "../../../node_modules/element-u...原创 2019-04-22 16:40:58 · 16941 阅读 · 6 评论 -
Vue 如何关闭 Eslint
找到文件config/index.js找到 useEslint: true,改为 useEslint: false,之后重启项目 npm run dev原创 2019-04-18 20:49:40 · 313 阅读 · 0 评论 -
vue与angular的区别
vue与angular 区别特别需要注意的是,两者都有双向数据绑定,Vue在不同组件间强制使用单向数据流。这使应用的数据更加清晰结构易懂。1:vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,不能算是一个完整的框架,而angular是mvvm框架。2:vue的双向邦定是基于ES5 的 getter/setter来实现的,而angular而是由自己实现一套模版编译规则...原创 2019-05-09 17:36:14 · 3683 阅读 · 0 评论 -
Vue Router 的params和query传参的使用和区别
首先简单来说明一下$router和$route的区别$router : 是路由操作对象,是一个实例,只写对象$route : 路由信息对象,只读对象//操作 路由跳转this.$router.push({ name:'hello', params:{ name:'word', age:'11' }})/...原创 2019-05-15 14:23:52 · 666 阅读 · 0 评论 -
vue 获取路由中参数,有时是字符串,有时是数字
项目中的菜单是由后台动态传来的,通过ID来进行路由的跳转的,但是发现通过(this.$route.query.id)获取 ID 进行判断页面时,有时获取到的是字符串、有时候是数字,原因:字符串:当已经处在某个有ID的路由页面时,当点击刷新,此时在获取 ID 时,ID 是从URL 字符串中获取的参数,获取到的也是字符串类型的值数字:当点击菜单切换路由时,此时传过去的 ID 是Numb...原创 2019-05-24 15:26:17 · 5251 阅读 · 2 评论 -
Vuex状态管理相关内容
1、vuex有哪几种属性?答:有五种,分别是 State、 Getter、Mutation 、Action、 Module1.1、statestate为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。1.2、gettergetter有点类似vue.j...转载 2019-03-31 15:00:29 · 166 阅读 · 0 评论