vue中this.$el 和 this.$ref
2017-07-19 16:31
393 查看
+ <ul class="pd-select-wheel" ref="wheel">
+ <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
+ </ul>
vue中也是允许进行dome操作的(但是不建议)
这里我就说说 this.$el和this.$ref的区别
this.$el是在mounted中才会出现的,在created的时候是没有的所以我们引用的时候 mounted () {
+ /* 事件绑定 */
+ this.$el.addEventListener('touchstart', this.itemTouchStart)
+ this.$el.addEventListener('touchmove', this.itemTouchMove)
+ this.$el.addEventListener('touchend', this.itemTouchEnd)
它指的是当前组件的的元素
this.$ref
点击打开链接
+ <ul class="pd-select-wheel" ref="wheel">
+ <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
+ </ul>
+ setWheelDeg (updateDeg, type, time = 1000) {
+ if (type === 'end') {
+ this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
+ this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
+ } else {
+ this.$refs.wheel.style.webkitTransition = ''
+ this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
+ }
+ },
+ <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
+ </ul>
vue中也是允许进行dome操作的(但是不建议)
这里我就说说 this.$el和this.$ref的区别
this.$el是在mounted中才会出现的,在created的时候是没有的所以我们引用的时候 mounted () {
+ /* 事件绑定 */
+ this.$el.addEventListener('touchstart', this.itemTouchStart)
+ this.$el.addEventListener('touchmove', this.itemTouchMove)
+ this.$el.addEventListener('touchend', this.itemTouchEnd)
它指的是当前组件的的元素
this.$ref
点击打开链接
+ <ul class="pd-select-wheel" ref="wheel">
+ <li class="pd-select-wheel-item" :class="{'hidden':setHidden(el.index)}" :style="setWheelItemDeg(el.index)" :index="el.index" v-for="el,index in renderData " :key="index">{{el.value}}</li>
+ </ul>
+ setWheelDeg (updateDeg, type, time = 1000) {
+ if (type === 'end') {
+ this.$refs.wheel.style.webkitTransition = `transform ${time}ms cubic-bezier(0.19, 1, 0.22, 1)`
+ this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
+ } else {
+ this.$refs.wheel.style.webkitTransition = ''
+ this.$refs.wheel.style.webkitTransform = `rotate3d(1, 0, 0, ${updateDeg}deg)`
+ }
+ },
相关文章推荐
- vue笔记---vue1.0v-el:和v-ref用法
- IE报vuex requires a Promise polyfill in this browser问题解决
- vue this.$router.push()传参
- Vue中的ref作用详解(实现DOM的联动操作)
- 浅谈vue方法内的方法使用this的问题
- vue做的项目在ie11下一片空白:vue requires a Promise pllyfill in this browser
- vue使用axios中 this 指向问题
- vue之父子组件间通信实例讲解(props、$ref、$emit)
- 01、Vue.js 之初始化el以及数据的绑定说明
- vue(1) -- this.$nextTick
- vue 中ref 的使用注意事项
- vue中使用element-ui的el-input监听不了回车事件???
- 关于在vue中结合数组方法的this的指向问题
- vue中使用ref的好处
- 【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
- vue使用element-ui的el-input监听不了回车事件的解决方法
- 在vue中操作DOM--this.$nextTick()
- vue+eltree
- $(this.el).html 与 this.$el.tml区别
- Vue中"This dependency was not found"问题的解决方法