vue2.0第四季—实例和内置组件

第1节实例入门-实例属性

(一vue和jqueryjs一起使用)一，Vue和JQuery.js一起使用

下载并引入jquery.js


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

总结body：

<body>
    <h1>example01 Methods Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            mounted:function() {
                //在Vue中使用jQuery
                //只有在mounted和updated中才可以使用引入JQuery
                $("#app").html('我是JQuery！');
            },
            methods: {
                add:function(){
                    console.log('调用了构造器内部的add方法');
                }
            },
        })
        //构造器外部调用内部方法
        app.add();
    </script>
</body>

第2节实例方法

$mount方法

$mount方法是我们用来挂载我们的扩展的，先定义var japang，然后用$ mount的方法把jspang挂载到DOM上

destroy()卸载方法

用于卸载整个挂载

forceUpdate()更新方法

nextTick()数据修改方法

当Vue构造起里的data值被修改完成后会调用这个方法，相当于一个钩子函数，和构造器里的updated生命周期很像。

总结代码如下：

<body>
    <h1>example Methods Demo</h1>
    <hr>
    <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 jspang = Vue.extend({
            template:`<p>{{ message }}</p>`,
            data:function(){
                return{
                    message:'Hello,I am ZR'
                }
            },
            //加生命周期
            mounted:function(){
                console.log('mounted被创建');
            },
            destroyed:function(){
                console.log('destroy 销毁');
            },
            updated:function(){
                console.log('updated 更新之后');
            }
        })
        //挂载到app上
        var vm = new jspang().$mount('#app');
        //销毁
        function destroy(){
            vm.$destroy();
        }
        //更新
         function reload(){
            vm.$forceUpdate();
         }
         //更改数据
         function tick(){
             //更改扩展里的message内容
             vm.message='update message info';
             //里面放回调函数
             vm.$nextTick(function(){
                 console.log('message更新完之后被我调用了');
             })
         }

    </script>
</body>

第3节实例事件

实例事件就是在构造器外部写一个构造器内部的方法。这样写的好处就是可以通过这种写法在构造器外部调用构造器内部的数据。

1.$on 在构造器外部添加事件

app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.num--;
});

$on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。

如果按钮在作用域外部，可以利用$emit来执行。

//外部调用内部事件
function reduce(){
    app.$emit('reduce');
}

$once执行一次的事件

app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.num--;

});

$off关闭事件

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

总结代码：

<body>
    <h1>example03</h1>
    <hr>
    <div id="app">
        {{ num }}
        <!-- @click = v-on:click -->
        <p><button @click="add">add</button></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:{
                num:1
            },
            methods: {
                add:function(){
                    this.num++;
                }
            }
        });

        app.$on("reduce",function(){
            console.log("执行了reduce方法");
            this.num--;
        });

        app.$once('reduceOnce',function(){
            console.log("reduce只调用一次");
            this.num--;
        })

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

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

第4节内置组件slot讲解

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接受内容并输出。先定义一个jspang组件，用这个组件来展示博主的一些信息

slot的使用需要两步：

1、在HTML的组件中用slot属性传递值。

<jspang>
    <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
    <span slot="netName">{{jspangData.netName}}</span>    
    <span slot="skill">{{jspangData.skill}}</span>    
</jspang>

2、在组件模板中用标签接收值。

<template id="tmp">
    <div>
        <p>博客地址：<slot name="bolgUrl"></slot></p>
        <p>网名：<slot name="netName"></slot></p>
        <p>技术类型：<slot name="skill"></slot></p>

    </div>
</template>