数据属性设置和v-for指令示例

1.Hello World

【说明】这是一个输出字符串文本的简单示例，运行后会在网页上输出“Hello Vue.js!”。第一部分为HTML部分，第二部分为JavaScript部分。数据绑定最常见的形式就是使用{{...}}(双大括号)的文本插值。data属性设置对应ID的元素显示的内容。

【说明】这是一个输出字符串文本的简单示例，运行后会在网页上输出“Hello World”。第一部分为HTML部分，第二部分为JavaScript部分。angular.module函数用来创建模块，myApp参数对应执行应用的HTML元素；ng-controller指令用来添加应用的控制器，在app.controller中构建函数以实现功能。

2.双向数据绑定

Vue的双向数据绑定:

【说明】网页实时显示用户输入内容，即用户输入内容和网页显示内容双向绑定。在input输入框中我们可以使用v-model指令来实现双向数据绑定。

AngularJS的双向数据绑定:

【说明】网页实时显示用户输入内容，即用户输入内容和网页显示内容双向绑定。在input输入框中我们可以使用ng-model指令来实现双向数据绑定。

3.渲染列表

Vue的渲染列表:(www.xing528.com)

【说明】在网页上构建一个列表，使用标签，列表内容为{{name.first}}。在HTML中使用v-for指令渲染，“name in names”表示在names数组中循环，得到的每一个值赋给name，{{name.first}}表示取出name的first属性。所以该实例的显示结果为:

AngularJS渲染列表:

【说明】在网页上构建一个列表，使用标签，列表内容为{{name.first}}。在HTML中使用ng-repeat指令渲染，与Vue的循环原理一样。所以该实例的显示结果为:

4.循环

Vue的循环:

【说明】在HTML中使用v-for指令渲染，“item in list”表示在list数组中循环，得到的每一个值赋给item，{{item.url}}表示取出item的url属性，在用标签生成超链接，item.title表示取出item的title属性。所以该实例的显示结果为网页链接列表，格式每一行为一个链接加一个标题。

AngularJS的循环:

【说明】在HTML中使用ng-repeat指令渲染，“blog in blogList”表示在blogList数组中循环，得到的每一个值赋给blog，获取blog的id/img/title/createTime属性，生成图片、标题、创建时间超链接，都链接到对应的blog地址。