arcgis vue 点位无法显示_「教程」VueJS基础教程 #1 - Vue实例

大家好，欢迎来到新一期的VueJS教程，我是哈默老师，这一期给大家讲解的是Vue实例。主要讲的是什么是Vue实例，以及它是怎么帮助我们把数据显示到页面上的。

初始代码

首先我们来看一个实际的例子。

左边有一个div，div里有h1来作为标题，右边JS文件中定义了一个变量product，值为Balls。

问题

现在要解决的问题是我们要把变量product保存的值显示到index.html中的h1标签中。

我们分为下面的几个步骤。

首先，我们要引入VueJS的cdn文件到我们项目中。

BootCDN里找到VueJS框架的地址并复制

粘贴地址，引入VueJS框架的CDN地址

接下来，在我们的index.js文件中，我们会定义下列代码。

var app = new Vue() 创建Vue实例

同时，在index.html中，我们会使用JS表达式，就像这样。

index.html中，我们使用{{}}语法来展示product数据。

这时候，在我们的浏览器页面上就会出现Balls。

浏览器上，我们就看到了我们定义的Balls数据。

欧耶！这样一来，我们就实现了最开始的目标：把product变量保存的值展现到浏览器页面上。但是我们是怎么做到的呢？不妨来分析一下。

什么是Vue实例？

我们在index.js中定义了一个Vue实例，在这个Vue实例中我们可以传递很多很多不同的配置项。这样的配置就让我们的Vue实例有了不同的能力，比如保存数据(用data配置)和实现功能(用methods等定义)。

var app = new Vue()这一行代码，就定义了我们的(根)实例。

接下来我们可以在Vue()这个函数的参数里传递参数，作为配置项，如下图。

给new Vue()根实例填写配置项options。

将Vue实例与HTML元素进行关联

Vue实例可以通过el配置项跟某个HTML元素建立关联，关联了之后我们就可以在对应的HTML元素里展示我们下一个配置项data里的数据。

配置项el用来配置与哪个HTML元素进行关联，以图中为例，Vue实例与id为app的元素进行了关联。

保存数据

Vue实例里面另一个配置项data就是用来保存数据的，具体的方式如下图。

配置项data用来保存数据，我们这里保存了2个数据，product和drinks。

展示到页面上

如果想要让我们data里的product或者drinks展示到页面上的话，在index.html中，我们需要使用{{}}这种语法，如下图。

{{}}语法用来展示对应的数据，这里展示的是product。

此时，浏览器页面上展示的是Balls。

浏览器页面上展示product保存的值。

我们可以改成其他任意的数据，比如drinks。

{{}}里我们改成drinks。

这个时候，我们再来看到浏览器上。

浏览器页面上，展示出了drinks保存的值。

响应式

之所以Vue能展示我们定义在data里的product，是因为Vue是响应式的。换句话说，所有在index.html中使用到product的地方，都会与data里的product相关联。这就意味着，不仅仅Vue能把data里的product展示到页面上，而且一旦data里的product值发生了改变，页面上的展示的内容也会改变。有点懵我讲的是什么意思？看下下面的图片。

通过app.drinks，我们可以访问到定义在Vue实例data上的属性。

我们尝试改变drinks保存的值。

通过重新给app.drinks赋值来改变drinks保存的值。

浏览器上显示的内容也相应改变，这就是我们说的响应式，数据改变，页面上的内容也相应改变。

以上就是我们今天这个教程的所有内容。我们来做个简单回顾。

• 我们学习了什么是Vue实例，以及它是如何把data里的数据展示到页面上的。
• Vue实例可以与某个HTML元素相关联。
• Vue实例的data里保存的数据可以通过{{}}的语法展示到页面上。
• Vue是响应式的。

谢谢大家花时间阅读这篇教程，如果觉得好的话，可以评论，点赞，转发，收藏一下！我们下期再见！