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

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 v-for="item in items" :key="item.id">

<!-- 内容 -->

</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)`