第一个Vue实例:数据绑定

在Vue中,实现数据绑定:

--

首先,导入Vue.js文件(可以下载Vue源码本地导入,也可以选择CDN)

接下来,在Body中写入:

{{info}}

然后,我们写入js代码

我们可以看到,在Vue构造器中,有一个el参数,其实它就是标签元素的ID。

还有一个data属性,这里面就是我们定义的数据,最后,我们在标签中可以使用:{{   }}来输出对象返回的值!

---

以上代码运行效果:

第一个Vue实例:数据绑定_第1张图片

我们打开控制台,审查元素,可以看到Hello Vue的一个段落标签!

第一个Vue实例:数据绑定_第2张图片

Vue只关注试图层,所以我们只需要修改data里的值,P标签也会随着data值的变化而变化!

 

- - - - End

你可能感兴趣的:(一起学习Vue)