vue有用知识点

1. data数据的键值可以用 {{msg}} 也可以使用 {{this.msg}}

<template>
  <div class="hello">
    <h4>{{this.msg}}</h4>
    <h4>{{msg}}</h4>
  </div>
</template>

2.事件@click不使用methods中的函数而直接对data中的数据操作的时候，不能加this.msg(这样会报错),而是直接用msg

<template>
  <div class="hello">
    <h4>{{msg}}</h4>
    <button type="button" @click="msg='welcome to QD'">切换</button>
  </div>
</template>

3.v-for

    3.1    v-for中,要使用data中的数据时直接调用键值对，不能加this.调用（会报错）

<template>
  <div class="hello">
    <ul>
      <li v-for="(item,index) in arrList">
        <div><span>{{msg}}</span> <span>{{item}}</span> <span>{{index}}</span></div>
      </li>
    </ul>
  </div>
</template>

    3.2    遍历要加key属性（提高性能），key的值一般为接口返回对象的id值，若无，则使用index下标值

    3.3    将v-for使用在template下，template不会作为元素出现在html页面中

<template>
  <div class="hello">
    <div>
      <template v-for="(item,index) in arrList">
         <div v-text="item.name"></div>
         <p v-text="item.age"></p>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      arrList : [{name:'aaa',age:22},{name:'bbb',age:33},{name:'ccc',age:44}],
      msg : 'Hello World'
    }
  }
}
</script>

4.    7个数组变异方法

       push()    pop()    shift()    unshift()    splice()    sort()    reverse()

5.    生命周期勾子（共11个）

        beforeCreate(){},

        created(){},

        beforeMount(){},

        mounted(){},

        beforeUpdate(){},

        updated(){},

        beforeDestroy(){},

        destoryed(){}

6.    v-html,v-text,{{}}  不建议使用{{}}，改用v-text

7.    v-if,v-else-if,v-else：元素的删除与添加

       v-show（性能高）:css控制

8.    data中的数据不能相互使用

9.    计算属性 computed

    9.1    计算属性有缓存的功能(使用方法的话一旦改变data中的任何数据，方法都会重新计算一次)

    9.2    计算属性的setter    和    getter

10.    给组件绑定原生事件 @click.navtive="show"

<template>
  <div class="hello">
    <div>
      <Mheader   @click.native="show"></Mheader>
    </div>
  </div>
</template>

    如果说Mheader组件中有点击触发方法的话，方法中调用$emit("click")的话，方法也会执行

11.    子向父传递

        注意：自定义事件中不能写参数（html中） @handleClick="show"