标签:
Vue.js是一个构建数据驱动的web界面的库。它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件,今天我们就开始vue.js的学习。
一、vue的下载地址:http://vuejs.org/js/vue.js
二、vue的第一个例子:
项目的结构如下,引入vue.js
vue1.html的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue1</title> <script type="text/javascript" src="../vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="text" name="message" v-model="message" /> </div> <script type="text/javascript" src="js/vue1.js"></script> </body> </html>
vue1.js的代码:
var app = new Vue({ el: ‘#app‘, data: { message: "hello world" } });
运行的效果如下:
注意:
以下的所有例子都是基于上述的例子的。这里只写增加的代码
在<div id="app">中加入以下代码:
<ul> <li v-for="person in persons"> {{ person.name }} loves {{person.love}} </li> </ul>
在vue1.js的data中加入以下代码:
persons: [ {name: "huhx", love: "code"}, {name: "chenhui", love: "book"} ]
运行效果如下:
在<div id="app">中加入以下代码:
<button v-on:click="changeContent(‘huhx‘)">Click on!</button>
在vue1.js中加入以下代码:
methods: { changeContent: function(element) { this.message = "I love " + element; } }
标签:
原文地址:http://www.cnblogs.com/huhx/p/basevue1.html