当前位置：首页 > news >正文

Vue.js实例练习

news 来源：原创 2024/5/19 12:01:25

最近学习Vue.js感觉跟不上节奏了，Vue.js用起来很方便。

主要实现功能，能添加书的内容和删除。（用的Bootstrap的样式）demo链接

标题用了自定义组件，代码如下：

components: {
    'my-title': {
        template: '<h1 v-text="title"></h1>',
        data: function () {
            return {
                title: 'Vue.js 实例练习 Bootstrap样式'
            }
        }
    }
}

增加书的内容和表格用的都是指令+列表渲染，vue.js构造单页面应用确实很方便。

Vue.js提供的指令很快的渲染想要的内容。这里主要用了v-for嵌套使用。

v-for还包含2个特殊变量：$index,$key。能遍历数组和对象。全部代码如下：

<!DOCTYPE html>
<html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    
</head>
<body>
    <style>
        #app {
            width: 990px;
            padding: 0 15px;
            margin: 0 auto;
        }
    </style>
    <div id="app">
        <my-title></my-title>
        <div id="divTblBook">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th v-for="b in bookShow">{{ b }}</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in books">
                        <td v-for="b in item">{{ item[$key] }}
                        </td>
                        <td>
                            <button class="btn btn-primary" v-on:click="delBook(item)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div id="divAddBook">
            <p>添加书籍</p>
            <div v-for="b in bookShow">
                <div class="form-group">
                    <label>{{ b }}</label>
                    <input type="text" class="form-control" v-model="book[$key]">
                </div>
            </div>
            <button class="btn btn-primary" v-on:click="addBook()">添加</button>
        </div>
    </div>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            components: {
                'my-title': {
                    template: '<h1 v-text="title"></h1>',
                    data: function () {
                        return {
                            title: 'Vue.js 实例练习 Bootstrap样式'
                        }
                    }
                }
            },
            data: {
                books: [{
                    author: '曹雪芹',
                    name: '红楼梦',
                    price: 32.0
                }, {
                    author: '施耐庵',
                    name: '水浒传',
                    price: 30.0
                }, {
                    author: '罗贯中',
                    name: '三国演义',
                    price: 24.0
                }, {
                    author: '吴承恩',
                    name: '西游记',
                    price: 20.0
                }],
                book: {
                    Name: '',
                    Author: '',
                    price: ''
                },
                bookShow: {
                    Name: "书名",
                    Author: "作者",
                    price: "价格"
                }
            },
            methods: {
                addBook: function () {
                    this.books.push(this.book);
                    this.book = "";
                },
                delBook: function (book) {
                    this.books.$remove(book);
                }
            }
        })
    </script>
</body>
</html>