<!DOCTYPE HTML><html> <head>...
<!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>
效果：
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
