vue各种实例集合

注意：以下所有示例基于vue 2.x、Vuex 2.x、vm.$mount()-挂载：<body><div id="a"></div></body><script>var A = Vue.extend({template: '&lt

duansamve

2947人浏览 · 2018-08-04 16:05:22

duansamve · 2018-08-04 16:05:22 发布

注意：以下所有示例基于vue 2.x、Vuex 2.x、

vm.$mount()-挂载：

<body>
    <div id="a">
    </div>
</body>  
<script>  
    var A = Vue.extend({  
        template: '<p>123</p>'  
    });
 
    /*// 自动挂载
    new A({
        el: '#a'
    });*/
 
    var a = new A();
    a.$mount('#a')// 手动挂载
</script>

局部注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <com-b></com-b>
    <com-c></com-c>
    <com-d></com-d>
</div>

<template id="com-d">
    <div>comD</div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var comC = Vue.component('comC', {
    template: '<div>comC</div>'
});

var vm = new Vue({
    el: '#app',
    components: {
        comB: {
            template: '<div>comB</div>'
        },
        comC: comC,
        comD: {
            template: "#com-d"
        }
    }
});
</script>
</body>
</html>

动态组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <component :is="cur"></component>
    <button @click="change">change</button>
</div>

<template id="comA">
    <div>comA</div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        cur: {
            template: '<div>cur</div>'
        }
    },
    methods: {
        change: function(){
            this.cur = this.cur == 'comA' ? 'comB' : 'comA'
        }
    },
    components: {
        comA: {
            template: '#comA'
        },
        comB: {
            template: '<div>comB</div>'
        }
    }
})
</script>
</body>
</html>

计算示例(computed)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{intro}}
    <input v-model="name"/>
    <input v-model="age"/>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        name: 'Samve',
        age: 32
    },
    computed: {
        intro: function(){
            return 'name：' + this.name + ", age: " + this.age;
        }
    }
});
</script>
</body>
</html>

自定义指令：实现"点击按钮使文本框获取焦点"示例(directive)

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-focus="isFocus"/>
    <button @click="change">change</button>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
Vue.directive('focus', {
    inserted: function(el, binding){
        if(binding.value){
            el.focus();
        }else{
            el.blur();
        }
    },
    componentUpdated: function(el, binding){
        if(binding.value){
            el.focus();
        }else{
            el.blur();
        }
    }
});

let vm = new Vue({
    el: '#app',
    data: {
        isFocus: true
    },
    methods: {
        change(){
            this.isFocus = !this.isFocus;
        }
    }
});
</script>
</body>
</html>

使用jquery调用接口数据：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{list}}</div>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        list: ''
    },
    created: function(){
        let that = this;
        $.ajax({
            url: 'http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json',
            dataType: 'jsonp',
            success: function(data){
                that.list = data.webConfig.helloWord;
            }
        })
    }
})
</script>
</body>
</html>

slot示例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <com-a>
        <p>中国科学院</p>
        <p>院士</p>
        <p slot="slotA">杨院士</p>
        <com-b></com-b>
    </com-a>
</div>

<template id="comA">
    <div>
        <slot></slot>
        <slot></slot>
        <slot name="slotA"></slot>
        <P>comA</P>
    </div>
</template>

<template id="comB">
    <div>comB</div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
Vue.component('comA', {
    template: '#comA'
});

Vue.component('comB', {
    template: '#comB'
});

let vm = new Vue({
    el: '#app'
});
</script>
</body>
</html>

vuex示例：

a. 简单计数

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{num}}</div>
    <div><button @click="add">add</button></div>
    <div><button @click="reduce">reduce</button></div>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script>
Vue.use(Vuex);

let myStore = new Vuex.Store({
    state: {
        num: 0
    },
    mutations: {
        add: function(state){
            state.num++;
        },
        reduce: function(state){
            state.num--;
        }
    }
});

let vm = new Vue({
    el: '#app',
    store: myStore,
    computed: {
        num: function(){
            return  myStore.state.num;
        }
    },
    methods: {
        add(){
            myStore.commit('add');
        },
        reduce(){
            myStore.commit('reduce');
        }
    }
})
</script>
</body>
</html>

b. 子组件获取Vuex状态：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{num}}</div>
    <com-a></com-a>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.js"></script>
<script>
Vue.use(Vuex);

let myStore = new Vuex.Store({
    state: {
        num: 0
    }
});

let vm = new Vue({
    el: '#app',
    store: myStore,// 把store实例注入所有的子组件
    computed: {
        num(){
            return this.$store.state.num;// 使用this.$store即可引用s
        }
    },
    components: {
        comA: {
            template: `<div>子: {{num}}</div>`,
            computed: {
                num(){
                    return this.$store.state.num;// 使用this.$store即可引用
                }
            }
        }
    }
})
</script>
</body>
</html>

v-for循环输出数据：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <h1>Vue demo</h1>
        <div id="app">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>价格</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-for="book in books">
                            <td class="active">{{book.id}}</td>
                            <td class="success">{{book.name}}</td>
                            <td class="warning">{{book.author}}</td>
                            <td class="danger">{{book.price}}</td>
                            <template v-if="book.id%2==0">
                                <td class="text-center"><button type="button" class="btn btn-success" @click="delBook(book)">删除</button></td>
                            </template>
                            <template v-else>
                                <td class="text-center"><button type="button" class="btn btn-danger" @click="delBook(book)">删除</button></td>
                            </template>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="add-book">
                <legend>添加书籍</legend>
                <div class="form-group">
                    <label for="">书名</label>
                    <input type="text" class="form-control" v-model="book.name">
                </div>
                <div class="form-group">
                    <label for="">作者</label>
                    <input type="text" class="form-control" v-model="book.author">
                </div>
                <div class="form-group">
                    <label for="">价格</label>
                    <input type="text" class="form-control" v-model="book.price">
                </div>
                <button class="btn btn-primary btn-block" @click="addBook()">添加</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        book: {
            id: '',
            author: '',
            name: '',
            price: ''
        },
        books: [
            {
                id: 1,
                author: '曹雪芹',
                name: '红楼梦',
                price: 32.0
            }, {
                id: 2,
                author: '施耐庵',
                name: '水浒传',
                price: 30.0
            }, {
                id: '3',
                author: '罗贯中',
                name: '三国演义',
                price: 24.0
            }, {
                id: 4,
                author: '吴承恩',
                name: '西游记',
                price: 20.0
            }
        ]
    },
    methods: {
        delBook: function(book){
            this.books.$remove(book);
        },
        addBook: function(){
            let id = this.books.length+1;
            let name = this.book.name;
            let author = this.book.author;
            let price = this.book.price;
            this.books.push({
                id,
                name,
                author,
                price
            });
        }
    }
})
</script>
</body>
</html>

指令：汇率计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div id="app" style="padding: 20px;">
    <table class="table table-bordered" >
        <tr><td>输入金额：</td><td colspan="3"><input v-model="amout"  class="form-control"/></td></tr>
        <tr><td>原货币：</td><td><select v-model="converyFrom"  class="form-control"><option v-for="(currency, index) in currencyfrom" :value="currency.name">{{currency.desc}}</option></select></td><td>转换成：</td><td><select v-model="converyTo" class="form-control"><option v-for="(currency, index) in currencyfrom" :value="currency.name">{{currency.desc}}</option></select></td></tr>
        <tr><td colspan="4">{{amout}}{{converyFrom}}相当于{{finalAmount}}{{converyTo}}</td></tr>
    </table>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    data: {
        amout: 0,
        converyFrom: 'RMB',
        converyTo: 'USD',
        currencyfrom : [
            {name : "USD", desc:"美元"},
            {name:"EUR", desc:"欧元"},
            {name:"RMB", desc:"人民币"},
            {name:"HKD", desc:"港币"}
        ]
    },
    computed: {
        finalAmount: function(){
            switch(this.converyFrom){
                case 'RMB':
                    if(this.converyTo == 'USD'){
                        return this.amout* 0.1461;
                    }else if(this.converyTo == 'EUR'){
                        return this.amout* 0.013;
                    }else if(this.converyTo == 'HKD'){
                        return this.amout* 1.1466;
                    }else if(this.converyTo == 'RMB'){
                        return this.amout;
                    }
                    break;
                case 'USD':
                    if(this.converyTo == 'USD'){
                        return this.amout;
                    }else if(this.converyTo == 'EUR'){
                        return this.amout* 0.8764;
                    }else if(this.converyTo == 'HKD'){
                        return this.amout* 7.8495;
                    }else if(this.converyTo == 'RMB'){
                        return this.amout*6.8458;
                    }
                    break;
                case 'EUR':
                    if(this.converyTo == 'USD'){
                        return this.amout*1.141;
                    }else if(this.converyTo == 'EUR'){
                        return this.amout;
                    }else if(this.converyTo == 'HKD'){
                        return this.amout* 8.9563;
                    }else if(this.converyTo == 'RMB'){
                        return this.amout*7.8111;
                    }
                    break;
                case 'HKD':
                    if(this.converyTo == 'USD'){
                        return this.amout*0.1274;
                    }else if(this.converyTo == 'EUR'){
                        return this.amout*0.1117;
                    }else if(this.converyTo == 'HKD'){
                        return this.amout;
                    }else if(this.converyTo == 'RMB'){
                        return this.amout*0.8721;
                    }
                    break;
            }
        }
    }
});
</script>
</body>
</html>

参考：https://blog.csdn.net/u011500781/article/details/52475967

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^