怎样搭建Vue.js框架环境并创建Vue实例
前端框架中的Vue.js用来编写单页面也是非常不错的。今天小编我就来给大家分享一下
怎样搭建Vue.js框架开发环境以及
创建Vue实例的。
操作方法
- 01
首先便是自行下载Vue.js文件啦。如图所示，小编我就把Vue.js放置在了JS文件夹下以便待会调用。同时在JS的同级目录下创建一个HTML文件用来编写Vue实例。
- 02
如图所示，直接在HTML中用script来连接Vue.js便可以简单的搭建好开发环境了。
- 03
然后便是开始设置一个标签来存放Vue变量了。 这里我就用div标签并且自定义了两个Vue变量。带有两个花括号的就是Vue变量。
- 04
如图，接着在script中使用new Vue便可以创建出一个Vue实例啦。
- 05
Vue实例创建好之后便可以把它跟HTML元素绑定在一起。 如图所示，可以用el(固定不可变)把元素绑定。 el后面的便是要绑定的元素的名称啦。 比如元素的id(#)名或者是类(.)名都是可以滴。
- 06
data(固定不变)则是用来放置一些数据。 我们可以在data中设置好Vue变量的值。 这样当Vue示例被绑定到某个元素（比如jyapp）之后，该元素便可以把Vue变量解析成对应的数据啦。
- 07
如图预览，Vue变量的数据便会被解析了。
- 08
接着我们再创建另一个元素并且把el修改成另一个元素。
- 09
然后便可以看到只有绑定了Vue实例的元素才可以解析Vue变量哦。
赞 (0)