vue各种实例集合

最新推荐文章于 2023-11-06 14:36:18 发布

weixin_34320724

最新推荐文章于 2023-11-06 14:36:18 发布

阅读量263

点赞数

文章标签： javascript 数据库 c# ViewUI

原文链接：http://www.cnblogs.com/samve/p/9424800.html

版权

注意：以下所有示例基于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

转载于:https://www.cnblogs.com/samve/p/9424800.html

weixin_34320724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue各种实例集合

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

扫一扫