TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

最新文章

2021-04-06

Vant之Area 省市区选择使用(全国数据获取)

Vant之Area 省市区选择使用(全国数据获取)
一、效果参考全国范围内容的省市区选择,重要的就是数据来源。二、Area组件Area 省市区选择 通常与 弹出层 组件配合使用。 (注明: 在AddressEdit 地址编辑也是有地区的选择)组件数据格式说明整体是一个 Object,包含 province_list, city_list, county_list 三个 key。 每项以省市区编码作为 key,省市区名字作为 value。编码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。如北京编码为 11,以零补足 6 位,为 110000。 AreaList具体格式如下: { province_list: { 110000: '北京市', 120000: '天津市' }, city_list: { 110100: '北京市', 110200: '县', 120100: '天津市', 120200: '县' }, county_list: { 110101: '东城区', 110102: '西城区', 110105: '朝阳区', 110106: '丰台区' 120...

Vue

153 阅读
2021年04月06日
153 阅读
1 评论
2021-04-06

Vue中数据更新而界面不更新的怪异问题(Vue中$set的使用)

Vue中数据更新而界面不更新的怪异问题(Vue中$set的使用)
一、问题描述是否有遇到过,数据更新后,界面并没更新的现象?排除数据请求时的先后问题,这是怎么回事呢?基本的问题就是当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。二、问题分析如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。受 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。三、解决方式Vue不允许在已经创建的实例上动态添加新的根级响应式属性。向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性,这里就提供了一个关于Vue.set的使用,从而来解决这一类问题。Vue.set( target, propertyName/index, value ) 参数: ...

Vue

107 阅读
2021年04月06日
107 阅读
0 评论
2021-04-06

Vue元素动态计算技巧

Vue元素动态计算技巧
一、概述在项目中,经常也都会遇到宽度或高度需要动态计算的。即当获取到数据之后,等待数据渲染完成,接着就需要动态设置外层盒子的宽度或高度来达到预期效果。而添加设置的时候,这就会遇到各种问题。二、元素的获取在Vue中想要获取到页面中某个元素或组件,怎么办?通过vm.$refs对象,就可以获取到持有注册过 ref 特性 的所有 DOM 元素和组件实例。# 元素定义,需要添加上ref属性 <div class="box" ref='scollView'></div> # 元素的获取 var oBox = this.$refs.scollView三、组件中元素获取如果页面直接是一个DOM元素,因为获取到可以直接操作。但要是获取到是一个组件时,如何进行操作呢?这里少不了vm.$el,是获取Vue 实例使用的根 DOM 元素。# 这里是for的操作,所以有多个组件 <UserAppraiseView ref='userAppraise' v-for='(item, index) in goodsDetail.appraise.list' :...

Vue

102 阅读
2021年04月06日
102 阅读
0 评论
2021-04-06

Vue商品详情页(过渡效果)

Vue商品详情页(过渡效果)
一、概述Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。但有时候并不能满足我们现有需求时,这时候自定义进入、离开和列表的过渡效果。二、transitio组件Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。# 适合的场景 - 条件渲染 (使用 v-if) - 条件展示 (使用 v-show) - 动态组件 - 组件根节点三、过渡中的类型在进入/离开的过渡中,会有 6 个 class 切换,其中<transition>元素可以添加name属性。# 组件说明 <transition name='xxx' > 需要添加过渡的内容 </transition> # 类名说明 # name属性拼接上以下内容 xxx-enter (进入)过渡开始状态 xxx-enter-to (进入)过渡结束的状态 xxx-enter-active (进入)过渡时间、延迟、曲线 xxx-leave (离开)过渡开始状态 xxx-leave-to (离开)过渡结束的状态 xxx-leave...

Vue

110 阅读
2021年04月06日
110 阅读
0 评论
2021-04-06

Vuex状态管理

Vuex状态管理
一、什么是VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。二、为什么要使用Vuex1.场景一:对于页面中,多层级嵌套组件是非常常见的,例如A组件嵌套B组件,B组件嵌套C组件,想要从C组件传递参数到A组件怎么办?1、C组件先通过自定义事件方式,将数据传到B组件【子组件传递参数到父组件】 2、接着在B组件中通过自定义事件方式,将数据传递到A组件【子组件传递参数到父组件】2.场景二:兄弟组件中,例如A组件中,包含了B组件和C组件。此时需要的是B组件和C组件需要相互传递参数,怎么办?1、A组件作为中转站一样 2、B组件先将参数传递给A组件【子组件传递参数到父组件】,A组件再将参数传递给C组件【父组件传递参数到组件】 3、C组件先将参数传递给A组件【子组件传递参数到父组件】,A组件再讲参数传递给B组件【父组件传递参数到组件】3.说明:上面列举的场景都是非常常见的,实际操作组件甚至更多的时,代码会变的非常脆弱,通常会导致无法维护的代码。因此,我们为什么不把组件的共享状态抽取出来...

Vue

81 阅读
2021年04月06日
81 阅读
0 评论