可以在 JSFiddle 上在线学习vue
注意:所演示的示例,都是在JS中将Vue实例绑定至HTML中的指定元素,然后再通过Vue实例中data
内的属性或者methods
中的方法,来对所绑定元素的子元素进行操作的,而不是对指定ID元素本身进行操作。
一、简单的文本渲染
<div id="app1"> {{ message }}</div>
var app1 = new Vue({ el: '#app1', data: { message: 'Hello Vue!' } })
在HTML的元素内写上{{ message }}
,然后在JS中为data
内的message
属性指定值,即可显示所指定的文本,这是最基础的显示文本的方式。
在JS中,el用于定位HTML元素,Vue实例中的message属性与HTML中的字段同名,其值则会被渲染在最终的HTML页面中。
如果在控制台中手动更改app1.message
的值,则能够看到HTML页面中显示的文本也会即时更新。
二、元素属性绑定