学习vue中遇到的一些注意事项

最新推荐文章于 2024-10-20 20:56:38 发布

原创最新推荐文章于 2024-10-20 20:56:38 发布 · 536 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了 Vue.js 中的实用技巧，包括事件绑定、Prop 的使用、数组更新问题、v-for 循环中 key 的作用、路由配置及动画实现等关键知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、注册事件 .native

<my-component v-on:click.native="doTheThing"></my-component>

2、修改prop的数据

定义一个局部变量，并用prop的值初始化它。

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

3、遍历的数组值更新了，值也赋值了，为什么视图不更新？

this.$set(obj,item,value)

var vm = new Vue({

data: {

userProfile: {

name: 'Anika'

}

})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

对已有对象赋值多个新属性

this.userProfile = Object.assign({}, this.userProfile, {

age: 27,

favoriteColor: 'Vue Green'

})

4、v-for循环加上key 否则会报红

</div>

5、vue-router实现登录和跳转到指定页面，vue-router传参

定义路由的时候可以配置 meta 字段

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

6.vue事件冒泡问题

<div class="signList" @click.stop>

7.动画

:style="{transform: 'rotate(' + 360 / imgArr.length * index + 'deg)'}"

document.querySelector('.train-station dt').style.transform = `rotate(${this.count}deg)`