vue2.0-简单的创建一个vue实例

 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

我们知道vue的两大核心就是数据绑定和视图组件,vue是通过数据来驱动视图的。

只要model的数据改变了,vue就会帮我们改变视图上显示的内容,而不用手写代码,这是怎么样做到的呢?

那就是vue实例。

创建vue实例可以简单的分为4步:

 

1.创建语法:

我们可以通过关键语句new Vue()就可以创建一个Vue实例:vm.代码如下:

2.设置数据:

在创建的实例中去书写数据:

3.挂载元素:

我们已经创建了vue实例和设置了数据,那么怎么在数据上显示呢?所以就要挂载元素了。

index.html:

我们在视图部分上就有了一个id为“app”的div元素了。

main.js:

我们前面也说过,el还可以这样写:el:"body",意思为挂载到body页面上。

 这样,我们的实例vm和id为“app”的DOM节点就关联起来了。

4.渲染

前期工作已经做好了,接下来就是把vm的数据绑定到指定的视图上了。就是数据渲染。

渲染要用{{}}。

这样,一个简单的实例就做好了。

 

猜你喜欢

转载自www.cnblogs.com/whh-16/p/9087758.html