2024.10月16日- Vue.js（1）

一 VUE概述与环境搭建

1.1 Vue概述

1.1.1 简介

Vue (发音为 /vjuː/，类似 view) 是一款轻量级的用于构建用户界面的 渐进式的JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue 还可以与其他库或框架结合使用，例如 React 或 AngularJS。它还可以与现代工具链和构建工具进行集成，例如 Webpack 或 Gulp，使其更加灵活和可扩展。

Vue2官网：https://v2.cn.vuejs.org/ , Vue 2 已于 2023 年 12 月 31 日停止维护

Vue3官网：https://cn.vuejs.org/guide/introduction

咱们在这里讲的是Vue2…… Vue2会了，Vue3很容易上手

1.1.2 渐进式

所谓渐进式，你可以理解为：就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。不多做职责之外的事情

VUE不强求你一次性接受并使用它的全部功能特性，它允许开发者按照自己的需求逐步地引入Vue的功能和特性。

例如，你可以只使用Vue的数据绑定和模板语法，而不使用Vue的路由和状态管理。

再比如，你现在有一个传统的多页面 Web 应用程序，其中有一个页面是一个简单的待办事项列表，你希望在这个页面中引入 Vue.js 来提供更好的交互性和用户体验。

这个时候，你只需要引入Vue.js核心库，然后使用Vue来管理列表的状态即可。客户无感，并且很平滑的过渡。
一个月后，你引入vue-router 来实现路由导航。
两个月后，引入Vuex 来管理待办事项列表的状态，并使用单文件组件来组织代码等。

通过逐步引入 Vue.js 的各种功能，你可以在不中断现有功能的情况下，改进现有的 Web 应用程序，使其具备更好的交互性和用户体验。这种渐进式的特性使得 Vue.js 成为一个非常灵活和可扩展的前端框架。

传统的前端框架通常会将整个项目的架构和开发方式紧密地绑定在一起，开发者必须按照预先确定的框架结构和规则来进行开发。这种方式在一些大型项目中可能会产生一些问题，比如过于复杂的架构、开发效率低下、难以进行增量开发等。

1.1.3 Vue的核心思想

vue在框架的设计上，采用了两个核心思想，一个是响应式数据绑定（也叫数据驱动），另一个就是组件化。

响应式数据绑定：

在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。

这是通过使用ES5的`Object.defineProperty()`实现数据的观察，或者ES6的`Proxy`实现的。

let name = "michael"
document.getElementById("input").value = name;
name="lucy"                                       <==改变了数据(状态)
document.getElementById("input").value = name;    <==还得操作一次DOM对象

组件化

可以将页面拆分为不同的组件，每个组件都包含自己的HTML模板、JavaScript代码和CSS样式。一是提高代码的复用性，二能降低数据之间的耦合度。组件之间也可以进行通信。一个页面/模块可以由多个组件所组成

1.1.4 框架与库的区别(扩展知识)

所谓框架：就是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。

如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。

提到框架，不得不提一下库。

库：类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等

下图是库和框架的对比。

框架的特点：有一套必须让开发者遵守的规则或者约束

咱们学框架就是学习的这些规则官网

1.2 环境搭建

1.2.1 引入JS

1）网络环境(CDN引入)

<!-- 引用网络上的vue.js    开发版本-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
<!-- 引用网络上的vue.min.js   生产版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>

2）本地环境(离线引入)

生产版本

<!-- 使用本地文件的生产版本, 该版本没有警告和调试功能 -->
<script src="./js/vue.min.js"></script>

开发版本

<!-- vue.js的引用：  使用本地文件，开发版本，带有警告和调试功能 -->
<script src="./js/vue.js"></script>

1.2.2 开发者工具

1. 通过谷歌应用商店安装（国外网站）
2. 极简插件下载（推荐） https://chrome.zzzmh.cn/index
3. github上下载：https://github.com/vuejs/vue-devtools.git

1）离线安装

下载crx插件，按照下图步骤安装即可

安装之后可以F12后看到多一个Vue的调试面板

1.3 设置默认浏览器

第一步：查看您的默认浏览器是什么

方式1：  windows系统的搜索《默认应用》，查看里面的web浏览器
方式2：  创建一个扩展名为html的文件，图标是哪个浏览器，即默认浏览器

第二步：修改google浏览器为默认浏览器

方式1：  打开google浏览器， 有提示，按照提示来，即可。
方式2：  windows系统搜索《默认应用》，查看里面的web浏览器，设置web浏览器

第三步：设置浏览器的启动页为你喜欢的网页

google浏览器的设置--->启动时----->打开特定网页或一组网页--->添加新网页---www.baidu.com-->点击添加

1.4 入门案例演示

1.4.1 核心步骤

引用js文件
准备容器
创建Vue实例
指定配置项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue的入门案例</title><!-- 第一步: 引入vue文件  --><script type="text/javascript" src="../myjs/vue.js"></script>
</head>
<body><div id="app"><h1>你好,{{subject}},我是{{name}}</h1></div>
</body>
<!-- el的两种写法：-1. 在创建Vue实例中，指定该配置项:  el: 'css选择器'-2. 调用Vue实例的挂载方法进行挂载： vm.$mount('css选择器')data的两种写法：-1. 对象写法:  data:{}    -2. 函数写法:    组件开发时，必须使用函数写法，并且不能使用箭头函数形式，否则报错data:function(){return {...}}-->
<script>new Vue({// el: "#app", //指定属性el// data: {   //对象写法//     subject: "java",//     name: "michael"// }data() { // 函数写法return { "subject": "vue", "name": "michael" }}}).$mount('#app') // 调用方法
</script>
</html>

1.4.2 注意事项

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3. root容器里的代码被称为Vue模板
4. Vue实例与容器是一一对应的
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
7. 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

1.4.3 解决F12里的警告

开发Vue时，在使用浏览器的调试面板时，可能会出现以下警告信息：

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

正常情况下：只需要在Vue实例之前配置如下设置，即可

<script type="text/javascript">// 修改配置项的productionTip为false，可以解决f12的第二个警告Vue.config.productionTip = false;const vm = new Vue({// ......})
</script>

但是：该配置，对最新版本的chrome浏览器无效，因为浏览器默认直接回调遇到的第一个script。而引用的vue.js是第一个，里面的值为true。因此手动设置的false，不生效。那么如何解决不生效的问题

第一种方式.  如上配置，然后将vue.js里的延迟时间调大。 参考下图
第二种方式.  直接修改vue.js里的productionTip的值为false，可以搜索这个值

1.5 MVVM模型

在Vue框架中，MVVM是指“模型-视图-视图模型”，是一种用于构建用户界面的架构模式。MVVM将用户界面分为三个主要部分：

模型（Model）：表示应用程序中的数据和业务逻辑。
视图（View）：表示用户界面，即用户可以看到和与之交互的部分。通常是由HTML和CSS组成。
视图模型（ViewModel）：连接模型和视图，充当桥梁。

在Vue中，模型通常是由组件的状态(state)和方法(methods)来表示的。

状态是组件的数据，可以是原始数据类型、对象或数组，这些状态可以通过Vue实例的数据对象来管理。
方法是组件中定义的行为，用于实现模型中的业务逻辑。

在Vue中，视图可以通过模板(template)来描述，模板可以包含指令和表达式，用于实现视图的动态渲染和事件处理。

指令是一种特殊的HTML属性，用于描述视图和模型之间的绑定关系。
表达式是一段JavaScript代码，用于计算视图中的值。

视图模型是Vue中最重要的概念之一，它是连接模型和视图的桥梁。在Vue中，视图模型是由Vue实例来扮演的，Vue实例通过响应式的数据绑定，将视图和模型进行连接。当视图中的状态发生变化时，Vue实例会自动更新模型中的数据，反之亦然。视图模型还负责处理用户与视图之间的交互，例如监听用户输入、处理点击事件等。视图模型可以使用Vue提供的指令和生命周期钩子函数来实现这些功能。

这种架构模式的==好处在于它可以将代码分离成不同的层次，使得开发更容易维护和扩展。视图和模型之间的通信是通过视图模型来实现的，这消除了视图和模型之间的直接耦合，使得应用程序更加灵活和可测试。==

MVVM的优点

1. 数据绑定：
Vue实现了响应式的数据绑定，将视图和数据状态进行绑定，当数据状态发生变化时，视图会自动更新。这样，开发人员可以更容易地管理和更新视图状态，而无需手动操作DOM元素。

2. 模板系统：
Vue提供了一种基于HTML的模板系统，使开发人员可以轻松地创建动态、可重用的UI组件。这种模板系统使得编写复杂的UI界面变得更加简单和直观。

3.事件处理：
Vue提供了一个基于指令的事件处理系统，使开发人员可以通过声明式语法绑定事件处理程序。这种方式让事件处理更加简单和清晰。

总之，在Vue中，MVVM架构提供了一种灵活、可维护的方式来组织应用程序的代码。开发人员可以将代码分离成不同的层次，每个层次都有自己的职责和功能。Vue的MVVM架构还提供了强大的数据绑定、模板系统和事件处理功能，使开发人员可以更加轻松地构建高质量的用户界面。

二模版语法与生命周期

2.1 模版与模版语法简介

2.1.1 什么是模版

模版指的就是VUE开发过程中的容器代码

<div id="demo1"><h1>{{message}},Vue</h1><h1>我是:{{name}}</h1>
</div>

2.1.2 模版语法

模版语法指的就是可以在模版中书写的格式语法。分两类写法，分别是插值语法和指令语法

插值语法：

写法：{{xxx}}        xxx是js表达式，且可以直接读取到data中的响应数据
功能：用于解析标签体内容              比如：  <div> 标签体 </div>    {{schoolName}}

插值语法应用场景：简单的获取data里的数据，并不适合参与复杂的运算

指令语法：

写法：  v-???     比如 v-bind、v-model、v-cloak、v-for、v-if、v-show等
功能:  用于解析标签,   包括标签属性，标签体内容，绑定事件等

指令（Directives）是 Vue 提供的带有 v- 前缀 的特殊标签属性。可以提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

属性绑定指令（v-bind）：
双向绑定指令（v-model）
事件绑定指令（v-on） @
内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

2.2 插值语法

<!-- 第一步：引入js文件 -->
<script src="./js/vue.js"></script>
<!-- 第二步：准备容器 -->
<div id="demo"><!-- 1. 插值语法的格式：{{表达式}}2. 什么是表达式: 可以返回一个值的式子举例说明: i  1+1  a+b  new Date()  Date.now()  a>b?"你真帅":"你真漂亮"     arr[1]   person.name   --><h1>我叫{{name}},我的爱好是{{hobbys}}</h1><h1>我的同伴是{{lover.name}},年龄是{{lover.age}}</h1>
</div>

<script>// 第三步：创建Vue实例对象const vm = new Vue({// 第四步： 配置数据。el:"#demo",data:{name:"佩奇",hobbys:["book","movie","basketball"],lover:{name:"只因哥",age:21}}})
</script>

知识扩展：什么是表达式

是可以得到一个值的式子。

比如：
money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()
Date.now()

2.3 指令语法

2.3.1 属性绑定指令

Vue中有2种数据绑定的方式：

单向绑定（v-bind）：数据只能从data流向页面
- 简便写法：:属性="表达式"
双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
- 该指令只能作用于表单带有value属性的元素上。比如：文本框，密码框,单选框，复选框，多行文本域
- 简便写法：v-model="表达式"

<script src="../js/vue.js"></script>
<body><div id="root">单向数据绑定：<input type="text" v-bind:value="name"><br>双向数据绑定：<input type="text" v-model:value="name"><br>证明是表达式:<br><a v-bind:href="url.toUpperCase()">点我去百度搜索页面</a><br>简化写法:<br><input type="text" :value="name"><br><input type="text" v-model="name"><br><!-- h3不是表单内部的元素，没有value属性，不可以用v-model --><!-- <h3 v-model:name="name">百度</h3> --></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{name:'michael',url:"www.baidu.com"}})</script>
</body>

2.3.2 事件绑定指令

<script type="text/javascript" src="../js/vue.js"></script>

<div id="demo">
<h1>我们正在学习{{name}}技术</h1>

<button v-on:click="f1()">点我提示信息</button> <br>

<button @click="f2()">点我提示信息</button> <br>

<button @click="f3"> 参数:无参的第一种写法，不带括号</button><br>
<button @click="f3()">参数:无参的第二种写法，带括号</button><br>


<button @click="f4">参数:有参，一个参数</button><br>

<button @click="f4($event,100,'zhangsan')">参数:有参，多个参数</button><br>
</div>
<script>
// 该处的定义,Vue模版不能直接访问， vue模版能直接访问Vue实例里的内容
function f1(){
alert("vue是一个构建用户界面的渐进式的javascript框架");
}
const vm = new Vue({
el:"#demo",
data:{
name:"vue",
},
methods:{
f1(){
// alert("vue是一个构建用户界面的渐进式的javascript框架");
//console.log(this); // this是vm实例
},
f2(){
console.log("------调用了f2函数-----");
// this指代的是Vue实例对象
console.log(this)
// 访问Vue实例里的属性name.
console.log(this.name)
},
f3(){
console.log("-----调用了f3函数--------")
},
f4(e,number,name){
console.log(e.target, number,name)
console.log(this)
}
}
})
</script>

2.3.3 事件修饰符(知识扩展)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>

<script src="../js/vue.js"></script>
<style>
*{
margin: 10px;
}
div{
border: 1px red solid;
padding: 10px;
}
.c1{
width: 200px;
height: 100px;
background-color: aqua;
}
.c2{
width: 100px;
height: 50px;
background-color: yellowgreen;
}

ul{
height: 200px;
padding: 20px;

}
li{
height: 100px;
}
.c3{
width: 200px;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>

<div id="demo">

<a :href="url" @click.prevent="f1()">点我去百度搜索页面</a> <br><br>

<div class="c1" @click="f1()">
<button @click.stop="f1()">阻止事件冒泡的演示</button> <br>

<a :href="url" @click.stop.prevent="f1()">点我去百度搜索页面</a>
</div>

<div class="c1">
<button @click.once="f1">事件只触发一次</button>
</div>


<div class="c1" @click.capture="f2(1)">
<div class="c2" @click="f2(2)">
捕获阶段发生
</div>
</div>
<div class="c1" @click.self="f2(1)">
div1
<div class="c2" @click="f2(2)">
self修饰词
</div>
</div>

<div class="c3" @scroll.passive="f3()">
<ul >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</body>
<script>
new Vue({
el:"#demo",
data:{
url:"https://www.baidu.com"
},
methods:{
f1(){
alert("同学你好");
},
f2(number){
console.log(number);
console.log(event.target)
},
f3(){
for(var i=0 ; i < 100000; i++){
console.log(10)
}
console.log("终于打印完了")
}
}
})
</script>
</html>

2.3.4 键盘事件

<!--

1. 键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用
2. Vue中常用的按键别名：回车：enter删除：delete (捕获“删除”和“退格”键)退出：esc空格：space换行：tab (特殊，必须配合keydown去使用)上：up下：down左：left右：right
3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发- 配合keydown使用：正常触发事件- 可以使用keyCode去指定具体的按键，比如：@keydown.13="showInfo"，但不推荐这样使用

4. Vue.config.keyCodes.自定义键名 = 键码，可以自定义按键别名(不推荐)
-->

2.3.5 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容，不能识别HTML标签
v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容，并能将HTML标签的样式呈现出来。

<body><div id="demo">v-text的渲染效果: <p v-text="content"></p>v-html的渲染效果: <p v-html="content"></p></div>
</body>
<script>new Vue({el: "#demo",data: {content: `我是一个 <span> span标签</span>`}})
</script>

2.3.6 条件渲染指令

条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-show
1. 作用：控制元素显示隐藏
2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
3. 原理：切换 display:none 控制显示隐藏
4. 场景：频繁切换显示隐藏的场景
v-if
1. 作用：控制元素显示隐藏（条件渲染）
2. 语法： v-if= "表达式" 表达式值 true显示， false 隐藏
3. 原理：基于条件判断，是否创建或移除元素节点
4. 场景：要么显示，要么隐藏，不频繁切换的场景

<!-- 
条件渲染：1. v-if写法：(1) v-if="boolean表达式"(2) v-else-if="boolean表达式"(3) v-else适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注意：v-if可以与v-else-if、v-else一起使用,但要求结构不能被打断2. v-show写法：v-show="boolean表达式"false:  表示不显示，底层本质添加内联样式style="display:none;" true： 表示显示，底层的本质是去掉了内联样式适用于：切换频率较高的场景特点：不展示的DOM元素不是被移除，而是使用dispaly:none进行隐藏3. 备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到         
--><div id="demo"><h1 v-show="s1">欢迎来到{{name}}学习</h1><h1 v-if="1===1">欢迎来到{{name}}学习</h1>
<!-- <div><h1>n当前的值:{{n}}</h1><button @click="n++">点我n+1</button><h2 v-if="n===1">java</h2><h2 v-if="n===2">c++</h2><h2 v-if="n===3">Vue</h2></div>     -->
<!-- v-else-if指令：写法：v-else-if="xxx"   xxx是条件表达式逻辑：  写在上面的条件不成立时，才会执行到v-else-if里的条件判断注意：  v-else-if与上面的指令v-if中间不能被其他内容隔断开--><!-- <div><h1>n当前的值:{{n}}</h1><button @click="n++">点我n+1</button><h2 v-if="n===1">java</h2><h2>同学你好</h2><h2 v-else-if="n===2">c++</h2><h2 v-else-if="n===3">Vue</h2></div> -->
<!--  v-else:  写法：  v-else  后面不用写表达式逻辑：  上面的条件都不成立时，才会执行v-else注意：  也不能与上面的v-if、v-else-if中间被其他内容隔断开。 --><!-- <div><h1>n当前的值:{{n}}</h1><button @click="n++">点我n+1</button><h2 v-if="n===1">java</h2><h2 v-else-if="n===2">c++</h2><h2 v-else-if="n===3">Vue</h2><h2 v-else>同学你好</h2></div> --><!-- 如果不想破坏结构：可以使用template标记与v-if进行配合。 注意不能使用v-show--><template v-if="n===2"><h2 >张三</h2><h2 >李四</h2><h2 >王五</h2></template></div>
</body>
<script>new Vue({el:"#demo",data:{name:"水利电力学院",s1:true,n:1}})
</script>

2.3.7 列表渲染指令

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字

<!-- 
v-for 指令
（1）用于展示列表数据
（2）语法：v-for = "(item, index) in xxx " :key=“yyy”
（3）可遍历：数组、对象、字符串(用的少)、指定次数(用的少)
-->
<!-- 第二步: 准备容器  -->
<div id="demo"><h1>人员列表</h1><ul><h1>v-for 遍历数组</h1> <!-- <li v-for="p of persons">{{p}}</li> --><li v-for="(p,index) of persons" :key="index">{{index}} - {{p}}</li>
<h1>v-for 遍历对象</h1><li v-for="(value,key,index) of student" :key="index">{{index}} - {{key}} - {{value}}</li>
<h1>v-for 遍历字符串</h1><li v-for="(char,index) of str" :key="index">{{index}} - {{char}}</li>
<h1>v-for 遍历数字</h1><li v-for="(n,index) of number" :key="index">{{index}} - {{n}}</li></ul>
</div>

<script>new Vue({el:"#demo",data:{persons:[{id:1001,name:"张三",age:30},{id:1002,name:"李四",age:28},{id:1003,name:"王五",age:32},{id:1004,name:"赵六",age:22}],student:{id:10001,name:"苏大强",age:58,gender:"男"},str: "hello",number:5}})
</script>
</html>

v-for中的key

语法： :key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key： 因为Vue在发现数据变化时，会重新渲染页面。这个过程会先生产虚拟DOM。然后和之前的虚拟DOM做比较。原理主要是判断节点的key是否相同，如果相同即继续比较节点里的内容，如果不同，生成新的真实DOM。相同的地方直接复用上一次的真实DOM.

实例代码：

<body><!-- 面试题:react、vue中的key有什么作用？
1.虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成新的虚拟DOM随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：--1.若虚拟DOM中内容没变，直接使用之前的真实DOM!--2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中的真实DOM。(2).旧虚拟DOM中未找到与新虚拟DOM相同的key--1.创建新的真实DOM，随后渲染到到页面。
3.用index作为key可能会引发的问题：(1)若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。(2)如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
4．开发中如何选择key？：(1)最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。(2)如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。--><div id="demo"><h1>人员列表</h1><button @click="add">点我添加一个人员信息</button><ul><li v-for="(p,index) of persons" :key="p.id">{{p.id}} - {{p.name}}  <input type="text"></li></ul></div>
</body>
<script>new Vue({el:"#demo",data:{persons:[{id:1001,name:"张三",age:30},{id:1002,name:"李四",age:28},{id:1003,name:"王五",age:32}]},methods: {add(){var p =  {id:1004,name:"赵六",age:22}// this.persons.unshift(p);this.persons.push(p)}},})
</script>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

2.3.8 额外几个指令

1）v-cloak

<!-- v-cloak:应用场景：假如：网络不好，  我们引用的服务端/网络上的vue.js/vue.min.js  在30秒之内还没有加载过来，那么浏览器的页面应该如下效果"学生姓名{{studentName}}"也就是说：如果是上述显示效果，那么客户体验度不够好。
作用：  vue提供的一个没有值的指令  直接在开始标签里使用1.  需要配合style样式。一起使用,  如果还没有成功加载js文件，就通过style的属性选择器来隐藏掉该HTMLelement2.  vue在成功加载容器时，如果发现有该指令，就会将该指令从标签中移除。
如何测试：   网络延迟不好演示，那就使用剪切掉script来表示没有加载成功，这样来演示     -->

<body><div id="app"><span v-cloak>学生姓名{{studentName}}</span></div><script>const vm = new Vue({el: "#app",data: {studentName: "michael"}})</script>
</body>

2）v-once

<body>
<div id="app">
<button @click="n++">点我n自动加1</button> <br>
<span v-once>n的值为:{{n}}</span> <br>
<span>n的值为:{{n}}</span>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
n: 1
}
})
</script>
</body>

3）v-pre

<!--  v-pre:1.跳过其所在节点的编译过程。   2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。 
怎么理解编译： 就是vue在发现某一个节点时，需要去里面查看是否有自己的模版语法，如果有语法，就要替换成实例里的内容不编译： 就是不去查看是否有自己的模版语法了。-->

<body><div id="app"><ul><li v-pre>员工列表{{schoolName}}</li></ul><ul><span>{{name}}</span></ul></div><script>const vm = new Vue({el: "#app",data: {schoolName: "吉大",name: "michael"}})</script>
</body>