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