这个好像比ANGULAR.JS要轻量一些，看看。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="demo.css" /> </head> <body> <!--this is my View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message" /> <button v-on:click="greet">Greet</button> <button @click="say('hi')">Hi</button> <h1 v-if="yes"> Yes!</h1> <h1 v-show="no"> No!</h1> <h1 v-if="age >= 34"> Age: {{ age }}</h1> <h1 v-else> Name: {{ name }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> <ul class="pagination"> <li v-for="n in pageCount"> <a href="javascript:void(n)" v-bind:class="activeNumber === n ?'active': ''"> {{ n }} </a> </li> </ul> </div> </body> <script src="vue.min.js"></script> <script> //this is my model var exampleData = { message: 'Hello World!', yes: true, no: false, age: 28, name: 'keepfool', sex: 'Male', people: [{ name: 'Bill', sex: 'Male' }, { name: 'Tracy', sex: 'Female' }, { name: 'Tony', sex: 'Male' }, { name: 'Chris', sex: 'Female' }], activeNumber: 1, pageCount: 10 }; // create a vue instance or "viewmodel" // it connect view and model var vueInstance = new Vue({ el: "#app", data: exampleData, methods:{ greet: function() { alert(this.message); }, say: function(msg) { alert(msg); } } }) </script> </html>
* { margin: 0; padding: 0; box-sizing: border-box } html { font-size: 12px; font-family: Ubuntu, simHei, sans-serif; font-weight: 400 } body { font-size: 1rem } table, td, th { border-collapse: collapse; border-spacing: 0 } table { width: 100% } td, th { border: 1px solid #bcbcbc; padding: 5px 10px } th { background: #42b983; font-size: 1.2rem; font-weight: 400; color: #fff; cursor: pointer } tr:nth-of-type(odd) { background: #fff } tr:nth-of-type(even) { background: #eee } fieldset { border: 1px solid #BCBCBC; padding: 15px; } input { outline: none } input[type=text] { border: 1px solid #ccc; padding: .5rem .3rem; } input[type=text]:focus { border-color: #42b983; } button { outline: none; padding: 5px 8px; color: #fff; border: 1px solid #BCBCBC; border-radius: 3px; background-color: #009A61; cursor: pointer; } button:hover{ opacity: 0.8; } #app { margin: 0 auto; max-width: 640px } .form-group { margin: 10px; } .form-group > label { display: inline-block; width: 10rem; text-align: right; } .form-group > input, .form-group > select { display: inline-block; height: 2.5rem; line-height: 2.5rem; } .text-center{ text-align: center; } .pagination { display: inline-block; padding-left: 0; margin: 21px 0; border-radius: 3px; } .pagination > li { display: inline; } .pagination > li > a { position: relative; float: left; padding: 6px 12px; line-height: 1.5; text-decoration: none; color: #009a61; background-color: #fff; border: 1px solid #ddd; margin-left: -1px; list-style: none; } .pagination > li > a:hover { background-color: #eee; } .pagination .active { color: #fff; background-color: #009a61; border-left: none; border-right: none; } .pagination .active:hover { background: #009a61; cursor: default; } .pagination > li:first-child > a .p { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .pagination > li:last-child > a { border-bottom-right-radius: 3px; border-top-right-radius: 3px; }
