(第四季)Vue实例和内置组件

实例入门-实例属性

概述：实例就是在构造器外部操作构造器内部的属性选项或者方法，就叫做实例？实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。

下载并引入jquery框架
下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。

<script type="text/javascript"  src="../assets/js/jquery-3.3.1.js">script>
  ```
  ```html
<div id="app">
        {{message}}
    div>
    <script type="text/javascript">
        var app= new Vue({
            el:"#app",
            data:{
                message:'hello wordl'
            },
            methods: {
                add:function(){
                    console.log("调用了构造器内部的方法");
                }
            },
            //(生命周期)只有在挂载之后和更新使用否则找不到DOM
            mounted:function(){
                $("#app").html("我是Jquery");
            }
        })

        //实例调用自定义方法
        app.add();
    script>
  ```

## 实例方法
```html

 <div id="app">
    div>
    <button onclick="destroy()">卸载button>
    <button onclick="reload()">更新button>
    <button onclick="tick()">更改数据button>
    <script type="text/javascript">
        var guo = Vue.extend({
            template: `
{{message}}</p>`,
            data: function () {
                return {
                    message: 'hello'
                }
            },
            destroyed: function () {
                console.log("被卸载了");
            },
            updated: function () {
                console.log("被更新了");
            }
        })
        //$mount()挂载扩展 
        var vm = new guo().$mount("#app");
        //$destroy()卸载方法
        function destroy() {
            vm.$destroy();
        }
        //$forceUpdate() 更新方法
        function reload() {
            vm.$forceUpdate();
        }
        //$nextTick() 数据修改方法
        function tick() {
            vm.message = "update message info ";
            vm.$nextTick(function () {
                console.log('message更新完后我被调用了');
            })
        }

    script>
  ```




<div class="se-preview-section-delimiter">div>

## 实例事件




<div class="se-preview-section-delimiter">div>

```html
    <div id="app">
        {{num}}
        <p>
            <button @click="add">addbutton>
        p>
    div>
    <p>
        <button onclick="reduce()">reducebutton>
    p>
    <p>
        <button onclick="reduceOnce()">reduceOncebutton>
    p>
    <p>
        <button onclick="off()">offbutton>
    p>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    this.num++;
                }
            }

        })
        //$on  在构造器外部添加事件。
        app.$on("reduce", function () {
            this.num--;
        })
        //如果按钮在作用域外部，可以利用$emit来执行。
        function reduce() {
            app.$emit("reduce");
        }


        //$once只执行一次的事件
        app.$once("reduceOnce", function () {
            this.num--;
        })

        function reduceOnce() {
            app.$emit('reduceOnce');
        }


        //关闭事件
        function off() {
            app.$off('reduce');
        }

    script>

内置组件-slot讲解

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

    <div id="app">
        <guosh>
            <span slot="bolgUrl">{{guoshData.bolgUrl}}span>
            <span slot="netName">{{guoshData.netName}}span>
        guosh>
    div>
    <template id="tmp">
        <div>
            <p>博客地址:<slot name="bolgUrl">slot>p>
            <p>名字:<slot name="netName">slot>p>
        div>
    template>
    <script type="text/javascript">
        var guosh={
            template:"#tmp"
        }
        var app = new Vue({
            el:"#app",
            data:{
                guoshData:{
                    bolgUrl:'http://guoshaohua.cn',
                    netName:'郭少华'
                }
            },
            components: {
                "guosh":guosh
            }
        })
    script>