2020-9-4 vue

164 阅读1分钟

router

vue this.$router.push()传参

params 传参

注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据

this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

取数据:this.$route.params.paicheNo

query传参

this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})

取数据:this.$route.query.paicheNo

scoped

作用功能: 实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块,但使用公共组件时会造成很多困难

实现原理: 通过观察DOM结构可以发现:vue通过在DOM结构以及css样式上加上唯一的标记,保证唯一,达到样式私有化,不污染全局的作用,如图,样式属性上也会多一个该字符,以保证唯一

由此可知,添加scoped属性的组件,为了达到不污染全局,做了如下处理: 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局 如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件( 注意 )

父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的样式的(原因在原理中可知),虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件 父组件有scoped属性,子组件无,父组件也无法设置子组件样式,因为父组件的所有标签都会带有data-v-469af010唯一标志,但子组件不会带有这个唯一标志属性,与1同理,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件 父子组建都有,同理也无法设置样式,更改起来增加代码量

数据更新及页面刷新

push(),pop(),shift(),unshift(),splice(),sort(),reverse()可被vue检测到 filter(), concat(), slice()。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组。

vue不能检测以下变动的数组: 1、利用索引直接设置一个项时,vm.items[indexOfItem] = newValue 2、修改数组的长度时,例如: vm.items.length = newLength

Vue.set(object, key, value) this.$set(this.someObject,'b',2)

异步更新队列

Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用

$nextTick()返回一个 Promise 对象

Object.assign

用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。

vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })
注:object必须是已经声明的对象

vue多层循环,动态改变数据后渲染的很慢或者不渲染 可在动态改变数据的方法,第一行加上

this.$forceUpdate();

python小笔记

python生成2位小数点的随机数

#coding=utf-8 import random #生成随机数,浮点类型 a = random.uniform(10, 20) #控制随机数的精度round(数值,精度) print round(a, 2)