Vue.js 基础语法

矫情吗；* 2021-09-07 08:44 417阅读 0赞

### 二、Vue.js 基础语法 ###

*  1.1 插值
 *   *  文本
     *  v-once
     *  v-html
     *  v-text
     *  v-pre
     *  v-cloak
 *  1.2 动态绑定属性
 *   *  v-bind
 *  1.3 Class 与 Style 绑定
 *   *  绑定 HTML Class
     *   *  对象语法
         *  数组语法
     *  绑定内联样式
     *   *  对象语法
         *  数组语法
 *  1.4 计算属性
 *   *  基本使用
     *  setter 和 getter
     *  计算属性的缓存
 *  1. 5 事件监听
 *   *  基本使用
     *  参数
     *  修饰符
 *  1.6 条件判断
 *   *  v-if
     *  v-else
     *  v-else-if
     *  v-show
 *  1.6 循环遍历
 *   *  v-for
     *  v-for 遍历对象
     *  key
     *  数组更新检测
 *  1.7 双向绑定
 *   *  v-model
     *  修饰符

# 1.1 插值 #

## 文本 ##

数据绑定最常见的形式就是使用“**Mustache**”语法 (双大括号) 的文本插值：

<h2>{
       { message }}</h2>

Mustache 标签将会被替代为对应数据对象上 **message** property 的值。无论何时，绑定的数据对象上 **message** property 发生了改变，插值处的内容都会更新。

除了可以绑定简单的 property 键值。对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

**有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效**。

{
       { var a = 1 }}
    
    
    {
       { if (ok) { return message } }}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
        <div id="app">
            <h2>{
       { message }}</h2>
            <h2>{
       { message }}, World</h2>
            
            <h2>{
       { firstName + lastName }}</h2>
            <h2>{
       { firstName + ' ' + lastName }}</h2>
            <h2>{
       { firstName }} {
       {lastName }}</h2>
            <h2>{
       { count * 2}}</h2>
        </div>
       
    
        <script src="../js/vue.js"></script>
    
        <script> const app = new Vue({ el: '#app', data: { message: 'Hello', firstName: 'Wang', lastName: 'Zhao', count: 100 } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70]

## v-once ##

Vue 是响应式的，当绑定的数据对象对应的 property 发生了改变，插值处的内容都会更新。

但是，在某些情况下，我们可能不希望界面随意的跟随改变。这个时候我们就可以使用 Vue 的指令（指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM) `v-once`。

*  该指令后面不需要跟任何表达式（比如之前的 `v-for` 后面是有跟表达式的）
 *  该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 1]

## v-html ##

某些情况下，我们从服务器请求的数据本身就是一个 HTML 代码，如果我们直接通过`{ { }}`来输出，会将 HTML代码也一起输出。

但是我们希望可以安装 HTML 格式进行解析，并且显示对应的内容，则可以通过`v-html`指令。

*  该指令后面往往会跟上一个 `string` 类型
 *  会将`string`的 html 解析出来并进行渲染

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 2]

## v-text ##

`v-text` 作用和 `Mustache` 比较相似：都是用户将数据显示在界面中，但是需要注意的是，**`v-text`会替换掉标签内的整个内容**。

`v-text` 通常情况下，接受一个 `string` 类型。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 3]

## v-pre ##

`v-pre` 用于跳过这个元素和它子元素的编译过程，显示原本的 `Mustache` 语法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 4]

## v-cloak ##

在某些情况下，我们浏览器可能会直线显示出未编译的`Mustache`标签。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 5]  
       为了避免这种闪动的现象，我们可以使用`v-cloak`指令。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> [v-cloak] { display: none; } </style>
    </head>
    <body>
        
        <div id="app" v-cloak>
            {
       { message }}
        </div>
        <script src="../js/vue.js"></script>
        <script> // 在vue解析之前，div中有一个属性 v-cloak // 在vue解析之后，div中没有一个属性 v-cloak setTimeout(function(){ const app = new Vue({ el: '#app', data: { message: 'Hello' } }) }, 1000) </script>
    </body>
    </html>

![在这里插入图片描述][20210415123233672.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 6]

# 1.2 动态绑定属性 #

前面所学习的指令主要作用是将值拆入到**模板的内容**当中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

*  比如动态绑定`a`元素的`href`属性
 *  比如动态绑定`img`元素的`src`属性

这个使用我们可以使用`v-bind`指令：

*  作用：动态绑定属性
 *  缩写：`:`

## v-bind ##

`v-bind` 用于半丁一个或多个属性值，或者项另一个组件传递`props`。

在开发中，有哪些属性需要动态进行绑定呢？

*  图片的链接`src`
 *  网站的链接`href`
 *  动态绑定一些类、样式等

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 7]

# 1.3 Class 与 Style 绑定 #

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 `attribute`，所以我们可以用 `v-bind` 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 `v-bind` 用于 `class` 和 `style` 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

## 绑定 HTML Class ##

很多时候，我们希望动态的来切换`class`，比如：

*  当数据为某个状态时，字体显示红色
 *  当数据为另一个状态时，字体显示黑色

### 对象语法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .active { color: red; } </style>
    </head>
    <body>
        
        <div id="app">
            <h2 :class="{active: isActive}">{
       { message }}</h2>
        </div>
        <script src="../../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { message: "hello", isActive: true } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 8]  
       上面的语法表示 `active` 这个 `class` 存在与否将取决于数据 property `isActive`。

当`isActive`为`true`时，我们查看对应的代码，可以看到`active`这个`class`确实存在。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 9]

接着我们将`isActive`的值改为`false`，可以看到`active`这个`class`确实也已经消失了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 11]

### 数组语法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .active { color: red; } .fontStyle { font-size: 50px; } </style>
    </head>
    <body>
        
        <div id="app">
            <h2 :class="[aClass, bClass]">{
       { message }}</h2>
        </div>
        <script src="../../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { aClass: 'active', bClass: 'fontStyle', message: 'Hello', } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 12]

## 绑定内联样式 ##

我们可以利用 `v-bind:style` 来绑定一些 CSS 内联样式。

在写 CSS 属性名的时候，比如 `font-size`

*  我们可以使用使用驼峰式（camelCase）`fontSize`
 *  或短横线分割（kebab-case）`font-size`

### 对象语法 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 13]

### 数组语法 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id="app">
            <h2 :style="[style1, style2]">{
       { message }}</h2>
        </div>
        <script src="../../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { message: 'Hello', style1: { fontSize: '50px'}, style2: { color: 'red'} } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 14]

# 1.4 计算属性 #

我们知道，在模板中可以直接通过插值语法显示一些 data 中的数据。

但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。

*  比如我们有`firstName`和`lastName`两个变量，我们需要显示完整的名称。
 *  但是如果多个地方都需要显示完整的名称，我们就需要写多个`{ {firtstName}} { {lastName}}`

## 基本使用 ##

我们可以将上面的代码换成计算属性：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 15]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 16]

## setter 和 getter ##

每个计算属性都包含一个`getter`和一个`setter`

*  在上面的例子中，我们只是使用`getter`来读取
 *  在某些情况下，你也可以提供一个`setter`方法
 *  在需要写`setter`的时候，代码如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 17]

## 计算属性的缓存 ##

我们可能会考率这样的一个问题：

*  `methods` 和 `computed` 看起来都可以实现我们的功能，那么为什么还要多一个计算属性这个东西呢？
 *  原因：**计算属性是基于它们的响应式依赖进行缓存的**，只在相关响应式依赖发生改变时它们才会重新求值。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 18]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 19]

# 1. 5 事件监听 #

在前端开发中，我们需要经常和用户交互。

*  这个时候，我们就必须监听产生的事件，比如点击、拖拽、键盘事件等
 *  在 Vue 中如何监听事件呢？使用 `v-on` 指令
    
     *  作用：绑定事件监听器
     *  缩写：`@`

## 基本使用 ##

这里，我们用一个监听按钮的点击事件，来查看`v-on`的使用

*  下面的代码中，我们使用了`v-on:click="counter++"`
 *  另外，我们可以将事件指向一个在`methods`中定义的函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 20]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 21]

## 参数 ##

当通过`methods`中定义方法时，以供`@click`调用时，需要注意参数问题。

1.  如果该方法不需要额外参数，那么方法后的`()`可以不添加。但是注意：如果方法本身中有一个参数，那么默认将原生事件`event`参数传递进行。
2.  如果需要同时传入某个参数，同时需要`event`时，可以通过`$event`传入事件。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            
            <button @click="btn1Click()">按钮1</button>
            <button @click="btn1Click">按钮1</button>
            
            <button @click="btn2Click">按钮2</button>
            
            <button @click="btn3Click(111, $event)">按钮3</button>
        </div>
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { }, methods: { btn1Click() { console.log('btn1Click'); }, btn2Click(val) { console.log(val); }, btn3Click(val1, event) { console.log(val1); console.log(event); } } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 22]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 23]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 24]

## 修饰符 ##

*  在某些情况下，我们拿到`event`的目的可能是进行一些事件处理
 *  Vue 提供了修饰符来帮助我们方便的处理一些事件：
    
     *  `.stop` \- 调用`event.stopPropagation()`
     *  `.prevent` \- 调用 `event.preventDefault()`
     *  `.{keyCode | keyAlias}` \- 只当事件是从特带你键触发时才触发回调。
     *  `.navtive` \- 监听组件根元素的原生事件
     *  `.once` \- 只触发一次回调。

<button @click.stop=""></button>
    
        
        <button @click.prevent=""></button>
    
        
        <form @submit.prevent></form>
    
        
        <button @click.stop.prevent=""></button>
    
        
        <input @keyup.enter="">
    
        
        <input @keyup.13="">
    
        
        <button @click.once=""></button>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 25]

# 1.6 条件判断 #

`v-if`、`v-else-if`、`v-else`

*  这三个指令与`JavaScript`的条件语句`if`、`else if`、`else`类型
 *  Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件。

## v-if ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 26]

当条件为`false`时，效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 27]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 28]  
       **`v-if`的原理**：

*  `v-if`后面的条件为 false 时，对应的元素以及其子元素不会渲染
 *  也就是根本不会有对应的标签出现在 DOM 中

## v-else ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 29]  
       将条件修改为`true`，效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 30]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 31]

## v-else-if ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id="app">
            当前成绩：{
       { score }}
            <h2 v-if="score >= 90">有秀</h2>
            <h2 v-else-if="score >= 70">良好</h2>
            <h2 v-else-if="score >= 60">及格</h2>
            <h2 v-else>较差</h2>
        </div>
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { score: 100 } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 32]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 33]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 34]

## v-show ##

`v-show`的用法和`v-if`非常类似，也用于决定一个元素是否渲染。

`v-if`和`v-show`对比:

*  `v-if`当条件为`false`时，压根不会有对应的元素在`DOM`中
 *  `v-show`当条件为`false`时，仅仅是将元素的`display`属性设置为`none`而已。

开发中如何选择？

*  当需要在显示与隐藏之间切换很频繁时，使用`v-show`
 *  当只有一次切换时，使用`v-if`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 35]  
       将`v-show`条件改为`true`时，效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 36]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 37]

# 1.6 循环遍历 #

当我们有一组数据需要进行渲染时，可以使用`v-for`来完成

## v-for ##

*  `v-for`的语法类似于`JavaScript`中的`for`循环
 *  格式如下：`item in items`的形式

如果在遍历的过程中，我们需要拿到元素在数组中的索引值

*  语法格式: `(item, index) in tems`
 *  其中的`index`就代表了取出的`item`在数组中的索引值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 38]

## v-for 遍历对象 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <div id="app">
            <ul>
                
                <li v-for="item in info">{
       { item }}</li>
            </ul>
            <ul>
                
                <li v-for="(value, key) in info">{
       { key }} : {
       { value }}</li>
            </ul>
            <ul>
                
                <li v-for="(value, key, index) in info">{
       { key }} : {
       { value }} : {
       { index }}</li>
            </ul>
        </div>
        <script src="../js/vue.js"></script>
        <script> const app = new Vue({ el: '#app', data: { info: { name: '王曌', age: 22, height: 1.72 } } }) </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 39]

## key ##

官方推荐我们在使用`v-for`时，给对应的元素或组件添加上一个`:key`属性

为什么需要这个`key`属性呢？

如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 `key` attribute：

建议尽可能在使用 `v-for` 时提供`key`attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

## 数组更新检测 ##

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

但是，我们如果通过数组索引的方式修改数组，这个改变并不会被加入到响应式系统。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 40]

# 1.7 双向绑定 #

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。

## v-model ##

Vue 中使用`v-model`指令来实现表单元素和数据的双向绑定。

![在这里插入图片描述][20210418135252313.png]

*  当我们在输入框输入内容时
    
     *  因为 `input` 中的`v-model`绑定了`message`，所以会试试将输入的内容传递给`message`，`message`发上了改变
     *  当`message`发生改变时，因为上面我们使用`Mustache`语法，将`message`的值插入到`DOM`中，所以`DOM`会发生响应的改变。
     *  由此，我们便实现了双向绑定通过`v-model`
 *  `v-model`其实是一个语法糖，它的本质上是包含两个操作：
    
     *  `v-bind`绑定一个`value`属性
     *  `v-on`指令给当前元素绑定`input`事件

## 修饰符 ##

*  `lazy`修饰符:
    
     *  默认情况下，`v-model`默认是在`input`事件中同步输入框的数据的。
     *  也就是说，—旦有数据发生改变对应的`data`中的数据就会闫动发生改变。
     *  `lazy`修饰符可以让数据在失去焦点或者回车时才会更新
 *  `number`修饰符:
    
     *  默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
     *  但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
     *  `number`修饰符可以让在输入框中输入的内容自动转成数字类型
 *  `trim`修饰符:
    
     *  如果输入的内容首尾有很多空格，通常我们希望将其去除
     *  `trim`修饰符可以过滤内容左右两边的空格

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70]: /images/20210813/5503304928b3478a8174055d84534874.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 1]: /images/20210813/645d54ca5bd4434aa822cb605588bbed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 2]: /images/20210813/c39e91775d09424abc7bc65a3433017d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 3]: /images/20210813/307ab3531f4143059d98613bf94bb50a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 4]: /images/20210813/dfe823d7e57046c1bb3fc27f67cb3b1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 5]: /images/20210813/f04c311ec580433aadba611fec7e0947.png
[20210415123233672.png]: /images/20210813/7b3895adeef041fb80074a0b3e6c71b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 6]: /images/20210813/5a819d89ad324ff087f9b9400270c186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 7]: /images/20210813/7e8d9f7fafb54288a146d35363d66547.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 8]: /images/20210813/97dcdcd9d23a46e3beeef56eb6b2ab27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 9]: /images/20210813/b961a9e9c6ed4060b89a12f6512d765e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 10]: /images/20210813/f8d11fff907a464f8af9015d6c8ec9b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 11]: /images/20210813/ea02e4c67c814ea399fe345514c53508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 12]: /images/20210813/17cff825a97f4552b1a264aaca176696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 13]: /images/20210813/bea149576e164459b54ffec5ddfc57d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 14]: /images/20210813/1781eb5852634d688aae2c363dc8a910.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 15]: /images/20210813/b81be64617a94632897c622432ee0b5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 16]: /images/20210813/65edde868dfb465f81e1dec84a1b5da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 17]: /images/20210813/fcdf73804e18444ba19a9eea92f5a282.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 18]: /images/20210813/122c53539b7640468fc449a7a94c3efc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 19]: /images/20210813/b09f12031ee5482991cb44092cd394d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 20]: /images/20210813/dc7af70ca4914603ac25420d0a5194fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 21]: /images/20210813/70738468a5754295826a42dca143e7e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 22]: /images/20210813/14ec3b67bb1344e283c80636d30c70c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 23]: /images/20210813/1cc2622705da4ace935f4e683eae6736.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 24]: /images/20210813/4c2200c7ce314ff1b5a68255da882380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 25]: /images/20210813/d73b84da077e48bbac3f38da5caf8515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 26]: /images/20210813/3c4462b05640430e8b6311d87e947df7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 27]: /images/20210813/e94853bfef7542b19017c0a2247329eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 28]: /images/20210813/3bd4f0577c0d407eb1ef19a50cf37cac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 29]: /images/20210813/09d27fefb67b4508bba8e664a62f649a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 30]: /images/20210813/c62975d7219c43d3b977e1b2d7bdbc68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 31]: /images/20210813/c410b14be8cf40378ba4cf346c90a2d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 32]: /images/20210813/e6a3bb2b8c22445b8c2553d994d83e8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 33]: /images/20210813/88d0aa290a2949eab83d04c080846369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 34]: /images/20210813/a3ecdd677fa9420dbe8e987bbc8d20cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 35]: /images/20210813/cbdc51b375144862a6ab37fbf8f3450c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 36]: /images/20210813/5fb99eea341d4a73a17cf3447f5e1c91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 37]: /images/20210813/accf923c1f264b859ea86be17ffbe4c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 38]: /images/20210813/8ecb61d292cb4042bff25783823b51c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 39]: /images/20210813/3b444d64e7ef4066b246706096b55fe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdfemhhb18_size_16_color_FFFFFF_t_70 40]: /images/20210813/7b66f594e6804636b4d6982253496fe5.png
[20210418135252313.png]: /images/20210813/147ffa10e0314d65a0137760ed88a93b.png