登录 |  注册
首页 >  编程技术 >  Vue入门学习教程 >  Vue实例

Vue实例

1. 前言

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

2. 优科解释

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

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

3. 创建 Vue 实例

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

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

接下来我们用一个简单的例子来学习如何创建 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。当然,这并不是必须的,你也可以给他其他任意的变量名。

3.1 vue 实例参数

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

  • el 属性

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

<<上一课程
下一课程>>
推荐文章
  • 1.前言本小节将带领大家学习一下如何安装Vue。包括独立版本、CDN、NPM、CLI工具四种不同的安装方法。2.独立版本我们可以在Vue.js的官网上直接下载vue.min.js并用script标签引入。下载Vue.js安装步骤:打开Vue.js下载地址并拷贝所有代码。创建vue.min.js文件,
  • 大家好,今天我们开始一个新专题—Vue。这个专题我们重点针对如何使用Vue开发项目。本文我们主要先介绍一下Vue是什么?1.什么是Vue什么是Vue呢?Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核
  • 什么是高并发?高并发(HighConcurrency)是互联网分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计保证系统能够同时并行处理很多请求。高并发相关常用的一些指标有响应时间(ResponseTime),吞吐量(Throughput),每秒查询率QPS(QueryPerSecond)
  • C++有用的资源以下资源包含了C++有关的网站、书籍和文章。请使用它们来进一步学习C++的知识。C++有用的网站C++ProgrammingLanguageTutorials−C++编程语言教程。C++Programming−这本书涵盖了C++语言编程、软件交互设计、C++语言的现实生活应用。C++
  • C++Web编程什么是CGI?公共网关接口(CGI),是一套标准,定义了信息是如何在Web服务器和客户端脚本之间进行交换的。CGI规范目前是由NCSA维护的,NCSA定义CGI如下:公共网关接口(CGI),是一种用于外部网关程序与信息服务器(如HTTP服务器)对接的接口标准。目前的版本是CGI/1.
  • C++异常处理异常是程序在执行期间产生的问题。C++异常是指在程序运行时发生的特殊情况,比如尝试除以零的操作。异常提供了一种转移程序控制权的方式。C++异常处理涉及到三个关键字:try、catch、throw。throw:当问题出现时,程序会抛出一个异常。这是通过使用throw关键字来完成的。cat
学习大纲