码迷,mamicode.com
首页 > 其他好文 > 详细

vue各种实例集合

时间:2018-08-05 11:54:52      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:slot   数据   put   lock   pre   UNC   word   ESS   data   

注意:以下所有示例基于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>
参考:https://blog.csdn.net/u011500781/article/details/52475967

vue各种实例集合

标签:slot   数据   put   lock   pre   UNC   word   ESS   data   

原文地址:https://www.cnblogs.com/samve/p/9424800.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!