Vue2.0入门学习笔记（四）：实例和内置组件

目录

外部技术引入

实例方法

实例事件

内置组件slot

---

源码地址：https://gitee.com/xieweikun/vue-demo

外部技术引入

可以在mounted中引入其他技术，例如jquery

<script type="text/javascript" src="../assets/js/jquery-1.10.2.min.js"></script>

<div id="app"></div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        mounted: function () {
            $("#app").html('我是jquery');
        }
    });
</script>

实例方法

<div id="app"></div>
<p><button onclick="destroy()">销毁</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">更改数据</button></p>
<script type="text/javascript">
    var xwk = Vue.extend({
        template: `<p>{{message}}</p>`,
        data: function () {
            return {
                message: 'Hello xwk'
            }
        },
        mounted: function () {
            console.log("mounted 被创建")
        },
        destroyed: function () {
            console.log("destroyed销毁")
        },
        updated: function () {
            console.log("updated更新之后")
        }
    })
    var vm = new xwk().$mount("#app");
    function destroy() {
        vm.$destroy();
    }
    function reload() {
        vm.$forceUpdate();
    }
    function tick() {
        vm.message = "update message info";
        vm.$nextTick(function () {
            console.log("message更新后我被调用了");
        })
    }
</script>

实例事件

<div id="app"><p>{{count}}</p></div>
<p><button onclick="reduce()">reduce</button></p>
<p><button onclick="reduceOnce()">reduceOnce</button></p>
<p><button onclick="off()">off</button></p>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })
    app.$on('reduce', function () {
        console.log("执行了reduce");
        this.count--;
    })
    app.$once('reduceOnce', function () {
        console.log("执行了reduceOnce");
        this.count--;
    })
    function reduce() {
        app.$emit('reduce');
    }
    function reduceOnce() {
        app.$emit('reduceOnce');
    }
    function off() {
        app.$off('reduce');
    }
</script>

内置组件slot

<div id="app">
    <panda>
        <span slot="bolgUrl">{{pandaData.bolgUrl}}</span>
        <span slot="netName">{{pandaData.netName}}</span>
        <span slot="skill">{{pandaData.skill}}</span>
    </panda>
</div>
<template id="tep">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>
    </div>
</template>
<script type="text/javascript">
    var panda = {
        template: '#tep'
    }
    var app = new Vue({
        el: '#app',
        data: {
            pandaData: {
                bolgUrl: 'http://www.baidu.com',
                netName: '百度',
                skill: "web前端"
            }
        },
        components: {
            'panda': panda
        }
    })
</script>