3、vue(2)

1、vue中 key 值的作用

key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

key作用2，每次切换时，输入框都将被重新渲染

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

2、vue-cli如何进行工程升级？

推荐使用：

//升级插件
npm-check-updates

首先安装插件，建议用 npm 源安装，测试时用 cnpm 安装未下载成功：

npm install npm-check-updates -g

然后在待升级工程的目录结构下，命令行输入：

ncu

然后升级所有版本，命令行输入：

ncu -a

再输入：

npm install

3、vue事件中如何使用event对象？

注意在事件中要使用 $ 符号

//html部分
<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>
//js部分
showEvent(event){
    //获取自定义data-id
    console.log(event.target.dataset.id)
   //阻止事件冒泡
    event.stopPropagation(); 
    //阻止默认
    event.preventDefault()
}

4、什么是$nextTick？

因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

<div id="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
    el : "#app",
    data:{
        showDiv : false
    },
    methods:{
        getText:function(){
            this.showDiv = true;
            this.$nextTick(function(){
                  var text = document.getElementById('div').innnerHTML;
                 console.log(text);  
            });
        }
    }
})
</script>

5、v-for 与 v-if 的优先级

当它们处于同一节点，v-for的优先级比v-if更高