找回密码
当前位置：前端开发者 > Vue.js > 正文

几个Vue的demo

2019-08-14 14:00:00 分类：Vue.js 阅读(1337) 评论(0)
跨浏览器的web前端开发
前端开发哪个浏览器
学前端开发还要懂浏览器

学vue陆续做了一些demo，简单到复杂；

分页导航切换
基于bootstrap + vue的用户信息表
模态框UI组件

分页导航切换
这里用到的知识点是

active类是否添加取决于：后面的表达式是否为真
@是v-on的缩写
v-for='(n, index) in p’ 处在第一位的“n”是值，第二个为真index是索引

html 代码

<!DOCTYPE html>
<html lang=”zh”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>分页导航条</title>
        <script
            src=”https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js”
            type=”text/javascript”
            charset=”utf-8″
        ></script>
        <style type=”text/css”>
            ul > li {
                list-style: none;
                display: inline-block;
                border: 1px solid aquamarine;
                padding: 5px 10px;
                cursor: pointer;
            }
            li + li {
                border-left: none;
            }
            li:hover {
                background-color: #63b8ff;
            }
            .active {
                background-color: #a6e1ec;
                color: #460215;
            }
        </style>
    </head>
    <body>
        <ul id=”box”>
            <!–类名 active 是否更新，取决于：后的表达式是否为真值–>
            <!–绑定toggle方法，并传入当前的n值用以修改activeIndex值–>
            <li v-on:click=”prev”><</li>
            <li
                v-for=”(n, index) in p”
                v-bind:class=”{active:n==activeIndex}”
                @click=”toggle(index)”
            >
                {{ n }}
            </li>
            <li @click=”next”>></li>
        </ul>
        <script type=”text/javascript”>
            new Vue({
                el: ‘#box’,
                data: {
                    p: 5,
                    activeIndex: 1,
                },
                methods: {
                    toggle: function(index) {
                        this.activeIndex = index + 1
                    },
                    prev: function() {
                        this.activeIndex =
                            this.activeIndex > 1 ? this.activeIndex – 1 : 1
                        console.log(this.activeIndex)
                    },
                    next: function() {
                        this.activeIndex =
                            this.activeIndex < this.p
                                ? this.activeIndex + 1
                                : this.p
                    },
                },
            })
        </script>
    </body>
</html>

基于bootstrap + vue的用户信息表
例子展示了vue的拓展性，可以和boostrap配合使用
例子中有 添加和删除的功能，对实例中的data数据进行操作，但官方文档中明确指出，由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength
要使用Vue.set 或者example1.items.splice(indexOfItem, 1, newValue) 来对数据进行操作

html 代码

<!DOCTYPE html>
<html lang=”zh”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>基于bootstrap+vue的用户信息表</title>
        <script
            src=”https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js”
            type=”text/javascript”
            charset=”utf-8″
        ></script>
        <link
            href=”http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css”
            rel=”stylesheet”
        />
        <style type=”text/css”>
            #app {
                max-width: 500px;
            }
            #addTable {
                text-align: center;
                max-width: 500px;
            }
            td > input {
                width: 120px;
            }
        </style>
    </head>
    <body>
        <div id=”app”>
            <form role=”form”>
                <div class=”form-group”>
                    <label
                        for=”firstname”
                        class=”col-sm-2 control-label clearfix”
                        >用户名</label
                    >
                    <input
                        type=”text”
                        class=”form-control”
                        id=”firstname”
                        placeholder=”请输入用户名”
                        v-model=”newData.name”
                    />
                </div>
                <div class=”form-group”>
                    <label
                        for=”lastname”
                        class=”col-sm-2 control-label clearfix”
                        >年龄</label
                    >
                    <input
                        type=”text”
                        class=”form-control”
                        id=”lastname”
                        placeholder=”请输入年龄”
                        v-model=”newData.age”
                    />
                </div>
                <div class=”form-group”>
                    <button class=”btn btn-info” @click.prevent=”addData”>
                        添加
                    </button>
                    <button type=”reset” class=”btn btn-danger”>重置</button>
                </div>
            </form>
            <hr />
            <table id=”addTable” class=”table table-bordered”>
                <caption class=”text-info”>
                    用户信息表
                </caption>
                <tr class=”text-danger”>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                <tr v-for=”(item, $index) in lists”>
                    <td>{{ item.id }}</td>
                    <td>
                        {{ item.name }}
                        <input
                            type=”text”
                            :value=”item.name”
                            v-if=”ischange == $index”
                            v-model=”newName”
                            :key=”$index”
                        />
                    </td>
                    <td>
                        {{ item.age }}
                        <input
                            type=”text”
                            :value=”item.age”
                            v-if=”ischange == $index”
                            v-model=”newAge”
                            :key=”$index”
                            placeholder=”新的年龄”
                        />
                    </td>
                    <td>
                        <button
                            class=”btn btn-primary btn-sm”
                            v-if=”ischange == $index”
                            @click=”comfirmChange($index)”
                        >
                            确认
                        </button>
                        <button
                            class=”btn btn-primary btn-sm”
                            @click=”changeMsg($index)”
                            v-if=”ischange !==$index “
                        >
                            修改
                        </button>
                        <button
                            class=”btn btn-danger btn-sm”
                            @click=”delMsg($index)”
                            v-if=”ischange !== $index”
                        >
                            删除
                        </button>
                        <button
                            class=”btn btn-primary btn-sm”
                            @click=”ischange=-1″
                            v-if=”ischange == $index”
                        >
                            取消
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan=”4″>
                        <button
                            class=”btn btn-danger pull-right”
                            @click=”delMsgAll”
                        >
                            删除全部
                        </button>
                    </td>
                </tr>
                <tr class=”text-center text-muted”>
                    <td colspan=”4″>暂无数据…</td>
                </tr>
            </table>
        </div>
        <script type=”text/javascript”>
            var vm = new Vue({
                el: ‘#app’,
                data: {
                    lists: [
                        {
                            id: 1,
                            name: ‘bob’,
                            age: ’36’,
                        },
                        {
                            id: 2,
                            name: ‘lili’,
                            age: ’18’,
                        },
                    ],
                    newData: {
                        name: ”,
                        age: ”,
                    },
                    ischange: -1,
                    newAge: ”,
                    newName: ”,
                    lastIndex: 3,
                },
                methods: {
                    addData: function() {
                        var maxID = 0
                        //获取lists数组中最后一个id
                        this.newData.id = this.lastIndex++
                        this.lists.push(this.newData)
                        //添加完毕后清除输入框数据
                        this.newData = {}
                    },
                    delMsgAll: function() {
                        //由于JavaScript的限制，这样做不会被vue捕获
                        // this.lists.length = 0;
                        //这样也可以清空数组
                        this.lists.splice(0)
                    },
                    delMsg: function(index) {
                        this.lists.splice(index, 1)
                    },
                    changeMsg: function(index) {
                        this.ischange = index
                    },
                    comfirmChange: function(index) {
                        if (this.newAge == ” || this.newName == ”) {
                            alert(‘不能为空’)
                            return
                        }
                        this.ischange = -1
                        var id = this.lists[index].id
                        var newDate = {
                            id: id,
                            age: this.newAge,
                            name: this.newName,
                        }
                        //替换数据
                        this.lists.splice(index, 1, newDate)
                        //初始化
                        this.newAge = ‘1111’
                        this.newName = ‘2222’
                    },
                },
            })
        </script>
    </body>
</html>

模态框组件
这个demo的知识点比较多，比前面2个demo复杂了一点
使用了slot，
prop传递数据以及验证
使用$emit定义自定义事件，供父组件触发
直接修改组件props的数据，vue会发出警告。最好用计算属性对props进行处理并返回。

html 代码

<!DOCTYPE html>
<html lang=”zh”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>Document</title>
        <script
            src=”https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js”
            type=”text/javascript”
            charset=”utf-8″
        ></script>
        <style type=”text/css”>
            h2 {
                margin: 0;
            }
            .modal {
                position: relative;
                width: 500px;
                margin: 10px auto;
                border: 1px solid #adadad;
                border-radius: 6px;
                box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
                padding: 10px 10px 0;
            }
            .modal-header {
                padding: 10px;
                border-bottom: 1px solid #adadad;
            }
            .modal-content {
                padding: 15px;
            }
            .modal-footer {
                padding: 10px;
                text-align: right;
                border-top: 1px solid #adadad;
            }
            .modal-footer input {
                padding: 5px 10px;
            }
            .close {
                position: absolute;
                right: 10px;
                top: 25px;
            }
        </style>
    </head>
    <body>
        <div id=”app”>
            <!–模态框组件将–>
            <button @click=”openModal”>打开模态框</button>
            <modal-component
                :header=”header”
                :visible=”visible”
                @on-close=”openModal”
                @on-confirm=”Submit”
                @on-cancel=”Cancel”
            >
                <ul slot=”slot-content”>
                    <li v-for=”item in lists”>
                        {{ item }}
                    </li>
                </ul>
            </modal-component>
        </div>
        <script type=”text/javascript”>
            Vue.component(‘modal-component’, {
                props: {
                    header: {
                        //props验证，必须是字符串
                        type: String,
                        //默认内容
                        default: ‘这是一个模态框’,
                    },
                    visible: {
                        type: Boolean,
                        default: true,
                    },
                },
                //因为直接修改props，vue会发出警告所以使用计算函数来来处理props的值并返回
                computed: {
                    Visible: function() {
                        return this.visible
                    },
                },
                template: `
<div class=”modal” v-if=’Visible’>
<div class=”modal-header”>
<h2>{{header}}</h2>
<button class=’close’ @click=’close’>×</button>
</div>
<div class=”modal-content”>
<!–插槽，如果父组件没有提供内容，插槽将显示–>
<slot name=’slot-content’>
请输入内容
</slot>
</div>
<div class=”modal-footer”>
<slot name=’slot-footer’>
<input type=”button” value=”确认” @click=’confirm’/>
<input type=”button” value=”取消” @click=’cancel’/>
</slot>
</div>
</div>
`,
                methods: {
                    //点击确认
                    confirm() {
                        //绑定触发事件
                        this.$emit(‘on-confirm’)
                    },
                    //点击取消
                    cancel() {
                        this.$emit(‘on-cancel’)
                        //修改计算函数Visible
                        this.Visible = false
                        this.$emit(‘on-close’)
                    },
                    //点击关闭的按钮
                    close: function() {
                        console.log(this)
                        this.Visible = false
                        this.$emit(‘on-close’)
                    },
                },
            })
            var vm = new Vue({
                el: ‘#app’,
                data: {
                    header: ‘确认信息’,
                    lists: [123456789],
                    visible: false,
                },
                methods: {
                    Submit: function() {
                        alert(‘你点击的确定’)
                    },
                    Cancel() {
                        alert(‘你点击了取消’)
                    },
                    openModal: function() {
                        this.visible = !this.visible
                    },
                },
            })
        </script>
    </body>
</html>
web前端开发中浏览器兼容
前端开发必备浏览器是哪几个
前端开发 双核浏览器使用ie
» 本文来自：前端开发者 » 《几个Vue的demo》
» 本文链接地址：https://www.rokub.com/8216.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论