怎样搭建Vue.js框架环境并创建Vue实例

作者:分开不是尽头 | 创建时间: 2023-04-01
前端框架中的Vue.js用来编写单页面也是非常不错的。今天小编我就来给大家分享一下 怎样搭建Vue.js框架开发环境以及 创建Vue实例的。...
怎样搭建Vue.js框架环境并创建Vue实例

操作方法

首先便是自行下载Vue.js文件啦。如图所示,小编我就把Vue.js放置在了JS文件夹下以便待会调用。同时在JS的同级目录下创建一个HTML文件用来编写Vue实例。

如图所示,直接在HTML中用script来连接Vue.js便可以简单的搭建好开发环境了。

然后便是开始设置一个标签来存放Vue变量了。 这里我就用div标签并且自定义了两个Vue变量。带有两个花括号的就是Vue变量。

如图,接着在script中使用new Vue便可以创建出一个Vue实例啦。

Vue实例创建好之后便可以把它跟HTML元素绑定在一起。 如图所示,可以用el(固定不可变)把元素绑定。 el后面的便是要绑定的元素的名称啦。 比如元素的id(#)名或者是类(.)名都是可以滴。

data(固定不变)则是用来放置一些数据。 我们可以在data中设置好Vue变量的值。 这样当Vue示例被绑定到某个元素(比如jyapp)之后,该元素便可以把Vue变量解析成对应的数据啦。

如图预览,Vue变量的数据便会被解析了。

接着我们再创建另一个元素并且把el修改成另一个元素。

然后便可以看到只有绑定了Vue实例的元素才可以解析Vue变量哦。

点击展开全文

更多推荐