vue 学习笔记1 入门

可以在 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页面中显示的文本也会即时更新。

二、元素属性绑定

巴特西