vue：Vue.js——60分钟快速入门
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { 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; } </style> </head> <body> <!--这是我们的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message" title=""> <h3>Hello, Vue.js!</h3> <h3 v-if="yes">Yes!</h3> <h3 v-if="no">No!</h3> <h3 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h3> <!-- v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素 --> <h1 v-if="age >= 30">Age: {{ age }}</h1> <h3 v-else>Age: {{ age }}</h3> <!-- v-show 指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性 --> <h1 v-show="age >= 20">Age: {{ age }}</h1> <br> <br> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.username }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> <br> <br> <!-- v-bind指令可以缩写为一个冒号 --> <ul class="pagination"> <!-- pageCount是一个整数，遍历时n从1开始 --> <li v-for="n in pageCount"> <a href="javascript:void(0)" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a> </li> </ul> <br> <br> <!-- v-on指令可以缩写为@符号 --> <p> <!--click事件直接绑定一个方法--> <button v-on:click="greet">Greet</button> </p> <p> <!--click事件使用内联语句--> <button v-on:click="say('Hi')">Hi</button> </p> <br> <br> <fieldset> <legend> Create New Person </legend> <div class="form-group"> <label>Name:</label> <input type="text" v-model="newPerson.username"/> </div> <div class="form-group"> <label>Age:</label> <input type="text" v-model="newPerson.age"/> </div> <div class="form-group"> <label>Sex:</label> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label></label> <button @click="createPerson">Create</button> </div> </fieldset> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Delete</th> </tr> </thead> <tbody> <tr v-for="(person,index) in people"> <td>{{ person.username }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> <td :class="'text-center'"> <button @click="deletePerson(index)">Delete</button> </td> </tr> </tbody> </table> <br> <hr> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> // 这是我们的Model let exampleData = { message: 'Hello World!', yes: true, no: false, age: 28, name: 'keepfool', people: [{ username: 'Jack', age: 30, sex: 'Male' }, { username: 'Bill', age: 26, sex: 'Male' }, { username: 'Tracy', age: 22, sex: 'Female' }, { username: 'Chris', age: 36, sex: 'Male' }], activeNumber: 1, pageCount: 10, newPerson: { name: '', age: 0, sex: 'Male' } }; // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model // 每个Vue实例都会代理其选项对象里的data属性 var vm = new Vue({ el: '#app', data: exampleData, // 在 `methods` 对象中定义方法 methods: { greet: function () { // 方法内 `this` 指向 vm alert(this.message) }, say: function (msg) { alert(msg) }, createPerson: function () { this.people.push(this.newPerson); // 添加完newPerson对象后，重置newPerson对象 this.newPerson = {username: '', age: 0, sex: 'Male'} }, deletePerson: function (index) { // 删一个数组元素 this.people.splice(index, 1); } } }) </script> </html>
推荐安装谷歌插件 vue-devtools