Vue2.0-实例和内置组件

实例属性

vue和jquery.js一起使用

<h1>Early Examples Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello Vue!'
            },
            //在Vue中使用jQuery
            mounted:function(){
                $('#app').html('我是jQuery!');
            }
        })
    </script>

实例调用自定义方法

methods:{
    add:function(){
        console.log("调用了Add方法");
    }
}

实例调用：

app.add();

实例方法

$mount方法

这里我们作了jspang的扩展，然后用$mount的方法把jspang挂载到DOM上

    <h1>Examples Method Demo</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
      var jspang = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am JSPang'
              }
          }
      })
      var vm = new jspang().$mount("#app")
    </script>

$destroy()卸载方法

用$destroy()进行卸载。

我写了一个button按钮，点击后卸载整个挂载。

html： 

<p><button onclick="destroy()">卸载</button></p>

 javascript

function destroy(){
   vm.$destroy();
}

$destroy()后边必须要有括号，没有括号是无用的。

$forceUpdate()更新方法

vm.$forceUpdate()

$nextTick()数据修改方法

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

 

function tick(){
    vm.message="update message info ";
    vm.$nextTick(function(){
        console.log('message更新完后我被调用了');
    })
}

实例事件

$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');
}

内置组件 -slot讲解

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

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）

data:{
    jspangData:{
        bolgUrl:'http://jspang.com',
        netName:'技术胖',
        skill:'Web前端'
    }
},

我们用<template></template>标签的方式定义了组件：

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

    </div>
</template>

我们现在就可以用slot功能让组件接收传递过来的值，并在模板中接收显示。

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>

案例的全部代码

    <h1>Slot content extend Demo</h1>
    <hr>
    <div id="app">
    <jspang>
        <span slot="bolgUrl">{{jspangData.bolgUrl}}</span>    
        <span slot="netName">{{jspangData.netName}}</span>    
        <span slot="skill">{{jspangData.skill}}</span>    
    </jspang>
    </div>


<template id="tmp">
    <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 jspang={
            template:'#tmp'
        }

        var app=new Vue({
            el:'#app',
            data:{
               jspangData:{
                   bolgUrl:'http://jspang.com',
                   netName:'技术胖',
                   skill:'Web前端'
               }
            },
            components:{
                "jspang":jspang
            }
        })
    </script>