您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
首页- 编程课程导航- Vue 实例
←Vue 安装
Vue 常用指令→

Vue 实例

本节开始我们将正式进行 Vue 基础知识的学习。本小节我们将先介绍什么是 Vue 实例，如何创建 Vue 实例，Vue 实例上的参数，以及如何使用 Vue 开始工作。Vue 实例上的和很多，本小节我们不会详细介绍所有的和，同学们目前只需要了解什么是 Vue 实例以及如何创建它。

每个 Vue 应用都是通过用 Vue 创建新的 Vue 实例开始的。 — 官方定义

Vue 实例是通过 Vue 传入对应 options 参数创建出的实例对象。

Vue 实例的创建是通过 new Vue(options) 来实现的，options 是创建 vue 实例传递的参数。它是对象：

//最简单的 options 对象示例：@H__34@
{@H__34@
  el:@H__34@ "#app"@H__34@,@H__34@
  data@H__34@(@H__34@)@H__34@ {@H__34@
    return@H__34@ {@H__34@}@H__34@
  }@H__34@,@H__34@
}@H__34@

接下来我们用简单的例子来学习如何创建 vue 实例：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  var vm = new Vue({
    el: "#app"
  })
</script>

解释
JS 第 3-10 行，我们使用 Vue 创建了实例对象，在时我们传入了对象参数，该对象只有 el 。

在之前的小节中我们学习到Vue是MVVM框架，所以在日常开发中我们通常将 Vue 实例的变量名取为 vm。当然，这并不是必须的，你也可以给他其他任意的变量名。

在上述的例子中，我们首先使用 Vue 创建新的 Vue 实例，并在创建实例的时候传入了选项对象，接下来我们逐个分析每个对象的意义。

el 表示 Vue 实例要挂载的节点，该的值可以是 CSS 选择器，也可以是 HTMLElement。

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message }}
    </@H__34@div@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@>@H__34@@H__34@
      {{ message }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ '#app'@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ 'Hello Imooc !'@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@

解释:
JS 第 3-10 行，我们创建了 Vue 实例，将它挂载在 id 为 app 的 html 元素节点上。
HTML 第 2-4 行，我们定义了 id 为 app 的 DOM 元素。所以我们看到 id 为 app 的节点内 {{ message }} 被替换成了 Hello Imooc !，而未给定 id 的元素并未受到 Vue 的作用。

同样，我们可以使用 HTMLElement 的方式给 el 赋值：

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ document.@H__34@getElementById@H__34@(@H__34@'app'@H__34@)@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ 'Hello Imooc !'@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@

解释:
JS 第 4 行，我们使用 HTMLElement 的方式给 el 赋值。

data 表示 Vue 实例中的数据，data接收 Object 或者返回对象数据的 Function。当 Vue 实例被创建时，它将 data 对象中的所有的加入到Vue 的响应式系统中。当这些的值发生改变时，视图也会同时更新。

data 为对象的示例：

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ "#app"@H__34@,@H__34@
      data:@H__34@ {@H__34@
        message:@H__34@ 'Hello Imooc !'@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@

/ vue 实例上的 message 数据
vm.message = 'Hello 句号 ！'

解释：
JS 第 3-5 行，我们定义了 data 数据，在中可以看到已经出 message 的值。当我们打开控制台， vm 上的 message 时，会同时做更新。

data 为的示例：

var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
  el:@H__34@ "#app"@H__34@,@H__34@
  data@H__34@(@H__34@)@H__34@ {@H__34@
    return@H__34@ {@H__34@
    	message:@H__34@ 'Hello Imooc !'@H__34@
    }@H__34@
  }@H__34@
}@H__34@)@H__34@

TIPS：只有当实例被创建时就已经存在于 data 中的才是响应式的。

也就是说在实例创建之后的新的不是响应式的，比如：


<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message }} {{ date }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ "#app"@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ 'Hello Imooc !'@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@

// vue 实例上的 date 数据@H__34@
vm.@H__34@date =@H__34@ "2020-08-08"@H__34@

解释：
在 HTML 第 2 行，我们使用了数据 date 和 message，但是在创建 Vue 实例的时候我们只初始化了 message 而没有 date 的值，当我们在控制台实例上的 date 时，视图并不会更新。

如果有一些在之后的过程中需要使用，那么你可以在创建Vue实例的时候设置一些初始值。比如：

data:@H__34@ {@H__34@
  date:@H__34@ ''@H__34@,@H__34@
  count:@H__34@ 
}@H__34@

注意一下，如果 data 中初始化的是 Object 类型的，那么你需要将 Object 的也同时初始化。例如：

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message.title }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ "#app"@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ {@H__34@}@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@


// vue 实例上的 date 数据@H__34@
vm.@H__34@message.@H__34@title =@H__34@ "Hello Imooc !"@H__34@

解释：
在 HTML 第 2 行， 我们使用了数据 message.title，但是在创建 Vue 实例的时候我们只初始化了 message 对象，但是该对象上并没有 title ，所以，当我们在控制台上 message.title 时，试图不会做更新。

我们只需要给 message 初始化 title：

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message.title }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ "#app"@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ {@H__34@
            title:@H__34@''@H__34@
          }@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@


//  message.title@H__34@
vm.@H__34@message.@H__34@title =@H__34@ "Hello Imooc !"@H__34@
// 正常 Hello Imooc !@H__34@

前面我们提到了，想要在中使用数据，首先要在 data 中初始化。有些同学可能并不想在创建实例的时候就初始化这些。那么，我们可以利用 Vue 实例的 $set 来响应式数据，例如：

<!DOCTYPE html>@H__34@
  <@H__34@html@H__34@ lang@H__34@=@H__34@"@H__34@en"@H__34@@H__34@>@H__34@@H__34@
  <@H__34@head@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ charset@H__34@=@H__34@"@H__34@UTF-8"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ name@H__34@=@H__34@"@H__34@viewport"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@width=device-width, initial-scale=1.0"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@@H__34@ http-equiv@H__34@=@H__34@"@H__34@X-UA-Compatible"@H__34@@H__34@ content@H__34@=@H__34@"@H__34@ie=edge"@H__34@@H__34@>@H__34@@H__34@
    <@H__34@title@H__34@>@H__34@@H__34@Document</@H__34@title@H__34@>@H__34@@H__34@
  </@H__34@head@H__34@>@H__34@@H__34@
  <@H__34@body@H__34@>@H__34@@H__34@
    <@H__34@div@H__34@ id@H__34@=@H__34@"@H__34@app"@H__34@@H__34@>@H__34@@H__34@
      {{ message.title }}
    </@H__34@div@H__34@>@H__34@@H__34@
  </@H__34@body@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ src@H__34@=@H__34@"@H__34@https://unpkg.com/vue/dist/vue.js"@H__34@@H__34@>@H__34@@H__34@@H__34@</@H__34@script@H__34@>@H__34@@H__34@
  <@H__34@script@H__34@ type@H__34@=@H__34@"@H__34@text/javascript"@H__34@@H__34@>@H__34@@H__34@
    var@H__34@ vm =@H__34@ new@H__34@ Vue@H__34@(@H__34@{@H__34@
      el:@H__34@ "#app"@H__34@,@H__34@
      data@H__34@(@H__34@)@H__34@ {@H__34@
        return@H__34@ {@H__34@
          message:@H__34@ {@H__34@}@H__34@
        }@H__34@
      }@H__34@
    }@H__34@)@H__34@
  @H__34@</@H__34@script@H__34@>@H__34@@H__34@
</@H__34@html@H__34@>@H__34@@H__34@


//使用 vm.$set 数据@H__34@
vm.@H__34@$set@H__34@(@H__34@vm.@H__34@message,@H__34@ 'title'@H__34@,@H__34@'Hello Imooc !'@H__34@)@H__34@
// 正确 Hello Imooc ! @H__34@

解释：
HTML 第 2 行，我们使用了 message.title 的数据，但是，在创建 Vue 实例的时候并没有给 message 初始化 title ，所以我们通过 $set 的方式给 message 。

除了$set，Vue 实例还暴露了其他有用的实例与。它们都有前缀 $。这些实例我们会在后续的章节中逐步介绍，这里大家只需要对它有个印象。

Vue的实例并不只接收这两个选项，还有诸如methods、computed、watch、props等选项，这些选项我们在接下来的小节中会逐个详解。，我们只需要先对Vue实例有初步的了解就可以了。

本小节对 Vue 实例进行了简单的介绍，主要有以下知识点：

←Vue 安装
Vue 常用指令→
联系我

联系我

602392714

清零编程清零编程群

置顶