Vue.js hello world
<!DOCTYPE HTML>
<html>
<head>
<title>vue.js hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="demo">
{{message}}
<input v-model="message">
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>
效果：
更牛逼的是：我修改了input里面的内容之后，奇迹发生了！！！
牛逼吧，这就是vue.js 的双向数据绑定。
渲染列表
<!DOCTYPE HTML> <html> <head> <title>vue.js hello world</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="todo in todos"> {{todo.text}} </li> </ul> </div> <script> var demo = new Vue({ el: '#app', data: { todos:[ {text:"learn Javascript"}, {text:'learn vue.js'}, {text:'Build Something Awesome'} ] } }); </script> </body> </html>
效果：
处理用户输入：
<!DOCTYPE HTML> <html> <head> <title>vue.js 处理用户输入</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script> var message = new Vue({ el:"#app", //对应的元素下面 data:{ message:"hello vue.js", }, methods:{ reverseMessage:function(){ this.message = this.message.split('').reverse().join(''); } } }); </script> </body> </html>
效果：
